Redux 入門 -- 拆分 reducer

本文目標：希望通過買水果生鮮的例子，和大家探討一下如何用 redux 處理比較複雜的 store 模型。

例子：買水果生鮮

在上一篇文章 Redux 入門 -- 基礎用法中，阿大用 redux 開起了水果店。

誰知道水果店生意越來越好，於是阿大開始擴充業務，不僅賣水果，還賣起了生鮮，於是有了水果部和生鮮部。

於是阿大想了想未來購買生鮮的顧客的行為：

// 買生鮮 - 雞蛋
function buyEgg(num) {
  return {
    type: 'BUY_EGG',
    payload: {
      count: num
    }
  }
}
複製程式碼

分了不同的部門之後，不同的業務有不同的記賬方式，得分賬記了，開來要增加一個生鮮的記賬本：

const freshState = {
  egg: 0
};
複製程式碼

原來的水果賬本也要改個名字：

- const state = {
+ const fruitsState = {
    apple: 0
  };
複製程式碼

然後增加生鮮部的收銀員, 管理生鮮賬本 freshState：

// 生鮮部收銀員
function freshReducer(state = freshState, action) {
  if (action.type === 'BUY_EGG') {
    return Object.assign({}, state, {
      egg: state.egg + action.payload.count
    });
  }
  return state;
}
複製程式碼

然後原來水果部的收銀員管理水果賬本 fruitsState 需要修改下：

// 水果部收銀員
- function reducer(state, action) {
+ function fruitReducer(state = fruitState, action) {
   if (action.type === 'BUY_APPLE') {
     return Object.assign({}, state, {
       apple: state.apple + action.payload.count
     });
   }
   return state;
 }
複製程式碼

但是阿大並不想看各個部門的分賬本，他只想看一個總賬本就好了。剛好 redux 提供了 combineReducers 功能，可以把各個收銀員管理的賬本合起來：

- const { createStore } = require('redux');
+ const { createStore, combineReducers } = require('redux');

// 總賬本
+ const state = {
+   fruits: fruitsReducer,
+   fresh: freshReducer
+ };

// 總收銀員
+ const reducer = combineReducers(state);

// 建立新的水果生鮮店
- const store = createStore(reducer, state);
+ const store = createStore(reducer);
複製程式碼

這樣，水果生鮮店就可以營業了，銷售員又開始處理顧客的購物需求了：

store.dispatch(buyApple(3)); // {"fruit":{"apple":3},"fresh":{"egg":0}}
store.dispatch(buyEgg(1)); // {"fruit":{"apple":3},"fresh":{"egg":1}}
store.dispatch(buyApple(4)); // {"fruit":{"apple":7},"fresh":{"egg":1}}
store.dispatch(buyEgg(8)); // {"fruit":{"apple":7},"fresh":{"egg":9}}
// ...
複製程式碼

升級之後的水果生鮮店又穩穩當當的運營起來了，阿大心裡美滋滋~

講解：

combineReducers

當業務場景越來越複雜的時候，state 的結構也會變得越來越複雜而且龐大。如果只用一個 reducer 來計算 state 的變化勢必會特別麻煩。這個時候我們就可以把 state 裡獨立的資料分離出來，單獨用一個 reducer 來計算，然後再通過 combineReducers 方法合入到 state 中。

combineReducers 接收一個物件，這個物件就是最終的 state

const reducer = combineReducers({
  fruits: fruitsReducer,
  fresh: freshReducer
});
複製程式碼

圖解

程式碼地址：Redux 入門 -- 拆分 reducer，直接控制檯執行 node ./demo2/index.js 檢視效果

上一篇：Redux 入門 -- 基礎用法

下一篇：Redux 入門 -- 處理 async action