frontend-state-management

用途

前端状态管理（Frontend State Management）用于在复杂前端应用中实现可扩展的状态管理方案，采用现代模式与库来处理应用状态、副作用以及组件之间的数据流。当应用状态复杂、多个组件需要共享状态、需要可预测的状态变更、需要时间旅行调试，或需要与服务端状态同步时，适合使用该技能。

主要能力

该技能覆盖多种主流状态管理方案，并在 references/ 目录中提供详细实现参考：

• Redux with Redux Toolkit（React）：使用 Redux Toolkit 管理状态，示例包含 createSlice、createAsyncThunk、PayloadAction 等 API 的用法，用于定义状态切片与异步数据获取。
• Zustand（轻量级状态管理）：适用于需要更轻量状态管理方案的场景。
• Context API + useReducer：使用 React 内置的 Context API 配合 useReducer 实现状态管理。
• MobX（可观察状态）：基于可观察对象的状态管理方式。

使用方式

资料提供了一个最小可运行示例，位于 store/userSlice.ts，使用 @reduxjs/toolkit 定义用户状态切片：

// store/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserState {
  items: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  items: [],
  loading: false,
  error: null
};

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async (_, { rejectWithValue }) => {
    try {
// ... (see reference guides for full implementation)

完整实现需参考 references/ 目录中的参考指南。

适用场景

• 复杂应用状态管理
• 多个组件共享状态
• 需要可预测的状态变更
• 需要时间旅行调试
• 服务端状态同步

最佳实践

建议遵循既有模式与约定，编写整洁、可维护的代码，添加适当的文档，并在部署前充分测试。应避免跳过测试或验证、忽略错误处理、硬编码配置值。

限制

资料未提供具体的安装命令、依赖版本、各方案的完整实现细节、性能数据或平台兼容性说明，这些内容暂未提供。