今天要完成的功能為我們預設的第三樣商品蛋糕部分的購買與補貨，邏輯會和前一篇有點類似，目的也是讓大家熟悉一下 redux 資料更新的流程，那麼我們開始吧！

一樣我們先處理 types.js 的檔案，新增蛋糕的購買與補貨：

// ...省略段落
const CAKE_ORDERED = 'CAKE_ORDERED';
const CAKE_RESTOCKED = 'CAKE_RESTOCKED';

module.exports = {
  // ...省略段落
  CAKE_ORDERED,
  CAKE_RESTOCKED
};

這裡的處理流程和前面處理咖啡、咖啡豆的商品是一致的，如果有不懂的話可以回到前面的章節複習一下，那麼我們接著於 order.js 內處理購買蛋糕的部分，如下：

// ... 省略段落
const orderCake = (qty, income) => {
  return {
    type: CAKE_ORDERED,
    payload: {
      qty: qty,
      income: income
    }
  }
}

module.exports = {
  orderCoffee,
  orderCoffeeBean,
  orderCake
}

這裡一樣是與前面處理咖啡與咖啡豆商品相同的作法，用兩個參數去銜接處理前與數量的值，後續由 reducer 接續處理，然後是補貨的動作，於 restock.js 內新增以下：

// ...省略段落
const restockCake = (qty, pay) => {
  return {
    type: CAKE_RESTOCKED,
    payload: {
      qty: qty,
      pay: pay,
    }
  }
}

module.exports = {
  restockCoffee,
  restockCoffeeBean,
  restockCake
}

再來我們處理 reducer 的段落，針對我們剛才新增的動作來處理，於 orderReducer.js 內新增以下：

const orderReducer = (state = initialState, action) => {
  switch(action.type) {
    // ...省略case COFFEE_ORDERED....段落
    case CAKE_ORDERED:
      // 顧客買 => 商品-, 營收+ 
      return {
        ...state,
        numOfCake: state.numOfCake - action.payload.qty,
        assets: state.assets + action.payload.income
      }
    case CAKE_RESTOCKED:
      // 補貨 => 商品+, 營收-
      return {
        ...state,
        numOfCake: state.numOfCake + action.payload.qty,
        assets: state.assets - action.payload.pay
      }
    default: 
      return state;
  }
}

這裡和前面咖啡與咖啡豆商品的做法相同，利用 switch case 針對對應的 action type 做對應的處理，完成後我們於 ./index.js 內進行測試，使用剛剛定義完成的動作吧！

// ...省略段落
// 試看看買蛋糕
store.dispatch(orderCake(2, 30))
// 測試補蛋糕
store.dispatch(restockCake(5, 25))

unsubscribe()

應該會得到以下結果：

initial state {
  orderReducer: { numOfCoffee: 20, numOfCoffeeBean: 20, numOfCake: 20, assets: 1000 }
}
更新 {
  orderReducer: { numOfCoffee: 18, numOfCoffeeBean: 20, numOfCake: 20, assets: 1020 }
}
更新 {
  orderReducer: { numOfCoffee: 38, numOfCoffeeBean: 20, numOfCake: 20, assets: 1010 }
}
更新 {
  orderReducer: { numOfCoffee: 38, numOfCoffeeBean: 17, numOfCake: 20, assets: 1025 }
}
更新 {
  orderReducer: { numOfCoffee: 38, numOfCoffeeBean: 27, numOfCake: 20, assets: 1015 }
}
更新 {
  orderReducer: { numOfCoffee: 38, numOfCoffeeBean: 27, numOfCake: 18, assets: 1045 }
}
更新 {
  orderReducer: { numOfCoffee: 38, numOfCoffeeBean: 27, numOfCake: 23, assets: 1020 }
}

這時候我們回過頭來看看 reducer 的部分是不是已經很雜亂了呢？一般我們會因為要方便維護所以選擇將原本的 initial state 再次分開，讓每個檔案處理對象單一，有點類似工廠泰勒化的概念在處理你的段落，這樣可以方便後續維護。

下一篇我們來整理我們目前的 Reducer，用來模擬專案內複雜化的樣子。