Redux 中 combineReducers實(shí)現(xiàn)原理

使用一個(gè)reducer

    const initialState =
    {
        id          : 2,
        name    : 'myName', 
    }
    import { createStore } from 'redux';
    const reducer = function(state=initialState, action) {
                    //...        
        return state;
    }
    const store = createStore(reducer);

這種情況下，這個(gè)reducer函數(shù)會(huì)對(duì)所有的action進(jìn)行判斷和處理，傳入的state參數(shù)是整個(gè)store中的狀態(tài)的全集?？赡苁沁@樣：

    {
                id          : 2,
                name    : 'myName', 
    }

使用combineReducers 復(fù)合多個(gè)reducer

    const user = (state = [], action) => {
        switch (action.type) {
            case 'RENAME':
                //...
            default:
                return state;
        }
    }

const product = (state = [], action) => {
        switch (action.type) {
            case 'SOLD':
                //...
            default:
                return state;
        }
    }

const reducers = combineReducers({
    user,
    product,
});

const store = createStore(reducers);

這種情況下，每個(gè)reducer會(huì)對(duì)相關(guān)的action進(jìn)行處理，返回與之相關(guān)的狀態(tài)。（而實(shí)際實(shí)現(xiàn)是，combineReducers將所有reducer合并成立一個(gè)大的reducer）。

整個(gè)store的狀態(tài)全集會(huì)是如下樣子：

{
        user: {
            id: 0,
            name: 'myNmae',
        },
        product: {
                id: 0,
                is_sold: 0,
        }
}

可以看出這是一個(gè)樹(shù)形結(jié)構(gòu)，每個(gè)reducer所處理的數(shù)據(jù)在自己的分支結(jié)構(gòu)中。因此，每個(gè)reducer可以獨(dú)立的編寫(xiě)，無(wú)需關(guān)注其他reducer的數(shù)據(jù)(state)處理方式。同樣，dispatch的時(shí)候只要發(fā)送與之相關(guān)的內(nèi)容即可。
譬如，寫(xiě)一個(gè)“我”的reducer:

        const initialState =
        {
            name                 : null,
            displayName     : null,
        };

        const me = (state = initialState, action) =>
        {
            switch (action.type)
            {
                case 'SET_ME':
                {
                    const { name, displayName } = action.payload;
                    return { name, displayName };
                }
                default:
                    return state;
            }
        };

//想要設(shè)置“我”的屬性，只要：
store.dispatch({
    type    : 'SET_ME',
    payload : { "jacky", "小王"}
});

但是，事實(shí)上每個(gè)dispatch發(fā)出之后，所有reducer都會(huì)被調(diào)用一遍（只是大部分事不關(guān)己，直接返回自己的state），最終會(huì)返回一個(gè)完整的狀態(tài)樹(shù)，就像上面看到的樣子。

編碼建議

對(duì)于復(fù)雜的應(yīng)用，可以編寫(xiě)多個(gè)reducer，每個(gè)reducer專(zhuān)注處理一類(lèi)state。
可以將多個(gè)reducer的實(shí)現(xiàn)放到一個(gè)文件里實(shí)現(xiàn)，也可以每個(gè)reducer使用一個(gè)單獨(dú)的文件（便于分工）。