用途
本技能是一份现代 React 状态管理的综合指南，覆盖从本地组件状态到全局存储以及服务器状态同步的各类模式。它用于在 React 应用中搭建全局状态管理、在 Redux Toolkit、Zustand、Jotai 之间做选择、使用 React Query 或 SWR 管理服务器状态、实现乐观更新、调试状态相关问题，以及从旧版 Redux 迁移到现代模式。
主要能力
状态分类
技能将状态划分为五类，并给出对应方案：
- 本地状态：组件专属的 UI 状态，使用 useState、useReducer。
- 全局状态：跨组件共享，使用 Redux Toolkit、Zustand、Jotai。
- 服务器状态：远程数据与缓存，使用 React Query、SWR、RTK Query。
- URL 状态：路由参数与搜索，使用 React Router、nuqs。
- 表单状态：输入值与校验，使用 React Hook Form、Formik。
选型标准
- 小型应用、简单状态 → Zustand 或 Jotai
- 大型应用、复杂状态 → Redux Toolkit
- 大量服务器交互 → React Query + 轻量客户端状态
- 原子化/细粒度更新 → Jotai
模式示例
技能提供了多种可直接参考的代码模式：
- Zustand 快速上手：使用 create 配合 devtools、persist 中间件，定义 user、theme 等状态与操作。
- Redux Toolkit 与 TypeScript：configureStore、createSlice、createAsyncThunk，以及类型化的 useAppDispatch、useAppSelector。
- Zustand 分片（可扩展）：通过 StateCreator 将 store 拆分为 userSlice、cartSlice 等，并提供选择性订阅以避免不必要的重渲染。
- Jotai 原子状态：基础 atom、派生 atom、atomWithStorage 持久化、异步 atom、只写 atom（动作）。
- React Query 服务器状态：查询键工厂、useQuery、useMutation，以及带乐观更新与回滚的 onMutate、onError、onSettled。
- 客户端与服务器状态结合：Zustand 管理 UI 状态，React Query 管理服务器数据。
使用方式
技能以指令形式给出：先明确目标、约束与所需输入，再应用相关最佳实践并验证结果，最后提供可执行步骤与验证方法。代码示例可直接作为实现参考。
最佳实践
推荐做法：
- 就近放置状态，让状态尽可能靠近使用位置。
- 使用选择器，通过选择性订阅避免不必要的重渲染。
- 规范化数据，扁平化嵌套结构以便更新。
- 全面类型化，用 TypeScript 覆盖防止运行时错误。
- 分离关注点，服务器状态（React Query）与客户端状态（Zustand）分开管理。
应避免：
- 不要过度全局化，并非所有状态都需要放进全局。
- 不要重复服务器状态，交给 React Query 管理。
- 不要直接修改状态，始终使用不可变更新。
- 不要存储派生数据，应计算得出。
- 不要混用范式，每个类别选定一个主要方案。
迁移指南
技能包含从旧版 Redux 迁移到 Redux Toolkit 的示例：旧版使用 action type 常量与 switch 分支的 reducer，迁移后使用 createSlice，借助 Immer 允许“可变”写法。
适用场景
- 在 React 应用中搭建全局状态管理
- 在 Redux Toolkit、Zustand、Jotai 之间做选择
- 使用 React Query 或 SWR 管理服务器状态
- 实现乐观更新
- 调试状态相关问题
- 从旧版 Redux 迁移到现代模式
限制
- 仅当任务明确匹配上述范围时使用本技能。
- 不要将输出视为环境特定验证、测试或专家评审的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准，应停止并请求澄清。
- 本技能不适用于与 React 状态管理无关的任务，或超出该范围的其它领域或工具。
资源
技能列出了 Redux Toolkit 文档、Zustand GitHub、Jotai 文档、TanStack Query 等参考资源。