接續上一篇內容，繼續往下實作 Reducer function 吧！

讓我們來複習一下第一篇的觀念，Reducer 有幾個原則必須注意：

• 只會根據傳入的state & action 來處理新的state。
• 不允許修改現有state，相反的必須通過複製現有狀態並對複制的值進行更改來進行更新。
• 避免在此處理async function，會造成其他”side Effect”。

前一篇也有大概給過基本撰寫的範例，那麼讓我們回到我們 index.js 中繼續建立 reducer function:

// ...(略)接續前篇往下
// 建立Reducer
// 先建立我們的initialState
const initialState = {
  numOfCoffee: 20,
  numOfCoffeeBean: 20,
  numOfCake: 20,
}
// 這部分和useReducer hook是一樣的
const reducer = (state = initialState, action) => {
  switch(action.type) {
    case COFFEE_ORDERED:
      return {
        ...state,
        numOfCoffee: state.numOfCoffee - action.payload
      }
    default: 
      return state;
  }
}

最後我們來設立最重要的 Redux store 吧，首先先引入redux到專案當中：

const createStore = require('redux').createStore;

這裡你會看到 createStore 但不要怕，用就對了，因為這個寫法已經被 configureStore 給取代了，但我還是想讓大家知道演進的脈絡，包含怎麼將舊的 Redux 整理成與 redux-toolkit 結合，所以這裡我還是採舊版的寫法。
接著，我們利用引入的 function 來設定 store :

// 建立Store
const store = createStore(reducer)
// 來試試拿取 initialState
console.log('initial state', store.getState());
// 當state change時可以觸發的 callback
const unsubscribe = store.subscribe(() => console.log('更新', store.getState()))

// 讓我們來試看看點餐
store.dispatch(orderCoffee())
store.dispatch(orderCoffeeObj)
store.dispatch(orderCoffeeByNum(2))

unsubscribe()

完成後我們來測試一下，於終端機輸入：

node index.js

然後應該會看到回傳以下結果：

initial state { numOfCoffee: 20, numOfCoffeeBean: 20, numOfCake: 20 }
更新 { numOfCoffee: 19, numOfCoffeeBean: 20, numOfCake: 20 }
更新 { numOfCoffee: 18, numOfCoffeeBean: 20, numOfCake: 20 }
更新 { numOfCoffee: 16, numOfCoffeeBean: 20, numOfCake: 20 }

那麼恭喜你，已經完成一個基本的點餐功能了，下一篇我們讓這樣的流程作出有效的分層，以及一般實務上常用的拆分方式。