react-state-management

React 状态管理

现代 React 状态管理模式的全面指南，涵盖从局部组件状态到全局 store 以及服务端状态同步。

何时使用本技能

• 在 React 应用中设置全局状态管理
• 在 Redux Toolkit、Zustand 或 Jotai 之间做选择
• 使用 React Query 或 SWR 管理服务端状态
• 实现乐观更新
• 调试与状态相关的问题
• 从旧版 Redux 迁移到现代模式

核心概念

1. 状态分类

类型	描述	解决方案
局部状态	组件专用、UI 状态	useState、useReducer
全局状态	跨组件共享	Redux Toolkit、Zustand、Jotai
服务端状态	远程数据、缓存	React Query、SWR、RTK Query
URL 状态	路由参数、搜索	React Router、nuqs
表单状态	输入值、校验	React Hook Form、Formik

2. 选择标准

Small app, simple state → Zustand or Jotai
Large app, complex state → Redux Toolkit
Heavy server interaction → React Query + light client state
Atomic/granular updates → Jotai

快速开始

Zustand（最简单）

// store/useStore.ts
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface AppState {
  user: User | null
  theme: 'light' | 'dark'
  setUser: (user: User | null) => void
  toggleTheme: () => void
}

export const useStore = create<AppState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        theme: 'light',
        setUser: (user) => set({ user }),
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
      }),
      { name: 'app-storage' }
    )
  )
)

// Usage in component
function Header() {
  const { user, theme, toggleTheme } = useStore()
  return (
    <header className={theme}>
      {user?.name}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </header>
  )
}

详细模式与完整示例

详细的模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。

最佳实践

应该做的

• 共置状态 - 让状态尽可能靠近使用它的位置
• 使用选择器 - 通过选择性订阅避免不必要的重渲染
• 规范化数据 - 展平嵌套结构以便更轻松地更新
• 为一切添加类型 - 完整的 TypeScript 覆盖可防止运行时错误
• 分离关注点 - 服务端状态（React Query）与客户端状态（Zustand）分开

不应该做的

• 不要过度全局化 - 并非所有内容都需要放在全局状态中
• 不要重复服务端状态 - 交给 React Query 管理
• 不要直接修改 - 始终使用不可变更新
• 不要存储派生数据 - 而是计算它
• 不要混合范式 - 每个类别选择一种主要解决方案

迁移指南

从旧版 Redux 到 RTK

// Before (legacy Redux)
const ADD_TODO = "ADD_TODO";
const addTodo = (text) => ({ type: ADD_TODO, payload: text });
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

// After (Redux Toolkit)
const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      // Immer allows "mutations"
      state.push({ text: action.payload, completed: false });
    },
  },
});