react-state-management

用途

本技能是一份现代 React 状态管理指南，面向需要在 React 应用中搭建、选择或重构状态管理方案的开发者。它把状态按使用范围分类，并针对每一类给出可选的库与实践建议，帮助减少在多个状态库之间的选择与混用问题。

主要能力

文档按状态类别组织内容：

局部状态（Local State）：组件内部、UI 相关状态，方案为 useState、useReducer。
全局状态（Global State）：跨组件共享，方案为 Redux Toolkit、Zustand、Jotai。
服务端状态（Server State）：远程数据与缓存，方案为 React Query、SWR、RTK Query。
URL 状态（URL State）：路由参数与搜索，方案为 React Router、nuqs。
表单状态（Form State）：输入值与校验，方案为 React Hook Form、Formik。

选型标准方面，文档给出的对应关系是：小型应用、状态简单时选 Zustand 或 Jotai；大型应用、状态复杂时选 Redux Toolkit；服务端交互密集时用 React Query 搭配轻量客户端状态；需要原子化、细粒度更新时选 Jotai。

使用方式

文档给出以 Zustand 为例的快速上手示例（store/useStore.ts）：

// 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，当上述导航层级不足时可查阅该文件。

最佳实践

建议做法包括：将状态尽量与其使用位置就近放置；使用选择器（selectors）做选择性订阅以避免不必要的重渲染；对数据进行范式化、展平嵌套结构以便更新；全面使用 TypeScript 类型覆盖以减少运行时错误；将服务端状态（React Query）与客户端状态（Zustand）的关注点分离。

不建议的做法包括：不要把一切都全局化；不要复制服务端状态，交给 React Query 管理；不要直接修改（mutate）状态，始终使用不可变更新；不要存储派生数据，应改为计算得出；不要混用范式，每类状态选定一个主要方案。

迁移

文档提供一个从旧版 Redux 迁移到 Redux Toolkit 的对照示例。旧写法使用常量 action type、action creator 和手写 reducer switch：

// 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;
  }
}

新写法使用 createSlice，借助 Immer 允许以「修改」风格书写 reducer：

// 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 });
    },
  },
});

适用场景与限制

适用场景包括：在 React 应用中设置全局状态管理；在 Redux Toolkit、Zustand、Jotai 之间做选型；用 React Query 或 SWR 管理服务端状态；实现乐观更新；调试状态相关问题；从遗留 Redux 迁移到现代写法。

限制方面：本资料未提供该技能的安装命令、定价或收费信息、支持平台、版本要求及性能基准等具体事实，这些内容暂未提供。

技能介绍

用途

主要能力

使用方式

最佳实践

迁移

适用场景与限制