話不多說，還是先上圖吧。

結束了寫鐵人30最愉快部分，還是要來釐清一下到底什麼是useReducer。

稍微看了一些文件和大家的分享，大概可以知道useReducer有以下的特點/用法。

1. 跟redux很類似
2. 可以傳遞dispatch
3. 是useState的替代用法

跟redux很類似

官方文件也補充說明了：

謝謝。
我不熟悉。

：請問一石二鳥是什麼意思呀？
：哦！就是一箭雙鵰的意思呀！

謝謝。

可以傳遞dispatch

什麼是dispatch，google翻譯有：派遣、調度的意思。
查了一下他跟react有什麼關係，就會跳出「react、dispatch、action、redux」。
ok，又多了一個看不懂的東西了。

還是先往下看好了。

是useState的替代用法

是的！就是一樣有狀態可以存值，一樣有方法可以改變狀態。
那不一樣的是什麼呢？
就是可以dispatch action，並且處理比較複雜的邏輯。

於是我決定先來看code了。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

首先，建立了一個initialState的object，並且設定了count的值為0

const initialState = {count: 0};

接著有一個function，接收兩個參數，兩個參數應該都是object，所以有各自的屬性。
根據action裡，不同的type值，會回傳不同的count。
其中，count值得變化是建立在接收到的state的改變上。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

最後，渲染到頁面上的function中，先是建立了一個useReducer。
reducer是剛剛創建的函數，功能是拿來改變count的值。
initialState是最開始我們初始化的數值。

綁定的onClick事件，裡面dispatch了一個action，給予了不同的type。

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

豁然開朗。吧。

於是，好像搞懂了什麼！
useReducer可以透過dispatch(我可能會翻譯成調度)action(動作)，並且在裡面給予不同的值，
接著根據這些不同的值，去改變state的值。

const [state, dispatch] = useReducer(reducer, initialState);
<button onClick={() => dispatch({type: 'decrement'})}>-</button>

有一個初始為0的count，dispatch一個action，並透過reducer這個方法，
在type='decrement'的情況下，回傳count: state.count + 1。

需要注意的就是，count是存在state裡面的，所以渲染出來的時候記得要state.count。
(這個state就是const [state, dispatch]前面的那個state)

很高興我們不需要知道什麼是redux，也可以使用useReducer。
開勳。