自定義 Redux 中的 combineReducers

szysky 發(fā)布于2019-08-20 10:21 / 3414人閱讀

摘要：簡介中的能讓我們很方便地把多個組合起來，成為一個新的。正如官方文檔所說只是方便我們使用而已，我們可以自定義一個完全不同的來滿足我們特殊的需求。這個原則看著是很美好的，但在實際使用中還是會有一些例外的情況。

簡介

Redux 中的 combineReducers 能讓我們很方便地把多個 reducers 組合起來，成為一個新的 reducer。
然而，隨著我們的應(yīng)用變得越來越復(fù)雜，combineReducers 有可能不能滿足我們的需求。
正如 Redux 官方文檔所說:

This helper is just a convenience! You can write your own combineReducers that works differently, or even assemble the state object from the child reducers manually and write a root reducing function explicitly, like you would write any other function.

combineReducers 只是方便我們使用而已，我們可以自定義一個完全不同的 combineReducers 來滿足我們特殊的需求。

原理

我們先回憶一下 reducer 的寫法：

const reducer = (oldState, action) => newState;

reducer 是一個普通的函數(shù)，接受兩個參數(shù)：oldState 和 action，然后返回一個 newState。
為了把多個 reducers 組合起來，我們通常會用 Redux 自帶的 combineReducers 來實現(xiàn):

const rootReducer = combineReducers({
  key1: key1Reducer,
  key2: key2Reducer
});

先留意一下我們傳了什么給 combineReducers:

{
  key1: function(state.key1, action) { /*...*/ },
  key2: function(state.key2, action) { /*...*/ },
}

好了，讓我們先來想一想，經(jīng)過 combineReducers 的處理之后，我們得到了什么呢？
不用想了，很顯然我們得到了一個新的 reducer。
那這個新的 reducer 又長什么樣呢？

const rootReducer = (oldState, action) => newState;

你應(yīng)該不會驚訝，因為所有 reducer 都長這個樣子，即使它是已經(jīng)被組合過的 reducer，它也是長這個樣子。
現(xiàn)在你應(yīng)該猜到 combineReducers 做了什么了吧？其實它最基本形態(tài)是這樣子的:

function combineReducers(reducers) {
  return function (state, action) { /*...*/ };
}

它接受 reducers 作為參數(shù)，然后返回一個標(biāo)準(zhǔn)的 reducer 函數(shù)。

注意:
其實到了這一步，我們就可以自定義 combineReducers 了，我們完全可以寫一個類似的函數(shù)，然后在里面寫各種 switch...case 語句來達(dá)到自定義的目的。
但我覺得我們還是先看看 Redux 自帶的 combineReducers 做了什么比較好，因為我們自定義的 combineReducers 很有可能需要原來的功能。

還記得我剛才叫你留意的地方嗎？沒錯，就是下面這個:

// reducers
{
  key1: function(state.key1, action) { /*...*/ },
  key2: function(state.key2, action) { /*...*/ }
}

我們來回想一下 store.dispatch(action) 的過程：當(dāng)一個 action 觸發(fā)的時候，所有 reducers 都應(yīng)該響應(yīng)這個 action，做出相應(yīng)的改變，最后返回一個新的 store。
對著上面這個結(jié)構(gòu)，我們其實很容易就能寫出這樣的效果，還能加上一些其他的處理：

function reCombineReducers(reducers) {
  return function (state, action) {
    switch (action.type) {
      case SP_ACTION:
        return Object.assign({}, state, { /* do something */ });
      default:
        return Object.keys(reducers)
                    .map(k => ({ [k]: reducers[k](state[k], action) }))
                    .reduce((prev, next) => Object.assign({}, prev, next));
    }
  }
}

上面的例子模擬了原來 combineReducers 的功能，還對 SP_ACTION 進(jìn)行了特殊的處理，很簡單吧！

然而，上面的例子雖然模擬了 combineReducers 的功能，但失去了 combineReducers 的檢查對象變化的功能，因為現(xiàn)在的 default block 中會返回一個全新的對象。
有沒有方法可以既保留 combineReducers 的全部功能，又能擴(kuò)展它呢？
其實很簡單，我們只要利用 combineReducers 返回的函數(shù)就可以了！
(感謝 liximomo 指出上面例子中的缺陷)

