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 zhangpeiyue

2、安装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方法修改如下：

// 第一个参数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;
    }
}

通过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就是什么！