> ## Content Index
> Fetch the complete content index at: https://blog.anthea.day/llms.txt
> Use this file to discover other available public pages before exploring further.

# React 初心者大補帖（5）：使用 useReducer 的正確姿勢
- URL: https://blog.anthea.day/series-react-beginner-5/
- Published: 2025-06-29T16:41:23.000Z
- Updated: 2026-11-07T20:07:46.000Z
- Author: Anthea / 芫荽
- Tags: #Migrated-1792241843742, #Import 2026-10-17 12:57, Coding, React 初心者大補帖

### useReducer 是什麼？

想像你有一個玩具盒

- `useState` ：直接把玩具丟進盒子裡，想要什麼就直接拿什麼
- `useReducer` ：你有一個聰明的機器人管家，你跟機器人說「我要做什麼」，機器人就幫你整理玩具盒

#### 舉個例子：管理零用錢

![](https://blog.anthea.day/content/images/2026/10/1-jh6u_dojawnvnqichyb5nq.png)

![](https://blog.anthea.day/content/images/2026/10/1-8qfrbr9v4nwv_fi1mfgxpa.png)

---

### 基本語法和概念

![](https://blog.anthea.day/content/images/2026/10/1-atfywgmvq36tgr3jymixza.png)

#### 什麼時候需要機器人管家？

1. 事情很複雜時：要記錄很多東西（零用錢、存款、借錢記錄）並做很多計算，如果散開來寫很容易造成閱讀上的困難
2. 避免搞錯：不會忘記記帳、不會算錯錢、按照固定步驟做，自行處理的話很容易在龐大的邏輯中迷失，漏掉一些驗證

---

### 管理零用錢

讓我們用程式碼來看四個步驟的差異：

1. 檢查錢夠不夠
2. 記錄你買了什麼
3. 算出剩下多少錢
4. 整理好你的帳本

#### useState 方式（自己管理每件事）

![](https://blog.anthea.day/content/images/2026/10/1-3v82h6rrp2gknl0d4_aqbw.png)

#### useReducer 方式（機器人管家）

![](https://blog.anthea.day/content/images/2026/10/1-cu78xrb_boxlrna_lc15aq.png)

看著變長的程式碼，你的心裡會不會浮現一個疑問：

> 「等等，這樣真的比較好嗎？  
>  
> 如果我只在一個地方使用，直接用 useState 寫在那裡不是比較簡單嗎？」

#### 什麼時候 useState 比較好？

如果只是簡單的計數器，而且只在一個地方使用的話，直接寫就好，不需要炫技，把程式碼變得複雜。

#### 什麼時候 useReducer 才真正有價值？

1. 邏輯會被重複使用，像是購物車的邏輯可以在商品頁面、購物車頁面、結帳頁面使用，這時候就可以寫成 reducer
2. 邏輯真的很複雜
3. 需要測試邏輯

---

### 真正複雜的情境：智慧零用錢管理系統

讓我們擴展剛才的例子，讓小明不只管零用錢，還要：

- 管理多個錢包（現金、存款、紅包錢）
- 設定預算限制
- 記錄收入和支出
- 自動儲蓄規則
- 達成目標獎勵

如果使用 useState 會變成災難：

![](https://blog.anthea.day/content/images/2026/10/1-gyaxco3bvq1fklmxeqdt5g.png)

useReducer 則會拯救我們的程式碼：

![](https://blog.anthea.day/content/images/2026/10/1-twxfr6nskhmvunjbgexcng.png)

useReducer 的優點在這時候就會很明顯：

1. 邏輯集中：所有複雜的業務邏輯都在 reducer 裡
2. 狀態一致：不會出現狀態不同步的問題
3. 容易測試：可以單獨測試 reducer 的每個情境
4. 容易理解：組件只負責 UI，邏輯都在 reducer
5. 容易擴展：要加新功能就加新的 action type

#### 什麼時候該選擇什麼？

- 狀態簡單 → useState
- 邏輯簡單且只用一次 → useState
- 邏輯複雜或會重複使用 → useReducer

---

`useReducer` 不是為了炫技，而是為了解決真正的問題。

就像你整理房間，如果只是放幾本書，你自己來就好；但如果要整理很多玩具、衣服、書本，找個會整理的機器人幫忙會更好。

大部分情況下，`useState` 就很好用了。但當你的狀態管理變得複雜時，`useReducer` 就是你的救星。

不要為了用而用，要為了解決問題而用。

以上就是今天的分享，我們下次見 👋🏻