React 初心者大補帖（5）：使用 useReducer 的正確姿勢
useReducer 是什麼？
想像你有一個玩具盒
useState：直接把玩具丟進盒子裡，想要什麼就直接拿什麼useReducer：你有一個聰明的機器人管家，你跟機器人說「我要做什麼」，機器人就幫你整理玩具盒
舉個例子：管理零用錢
基本語法和概念
什麼時候需要機器人管家？
- 事情很複雜時：要記錄很多東西（零用錢、存款、借錢記錄）並做很多計算，如果散開來寫很容易造成閱讀上的困難
- 避免搞錯：不會忘記記帳、不會算錯錢、按照固定步驟做，自行處理的話很容易在龐大的邏輯中迷失，漏掉一些驗證
管理零用錢
讓我們用程式碼來看四個步驟的差異：
- 檢查錢夠不夠
- 記錄你買了什麼
- 算出剩下多少錢
- 整理好你的帳本
useState 方式（自己管理每件事）
useReducer 方式（機器人管家）
看著變長的程式碼，你的心裡會不會浮現一個疑問：
「等等，這樣真的比較好嗎？
如果我只在一個地方使用，直接用 useState 寫在那裡不是比較簡單嗎？」
什麼時候 useState 比較好？
如果只是簡單的計數器，而且只在一個地方使用的話，直接寫就好，不需要炫技，把程式碼變得複雜。
什麼時候 useReducer 才真正有價值？
- 邏輯會被重複使用，像是購物車的邏輯可以在商品頁面、購物車頁面、結帳頁面使用，這時候就可以寫成 reducer
- 邏輯真的很複雜
- 需要測試邏輯
真正複雜的情境：智慧零用錢管理系統
讓我們擴展剛才的例子，讓小明不只管零用錢，還要：
- 管理多個錢包（現金、存款、紅包錢）
- 設定預算限制
- 記錄收入和支出
- 自動儲蓄規則
- 達成目標獎勵
如果使用 useState 會變成災難：
useReducer 則會拯救我們的程式碼：
useReducer 的優點在這時候就會很明顯：
- 邏輯集中：所有複雜的業務邏輯都在 reducer 裡
- 狀態一致：不會出現狀態不同步的問題
- 容易測試：可以單獨測試 reducer 的每個情境
- 容易理解：組件只負責 UI，邏輯都在 reducer
- 容易擴展：要加新功能就加新的 action type
什麼時候該選擇什麼？
- 狀態簡單 → useState
- 邏輯簡單且只用一次 → useState
- 邏輯複雜或會重複使用 → useReducer
useReducer 不是為了炫技，而是為了解決真正的問題。
就像你整理房間，如果只是放幾本書，你自己來就好；但如果要整理很多玩具、衣服、書本，找個會整理的機器人幫忙會更好。
大部分情況下，useState 就很好用了。但當你的狀態管理變得複雜時，useReducer 就是你的救星。
不要為了用而用，要為了解決問題而用。
以上就是今天的分享，我們下次見 👋🏻