首先安装$ 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;