Redux高级进阶

1.Redux中的方法createStore实现原理

const createStore = (reducer) => {
    let state;
    let listeners = [];

    const getState = () => {
        return state;
    };

    const dispatch = (action) => {
        state = reducer(state, action);
        listeners.map((item) => {
            item();
        })
    };

    const subscribe = (listener) => {
        listeners.push(listener);
        return () => {
            listeners.filter((item) => {
                return item !== listener;
            })
        }
    };

    dispatch({});

    return {getState, dispatch, subscribe};
};

2.Reducer的拆分

先看一个例子：

const chatReducer = (state = {}, action = {}) => {
    switch (action.type) {
        case "ADD_CHAT":
            return {...state, chatLog: state.chatLog.concat(action.payload)};
        case "CHANGE_STATUS":
            return {...state, stateMessage: action.payload};
        case "CHANGE_USERNAME":
            return {...state, userName: action.payload};
        default:
            return {...state};
    }
};

上面代码中三种不同类型的action分别改变了State的三个不属性：chatLog、stateMessage、userName。这三个属性之间没有任何关联，故可进行拆分。

const chatLog = (state = {}, action = {}) => {
    //拆分成的小reducer
};
const stateMessage = (state = {}, action = {}) => {
    //拆分成的小reducer
};
const userName = (state = {}, action = {}) => {
    //拆分成的小reducer
};
const chatReducer = (state = {}, action = {}) => {
    return {
        chatLog: chatLog(state.chatLog, action),
        stateMessage: stateMessage(state.stateMessage, action),
        userName: userName(state.userName, action)
    }    
};

这样，我们就将原来的大的、毫无关联的Reducer拆分成了三个小的Reducer，方便不同的 攻城狮去维护 各自的模块。

当然，Redux早就想到了这一点，并给我们提供了一个函数combineReducers，来联合小Reducer：

import { combineReducers } from 'redux';

const chatLog = (state = {}, action = {}) => {
    //拆分成的小reducer
};
const stateMessage = (state = {}, action = {}) => {
    //拆分成的小reducer
};
const userName = (state = {}, action = {}) => {
    //拆分成的小reducer
};

const chatReducer = combineReducers({chatLog, stateMessage, userName});

//等同于：
const chatReducer2 = combineReducers({
    a: chatLog,
    b: stateMessage,
    c: userName,
});

这和上面的例子具有同样的效果。这样之后不同的模块负责人将只负责他所维护的模块的Reducer了。

参考：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html