function reCombineReducers(reducers) {
  let fn = combineReducers(reducers);
  return function (state, action) {
    switch (action.type) {
      case SP_ACTION:
        return Object.assign({}, state, { /* do something */ });
      default:
        return fn(state, action);
    }
  }
}

實例

按照 Redux 的原則，不同的 reducer 應(yīng)該相互獨立的，它們之間不應(yīng)該有任何依賴。
這個原則看著是很美好的，但在實際使用中還是會有一些例外的情況。
一個很簡單的例子，也是我遇到過的例子，就是實現(xiàn)一個簡單的表格 (其實我的情況復(fù)雜的多，需要實現(xiàn)類似 Excel 那樣的操作，同時支持其他額外的功能)。
我們先來設(shè)計一下 state:

// state
{
  rows: { ... },
  cells: { ... },
  data: { ... }
}

rows, cells, data 都會響應(yīng)一些特定的 action (如 CHANGE_ROW_PROPS, CHANGE_CELL_PROPS, CHANGE_DATA)，做出相應(yīng)的改變，這些都是我們所期望的。
然而，當(dāng)出現(xiàn)一些特殊的 action (如 GET_TABLE_SUCCESS，表示成功從服務(wù)端獲取數(shù)據(jù)) 的時候，災(zāi)難就出現(xiàn)了：
所有的 reducer 都需要監(jiān)聽 GET_TABLE_SUCCESS 這個 action，這意味著如果我們有 n 個 reducer 的話，我們就需要修改 n 個文件！
當(dāng)我再加上 UPDATE_TABLE_SUCCESS，REMOVE_TABLE_SUCCESS 之類的 action 時，我要再修改 n 個文件！
這不合理啊，為什么我加一個簡單的功能，需要修改這么多文件，最重要的是，這些修改都是非常類似！

這時候，我們就需要自定義 combineReducers 來解決我們的需求拉：

function reCombineReducers(reducers) {
  let fn = combineReducers(reducers);
  return function (state, action) {
    switch (action.type) {
      case GET_TABLE_SUCCESS:
      case UPDATE_TABLE_SUCCESS:
        return Object.assign({}, state, action.payload.table);
      case REMOVE_TABLE_SUCCESS:
        return initState;
      default:
        return fn(state, action);
    }
  }
}

const table = reCombineReducers({
  sections,
  suites,
  rows,
  cells,
  toys,
  data,
  logics
})

怎么樣，是不是比修改多個文件舒服很多？

(完)

出處

http://scarletsky.github.io/2...

參考資料

http://redux.js.org/docs/api/...
https://github.com/reactjs/re...

云服務(wù)器 GPU云服務(wù)器自定義頭像自定義網(wǎng)站自定義自定義按鈕

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80096.html

發(fā)表評論

登陸后可評論

0條評論

szysky

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW精要之商務(wù)模式

閱讀 1941·2021-11-22 15:25
Java程序員工作3年，薪資為何會被應(yīng)屆生倒掛？

閱讀 4216·2021-11-17 09:33
C++Qt開發(fā)-單線程實現(xiàn)生命游戲

閱讀 2619·2021-10-12 10:12
[Python]題集①

閱讀 1926·2021-10-09 09:44
軟件測試肖sir__軟件測試介紹001之測試分類（3）

閱讀 3324·2021-10-08 10:04
C語言實現(xiàn)通訊錄(靜態(tài)版)

閱讀 1425·2021-09-29 09:35
CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

閱讀 2042·2019-08-30 12:57
純CSS 常見3D實例

閱讀 1390·2019-08-29 16:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

自定義 Redux 中的 combineReducers

相關(guān)文章

React原理及其工作流程

**深入淺出redux學(xué)習(xí)（-）**

**React項目實戰(zhàn)：react-redux-router基本原理**

**React項目實戰(zhàn)：react-redux-router基本原理**

Redux 初見

發(fā)表評論

0條評論

szysky

男|高級講師

TA的文章

BREW精要之商務(wù)模式

Java程序員工作3年，薪資為何會被應(yīng)屆生倒掛？

C++Qt開發(fā)-單線程實現(xiàn)生命游戲

[Python]題集①

軟件測試肖sir__軟件測試介紹001之測試分類（3）

C語言實現(xiàn)通訊錄(靜態(tài)版)

CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

純CSS 常見3D實例

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

自定義 Redux 中的 combineReducers

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！