React归纳笔记：快速上手Redux之一初识
如何打造可复用的视图组件一直是React所关注的。但如果你要开发一个大型的web应用的话，只使用React是一件非常痛苦的事情。因为单是解决组件之间的数据传递与状态管理就够你喝一壶的了！在此向各位力荐一类库——Redux，它可以帮助我们更加高效、清晰地对应用和组件的状态进行管理！
Redux介绍
随着单页面应用的需求越来越复杂，你所需要管理的状态也越来越多。这里所说的状态即是数据，它不仅仅包括从服务器获取的数据，还包括本地所创建的数据，以及反映UI状态的数据。
Redux通过一系列约定的合理规范将修改应用的步骤标准化，集中化，使其不再错综复杂，变的更加清晰与可爱。
用官网一句话来介绍Redux：Redux是一个可预测化的JavaScript状态管理容器。
翻译成人话就是说：Redux是一个用于存放JavaScript状态的容器，只要你将状态放到该容器中，你编写的程序将会行为一致且易于测试！总之是很牛就对了。
Redux的主要组成有三部分：action 、reducer、store。
Redux配置
我们通过create-react-app快速搭建一个Redux环境。
1、创建my-app应用：
create-react-app zhangpeiyue2、安装redux
cnpm install redux --save进入到项目中，打开src文件夹，将除了index.js以外的所有文件全部删除！自此整个世界都安静了！
store(存储状态的仓库)
打开index.js，将代码全部干掉！然后写入以下代码：
// 引入createStore方法
import {createStore} from "redux";
// 初始化数据状态
const initState={
userName:"ZhangPeiYue",
age:16
}
// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为，后面再做介绍
const reducer = function(state=initState,action){
return state;
}
// 通过createStore方法创建store
const store=createStore(reducer);
// 通过store的getState方法取得状态
const myState=store.getState();
console.log(myState.userName)// ZhangPeiYue
console.log(myState.age)// 16解释代码：
1、state是应用的状态，而store指的是状态仓库。你也可以理解为是store是应用状态state的管理者。
2、state与store的关系：state=store.getState()。
3、store是通过调用Redux的createStore获得的。
4、reducer是一个同步函数，负责更新并返回一个新的state。
注意：store是单一数据源，只能有一个Store
Action(动作)
到目前为止，我们只是创建了一个store，并在store内存放了state，最后通过store.getState()得到了state。其它的什么也没有做。如果我们要添加或修改属性怎么办？
按照Redux规定，我们不能够直接修改state。也就是说，下面的行为是不允许的：
let myState=store.getState();
myState.userName="LaoWang";若要操作state，只能通过dispatch方法来派发一个action，这才是唯一的正途！
action其实是一个包含type(强制要求)属性的普通对象，这个type是我们判断用户行为的关键。
现在，我们将reducer方法修改如下：
const reducer = function(state=initState,action){
// 后续可能会有多个action,所以此处建议使用switch对type进行判断
switch(action.type){
case "ADD_TO_STATE":
return Object.assign(state,{
sex:"男"
})
default:
return state;
}
}通过dispatch来派发一个action：
store.dispatch({
type:"ADD_TO_STATE"
});查看下当前仓库状态：
const myState=store.getState();
console.log(myState.sex);// 男通过以上对程序的调整，成功为状态增加了一个值为男的sex属性。
完整代码：
// 引入createStore方法
import {createStore} from "redux";
// 初始化数据状态
const initState={
userName:"ZhangPeiYue",
age:16
}
// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为，后面再做介绍
const reducer = function(state=initState,action){
// 后续可能会有多个action,所以此处建议使用switch对type进行判断
switch(action.type){
case "ADD_TO_STATE":
return Object.assign(state,{
sex:"男"
})
default:
return state;
}
}
// 通过createStore方法创建store
const store=createStore(reducer);
store.dispatch({
type:"ADD_TO_STATE"
});
const myState=store.getState();
console.log(myState.sex);// 男小结：
1、dispatch是store下的方法。
2、dispatch派发action后，最终会执行到reducer函数
3、在reducer内得到的第二个参数即是派发的action
4、根据action的type属性，来决定是否操作state
不过到目前为止，增加的属性固定为男，如果要想通过action来控制其值的话，我们可以对reducer方法进行修改：
const reducer = function(state=initState,action){
// 后续可能会有多个action,所以此处建议使用switch对type进行判断
switch(action.type){
case "ADD_TO_STATE":
return Object.assign(state,{
sex:action.payload.sex
})
default:
return state;
}
}对action进行修改：
store.dispatch({
type:"ADD_TO_STATE",
payload:{
sex:"女"
}
});结果：
const myState=store.getState();
console.log(myState.sex);// 女小结：action可以通过payload属性设置数据载体，从而实现数据传值。
不过，目前action所荷载的数据并不够灵活，如果我要想改变sex值的话还要将action再写一遍，比较麻烦。所以我们可以采用函数工厂模式，根据需求生产action：
function addToState(sex){
return {
type:"ADD_TO_STATE",
payload:{
sex
}
}
}执行dispatch，查看结果：
store.dispatch(addToState("未知"));
const myState=store.getState();
console.log(myState.sex);// 未知完整代码：
// 引入createStore方法
import {createStore} from "redux";
// 初始化数据状态
const initState={
userName:"ZhangPeiYue",
age:16
}
// 第一个参数state是你保存在store中的数据。
// 第二个参数action是操作state的行为，后面再做介绍
const reducer = function(state=initState,action){
// 后续可能会有多个action,所以此处建议使用switch对type进行判断
switch(action.type){
case "ADD_TO_STATE":
return Object.assign(state,{
sex:action.payload.sex
})
default:
return state;
}
}
// 通过createStore方法创建store
const store=createStore(reducer);
function addToState(sex){
return {
type:"ADD_TO_STATE",
payload:{
sex
}
}
}
store.dispatch(addToState("未知"));
const myState=store.getState();
console.log(myState.sex);// 未知小结：action本质上是一个由函数产生的具有type属性的普通对象。
到现我们对reducer函数应该已经不陌生了。但需要注意以下几点：
1、reducer必须要是同步的纯函数，接收state与action
2、用户每次dispatch(action)后，reducer都会触发执行
3、reducer必须要有返回值，否则state为undefined
4、最后返回的state值会完全替换掉原来的state。说的直白一些，reducer返回的是什么，state就是什么！
—————END—————