React學(xué)習(xí)之Redux高階運(yùn)用

supernavy 發(fā)布于2019-08-23 18:37 / 2187人閱讀

摘要：增強(qiáng)除了解決復(fù)用問(wèn)題，高階的另一個(gè)重要作用就是對(duì)原始的進(jìn)行增強(qiáng)。就是典型的利用高階來(lái)增強(qiáng)的例子，它主要作用是使任意變成可以執(zhí)行撤銷(xiāo)和重做的全新。

在Redux架構(gòu)中，reducer是一個(gè)純函數(shù)，它的職責(zé)是根據(jù)previousState和action計(jì)算出新的state。在復(fù)雜應(yīng)用中，Redux提供的combineReducers讓我們可以把頂層的reducer拆分成多個(gè)小的reducer，分別獨(dú)立地操作state樹(shù)的不同部分。而在一個(gè)應(yīng)用中，很多小粒度的reducer往往有很多重復(fù)的邏輯，那么對(duì)于這些reducer，如何抽取公共邏輯，減少代碼冗余呢？這種情況下，使用高階reducer是一種較好的解決方案

reducer復(fù)用

我們將頂層的reduce拆分成多個(gè)小的reducer，肯定會(huì)碰到reducer復(fù)用問(wèn)題。例如有A和B兩個(gè)模塊，它們的UI部分相似，此時(shí)可以通過(guò)配置不同的props來(lái)區(qū)別它們。那么這種情況下，A和B模塊能不能共用一個(gè)reducer呢？答案是否定的。我們先來(lái)看一個(gè)簡(jiǎn)單reducer：

const LOAD_DATA = "LOAD_DATA";
const initialState = { ... };

function loadData() {
    return {
        type: LOAD_DATA,
        ...
    };
}

function reducer(state = initialState, action) {
    switch(action.type) {
        case LOAD_DATA:
            return {
                ...state,
                data: action.payload
            };
        default:
            return state;
    }
}

如果我們將這個(gè)reducer綁定到A和B兩個(gè)不同模塊，造成的問(wèn)題將會(huì)是，當(dāng)A模塊調(diào)用loadData來(lái)分發(fā)相應(yīng)的action時(shí)，A和B的reducer都會(huì)處理這個(gè)action，然后A和B的內(nèi)容就完全一致了。

這里我們必需意識(shí)到，在一個(gè)應(yīng)用中，不同模塊間的actionType必須是全局唯一的。

因此，要解決actionType唯一的問(wèn)題，還有一個(gè)方法就是通過(guò)添加前綴的方式來(lái)做到：

function generateReducer(prefix, state) {
    const LOAD_DATA = prefix + "LOAD_DATA";
    
    const initialState = { ...state, ...};
    
    return function reducer(state = initialState, action) {
        switch(action.type) {
            case LOAD_DATA:
                return {
                    ...state,
                    data: action.payload
                };
            default:
                return state;
        }
    }
}

這樣只要A和B模塊分別調(diào)用generateReducer來(lái)生成相應(yīng)的reducer，就能解決reducer復(fù)用的問(wèn)題了。而對(duì)于prefix，我們可以根據(jù)自己的項(xiàng)目結(jié)構(gòu)來(lái)決定，例如${頁(yè)面名稱(chēng)}_${模塊名稱(chēng)}。只要能夠保證全局唯一性，就可以寫(xiě)成一種前綴。

reducer增強(qiáng)

除了解決復(fù)用問(wèn)題，高階reducer的另一個(gè)重要作用就是對(duì)原始的reducer進(jìn)行增強(qiáng)。redux-undo就是典型的利用高階reducer來(lái)增強(qiáng)reducer的例子，它主要作用是使任意reducer變成可以執(zhí)行撤銷(xiāo)和重做的全新reducer。我們來(lái)看看它的核心代碼實(shí)現(xiàn)：

function undoable(reducer) {
    const initialState = {
        // 記錄過(guò)去的state
        past: [],
        // 以一個(gè)空的action調(diào)用reducer來(lái)產(chǎn)生當(dāng)前值的初始值
        present: reducer(undefined, {}),
        // 記錄后續(xù)的state
        future: []
    };
    
    return function(state = initialState, action) {
        const { past, present, future } = state;
        
        switch(action.type) {
            case "@@redux-undo/UNDO":
                const previous = past[past.length - 1];
                const newPast = past.slice(0, past.length - 1);
                
                return {
                    past: newPast,
                    present: previous,
                    future: [ present, ...future ]
                };
            case "@@redux-undo/REDO":
                const next = future[0];
                const newFuture = future.slice(1);
                
                return {
                    past: [ ...past, present ],
                    present: next,
                    future: newFuture
                };
            default:
                // 將其他action委托給原始的reducer處理
                const newPresent = reducer(present, action);
                
                if(present === newPresent) {
                    return state;
                }
                
                return {
                    past: [ ...past, present ],
                    present: newPresent,
                    future: []
                };
        }
    };
}

有了這高階reducer，就可以對(duì)任意一個(gè)reducer進(jìn)行封裝：

import { createStore } from "redux";

function todos(state = [], action) {
    switch(action.type) {
        case: "ADD_TODO":
        // ...
    }
}

const undoableTodos = undoable(todos);
const store = createStore(undoableTodos);

store.dispatch({
    type: "ADD_TODO",
    text: "Use Redux"
});

store.dispatch({
    type: "ADD_TODO",
    text: "Implement Undo"
});

store.dispatch({
    type: "@@redux-undo/UNDO"
});

查看高階reducer undoable的實(shí)現(xiàn)代碼可以發(fā)現(xiàn)，高階reducer主要通過(guò)下面3點(diǎn)來(lái)增強(qiáng)reducer：
能夠處理額外的action;
能夠維護(hù)更多的state;
將不能處理的action委托給原始reducer處理。