前一篇我們完成了咖啡的進貨功能，今天我們來延伸咖啡豆商品的部分，我們一樣先不複雜購買動作的複雜性，讓我們再走一次流程加深印象。

首先，先定義出 action types，於 types.js 檔案內新增如以下：

// ...省略之前的部分
const COFFEEBEAN_ORDERED = 'COFFEEBEAN_ORDERED';
const COFFEEBEAN_RESTOCKED = 'COFFEEBEAN_RESTOCKED';

module.exports = {
  // ...省略段落
  COFFEEBEAN_ORDERED,
  COFFEEBEAN_RESTOCKED
};

這邊將 action type 單獨拆分開來也是有原因的，試想如果當專案的複雜度增加的同時，管理這些變數就會是很棘手的問題，所以這裡才會用這樣的方式分離出來，暸解原由之後接著我們來處理訂單的部分，於 order.js 內新增關於咖啡豆購買的 function：

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

module.exports = {
  // ...省略段落
  orderCoffeeBean
}

簡單講解一下這邊的邏輯，由外部帶入數量與金錢作為 function 的參數，再透過數量與金錢的值由 reducer 來做二次的處理，所以才會成以上的樣子，相同的原理，咖啡豆也有補貨的部分，所以我們一樣要到 restock.js 內新增關於補咖啡豆商品的 function：

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

module.exports = {
  // ...省略段落
  restockCoffeeBean
}

再來我們要處理 reducer 的部分，針對我們新增的兩個動作去指定 switch case，所以我們於 orderReducer.js 檔案內作下列處理：

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

以上就算是完成咖啡豆部分的功能了，讓我們回到 ./index.js 下使用看看剛剛完成的動作吧！

// ...省略段落
// 讓我們來試看看買咖啡豆
store.dispatch(orderCoffeeBean(3, 15))
// 測試補咖啡豆
store.dispatch(restockCoffeeBean(10, 10))

unsubscribe()

這時我們再測試一次 index.js 應該會得到以下結果：

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 }
}

如果有一樣的結果的話，那麼恭喜你完成了咖啡豆部分的功能了，下一篇我們來處理蛋糕部分的功能，我相信有三次的練習應該會很熟悉 redux 的基本運作了吧！