react-state-management

此技能提供了一份以架構為核心的現代 React 應用程式狀態管理指南。內容涵蓋了狀態類別的完整範疇，包括本地元件狀態、複雜全域儲存區、伺服器端資料同步、URL 參數以及表單處理。開發者將學習如何導航當前的狀態管理生態系統，理解諸如 Jotai 等原子化儲存區、Zustand 等簡化中間件解決方案，以及 Redux Toolkit 等企業級框架之間的取捨。

• 使用 Redux Toolkit 實作全域狀態架構，包括 Slice 模式、型別化的 Dispatcher 以及中間件整合。
• 使用 Zustand 建立輕量且高效能的儲存區，支援 persist 與 devtools 中間件，並處理複雜的多 Slice 狀態組織。
• 利用 React Query 管理伺服器狀態與遠端資料同步，涵蓋快取策略、樂觀更新 (optimistic updates) 以及載入/錯誤狀態處理。
• 應用 Jotai 的原子化狀態模式，實現細粒度且高效能的 UI 更新。
• 根據應用程式規模、狀態複雜度以及客戶端與伺服器互動的需求，選擇最適合的工具。
• 從舊版 Redux 架構遷移至現代化的慣用模式，如 RTK Query 或簡化的儲存結構。
• 使用開發者工具、監控與狀態生命週期檢查技術來除錯狀態相關問題。

實作建議包括如何透過選擇性訂閱 (selective subscriptions) 避免非必要的重新渲染、管理可序列化的資料，以及使用 createAsyncThunk 實作健壯的非同步動作處理。本內容旨在協助建構可擴展前端系統的開發者，解決表單狀態、透過 nuqs 等函式庫處理的 URL 路由狀態，以及針對遠端資源進行複雜快取失效處理等多元需求。使用者將能提升在 React 環境中設計狀態密集型元件並維護乾淨、可測試程式碼庫的能力。