使用一個reducer

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

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

目前成都創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設計、富蘊網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

使用combineReducers 復合多個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);

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

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

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

可以看出這是一個樹形結構，每個reducer所處理的數(shù)據(jù)在自己的分支結構中。因此，每個reducer可以獨立的編寫，無需關注其他reducer的數(shù)據(jù)(state)處理方式。同樣，dispatch的時候只要發(fā)送與之相關的內(nèi)容即可。
譬如，寫一個“我”的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;
            }
        };

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

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

編碼建議

對于復雜的應用，可以編寫多個reducer，每個reducer專注處理一類state。
可以將多個reducer的實現(xiàn)放到一個文件里實現(xiàn)，也可以每個reducer使用一個單獨的文件（便于分工）。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：Redux中combineReducers實現(xiàn)原理-創(chuàng)新互聯(lián)
轉載注明：http://www.rwnh.cn/article24/csoije.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、建站公司、網(wǎng)站設計、域名注冊、網(wǎng)站改版、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)