看到 useReducer 你可能會疑惑，這跟前幾天講的 Redux 裡的 Reducer 有什麼毛線關係嗎？

的確！useReducer 的觀念跟用法都跟 Redux 很像，所以如果你已經會 Redux，那 useReducer 你也已經會了！

認識 useReducer

useReducer 是 React 的 hook，讓我們可以用 reducer、action、dispatch 來操作 state，在先前我們已經使用過 useState 來操作 state，useState 的底層其實就是用 useReducer 實踐的，而 useReducer 可以說是用來處理複雜邏輯的 state

useReducer 使用方法

從 react 中載入 useReducer
宣告state、dispatch、reducer 與初始值

1. 從 react 中載入 useReducer

1	import { useReducer } from "react";

2. 宣告 state、dispatch、reducer 與初始值

1	const [state, dispatch] = useReducer(reducer, initialArg, init);

state：狀態
dispatch：呼叫 action 的方法
reducer：對 state 做操作
initialArg：初始值
init：初始化 state 的函式，非必要的參數

以下是一個使用 useReducer 的範例

範例: 計數器

import { useReducer } from "react";

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();
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>Count: {state.count}</h1>

      <button onClick={() => dispatch({ type: "decrement" })}>
        decrement
      </button>

      <button onClick={() => dispatch({ type: "increment" })}>
        increment
      </button>
    </div>
  );
}

點擊 decrement 減少 count，點擊 increment 增加 count

結語

雖然 useReducer 跟 Redux 很像，但是無法完全取代 Redux，useReducer 無法存取 global store，必須搭配 context API 才能做出類似簡易版 Redux 的效果，適合在較輕量的專案

Reference

React useReducer

本文為 IT 鐵人賽系列文你 React 了嗎? 30 天解鎖 React 技能

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

【DAY 29】useReducer 處理複雜邏輯的 state