redux

首先安装$ yarn add redux安装redux
创建一个store的文件夹。
在store的文件夹下创建action的文件夹，此文件夹管理所有派发行为
在store的文件夹下创建reducer的文件夹，此文件夹管理所有模块的reducer
在store的文件夹下创建 action-types.js 管理所有行为
在store的文件夹下创建 index.js 创建store容器
现在我们在action，reducer中各创建user.js 和 index.js

action-types.js

export const ADD_USER_INIT = 'ADD_USER_INIT';//添加用户
export const EDIT_USER_INIT = 'EDIT_USER_INIT';//编辑用户
export const RM_USER ='RM_USER';//删除用户

reducer/user.js

import * as TYPE from '../action-types.js '; 导入所有行为标识
exprot default function user(state={},action){//创建一个用户模块的reducer，默认有两个参数，state原始值，可设默认值，action为派发行为
   switch (action.type) {
        case TYPE.ADD_USER_INIT:
             //...要执行的操作
            break;
        case TYPE.EDIT_USER_INIT:
            //...要执行的操作
            break;
        case TYPE.RM_USER:
            //...要执行的操作
            break;
        default:
            break;
    }
    return state;//最后把修改后的state返回
}

reducer下的index.js打包所有reducer为对象导出

// 把每个模块的单独设定的reducer函数最后合并成为总的reducer
//为了保证合并reducer过程中，每个模块管理的状态信息不会相互冲突，redux在合并的时候把容器的状态进行分开管理
import user from './user';
import { combineReducers } from 'redux';//辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 [`createStore`](http://cn.redux.js.org/docs/api/createStore.html) 方法。

const reducer = combineReducers({
    user
})
export default reducer;

action下的user.js

//每个板块单独的action-creator：就是把dispatch派发时候需要传递的action对象进一步统一封装处理
import * as TYPE from '../action-types';
let user = {
    addUser(){
        return {
            type:TYPE.ADD_USER_INIT
        };
    },
    editUser(){
        return {
            type:TYPE.EDIT_USER_INIT
        }
    }
};
export default user;

action下的index.js

  import user from './user';

const action = {
    user
}

export default action;

store下的index.js

import { createStore } from 'redux';
import reducer from './reducer';

let store = createStore(reducer);

export default store;