像仓管一样管理redux-优化管理

前言

今天我们来讨论之前我们创建的仓库优化，方便更好的协作。

仓库不断扩大，许多人共同管理（reducer）

随着仓库的不断扩大，一个仓管肯定搞不定这么多订单。也就是所一个reducer肯定是搞不定的。问题来了就解决问题，多个reducer那么我们就合并reducer。这个方法我们就取个优雅的名字combineReducers。是不是很有意境^V^。。。

// 合并之后的reducer一定和我们之前的写一个reducer一样。接受两个参数，state和action
function combineReducers(reducers) {
    // reducers 传进来一定要是个对象，因为这样我们才知道处理的是那个reducer，注册state我们也通过相应的key注册
    // 比如 {demo: function(demoState, action){}}
    // 在页面获取我们通过state.demo获取
    return function(state = {}, action) {
        return Object.keys(reducers).reduce((currentState, key) => {
            currentState[key] = reducers[key](state[key], action);
            return currentState
        }, {})
    }
}

通过这样我们把合并的reducer注册到createStore中

// 伪代码
const store = createStore(combineReducers(reducers));

简化库存流程

现在遇到一个问题，每次改变库存之后我们都要手动录单，单子（action）那么多，就把工作量给加大了。

// 单子就是我们的action
const types = {
    IMPORT_APPLE: 'IMPORT_APPLE'
}
// 进苹果
function increaseApple(num) {
    return {type: types.IMPORT_APPLE, num}
}
// 每次我们要修改库存都要手动去dispatch
let initState = {
    num: 0
}
function reducer(state = initState, action) {
    switch(action.type) {
        case types.IMPORT_APPLE:
            return {
                ...state,
                num: state.num + action.num
            }
        default:
            return {
                ...state
            }
    }
}
const store = createStore(reducer);
store.dispatch(increaseApple(100))

那么我们就来简化我们的action。用一个方法直接给我们包装了action，然后我们叫bindActionCreators。

// 传入什么样的方法，我们就给你包装一层在还给你
function bindActionCreators(actions, dispatch) {
    // actions是个对象
    return Object.keys(actions).reduce((currentAction, key) => {
        currentAction[key] = (...args) => {
            dispatch(actions[key](...args));
        }
        return currentAction;
    }, {})
}

// 接下来我们来优雅的使用

let actions = {
    increaseApple
};
let newActions = bindActionCreators(actions, store.dispatch);
newActions.increaseApple(20);

是不是屌炸天了？

后续

下一节我们来讲redux的中间件原理，实现我们自己的中间件。