useReducer介紹

useState 的替代方案，它更適合一些邏輯較複雜且包含多個子值，或者下一個 state 依賴於之前的 state 等的特定場景
類似 Redux 中的功能 reducer。
它接收一個形如 (state, action) => newState 的reducer，並返回當前的 state 以及與其配套的 dispatch 方法。

const [state, dispatch] = useReducer(reducer, initState, initAction)

引數介紹

• reducer 是一個函式，就是一個函式類似 (state, action) => newState
  的函式，傳入 上一個 state 和 本次的 action， 根據 action 狀態處理並更新 state
• initState 是初始化的 state，也就是預設值
• initAction 是useReducer 初次執行時被處理的 action，其實惰性初始化，這麼做可以將用於計算 state 的邏輯提取到 reducer 外部，這也為將來對重置 state 的action 做處理提供了便利

返回值state，dispatch介紹

• state 狀態值
• dispatch 是更新 state 的方法，他接受 action 作為引數。useReducer 只需要呼叫dispatch(action) 方法傳入 action 即可更新 state

useContext 可以解決元件間的資料共享問題，而useReducer 可以解決複雜狀態管理的問題，如果把他們結合起來使用，就可以實現 redux 的功能了

useRuducer使用

例子：

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 App() {
  const [state, dispatch] = useReducer(reducer, {
    count: 0
  });
  return (
    <>
      點選次數: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}
 

注意： React 會確保 dispatch 函式的標識是穩定的，並且不會在元件重新渲染時改變，這就是為什麼可以安全地從 useRffect 或 useCallback 的依賴列表中省略 dispatch