接下來要來介紹一下 useReducer，看到 "Reducer" 就可以料想到，他跟 Redux 應該有點關係。useReducer 是一種狀態管理工具，跟 useState 目的相同，但是他使用的是 Redux 那樣的 action - dispatch - reducer 的架構，跟 state 相比複雜了點，但也更適合管理負責複雜的 state。

useReducer 語法

const [state, dispatch] = useReducer(reducer, initialState, initialStateFn)

首先來介紹一下上面的語法，useReducer 需要傳入幾個參數：

1. reducer: 傳入設定好的 reducer。
2. initialState: 傳入初始的 state 值。
3. initialStateFn: 傳入一個初始化 state 用的 function，非必要參數。

使用 useReducer 會回傳一個 array ，裡面有兩個東西：

1. 現在的 state
2. dispatch function

使用 useReducer

與 Redux 類似，首先我們需要先設定 initial value：

const initialState = {
    value: 0
}

還需要寫一個 Reducer：

const exampleReducer = (state, action) => {
    switch(action.type){
        case "add": 
          return {value: state.value + 1}
        case "minus": 
          return {value: state.value - 1}
        default: 
          return state
    }
}

接著我們可以像在 Redux 中做的一樣，包裝 action 為一個 function：

const action = (type) => {
 return {
     type
 }
}

接著，把這個 reducer 、 initial value 放入 useReducer：

const App = () => {
    const [state, dispatch] = useReducer(exampleReducer, initialState)
    
    return (
        <div>
            ...
        </div>
    )
}

dispatch 的語法是：

dispatch(action)

取用 state 和 dispatch：

const App = () => {
    const [state, dispatch] = useReducer(exampleReducer, initialState)
    
    return (
        <div>
            <h2>現在次數：{state.value}</h2>
            <button onClick={()=>dispatch(action("add"))}>增加</button>
            <button onClick={()=>dispatch(action("minus"))}>減少</button>
        </div>
    )
}

這樣就可以使用 useReducer 了。

useReducer 優缺點

優點

• 可以管理需要複雜操作的 state。
• dispatch 不會因為元件的 re-render 而重新指派記憶體位置，以 props 傳入子元件時也不用擔心被 re-render 問題。

缺點

• 儲存的是元件的 state，而不是 store，沒辦法實現全局存取，需要搭配 useContext 才能實現。
• 沒有 middleware，沒辦法像是 Redux 一般可以使用其他工具來 fetch 檔案，或是處理 side effect。

middleware:
中介軟體，本質是一個或多個 function ，每一次執行有 middleware 的程式時都需要執行 middleware。常出現在後端框架中，例如當 request 進來時，先進入 middleware 處理，再交給後面的 route 處理。
在 redux 中則是在自 action 被指派後至進入 reducer 這一段期間，進行額位的處理，再送進 reducer。

以上，就是 useReducer 的基本用法，相較於 useState 來說複雜許多，因此也不太適合處理簡單的 state，但是當資料需要較為複雜的處理時，useReducer 就能夠派上用場了。

參考資料
React Hooks | 既生 useState 何生 useReducer ?
Day6-React Hook 篇-useReducer
【Day 22】Hook 05：useReducer