react-state-management

React 状态管理技能

技能概述

帮助 React 开发者掌握现代状态管理方案，包括 Redux Toolkit、Zustand、Jotai 和 React Query，适用于设置全局状态、管理服务端数据以及选择合适的状态管理解决方案。

适用场景

设置全局状态管理

当多个组件需要共享状态时，使用 Zustand 或 Redux Toolkit 创建统一的状态存储，避免 prop drilling，并支持状态持久化和开发工具调试。

管理服务端状态

处理远程数据获取、缓存和同步时，使用 React Query 管理服务器状态，自动处理加载状态、错误处理和数据失效，支持乐观更新和后台刷新。

选择状态管理方案

根据项目规模和复杂度，在 Redux Toolkit（大型应用）、Zustand（简单全局状态）、Jotai（原子化更新）和 React Query（服务端状态）之间做出合适选择。

核心功能

多种状态管理方案支持

覆盖主流 React 状态管理库：Redux Toolkit 适合复杂状态逻辑，Zustand 提供轻量级全局状态，Jotai 支持细粒度原子更新，React Query 专注于服务端状态管理。

TypeScript 集成模式

提供完整的 TypeScript 类型定义和类型安全的状态管理代码，包括强类型化的 hooks、store 类型推导和 action 类型检查，减少运行时错误。

最佳实践与迁移指南

包含状态管理最佳实践（如选择性订阅、状态正规化、不可变更新）和从旧版 Redux 到现代方案的迁移指南，帮助优化应用性能和代码可维护性。

常见问题

React 项目应该选择哪种状态管理方案？

根据项目规模和需求选择：小型应用和简单全局状态推荐 Zustand 或 Jotai；大型应用和复杂状态逻辑选择 Redux Toolkit；大量服务端交互的项目使用 React Query 配合轻量级客户端状态管理。

Redux Toolkit 和旧版 Redux 有什么区别？

Redux Toolkit 是 Redux 的官方推荐现代版本，大幅简化了配置，内置 Immer 支持直接"修改"状态，提供 createSlice 和 createAsyncThunk 等实用 API，减少了样板代码，配置 store 从几十行减少到几行。

React Query 适合用来管理什么状态？

React Query 专注于服务端状态管理，适合处理从 API 获取的远程数据，包括数据缓存、自动重新获取、乐观更新和分页等场景。对于 UI 状态（如模态框开关、侧边栏展开）和客户端状态，应使用 Zustand 或 Context API。