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