关于 frontend-state-management
面向前端开发的状态管理技能，介绍跨组件应用状态的模式与库。内容涵盖 Redux Toolkit、Zustand、Context API 与 useReducer、MobX，以及副作用和服务端状态同步。
主要功能
- 01跨组件状态模式
- 02Redux Toolkit 指南
- 03Zustand 指南
- 04Context API 与 useReducer
- 05MobX 可观察状态
适用场景
- 01管理复杂应用状态
- 02在组件间共享状态
- 03保持状态变更可预测
- 04同步服务端状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-state-management确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/context-api-usereducer.mdmobx-observable-state.mdredux-with-redux-toolkit-react.mdzustand-lightweight-state-management.mdtemplates/component-template.tsx详细介绍
前端状态管理
目录
概述
使用现代模式和库实现可扩展的状态管理方案，处理应用状态、副作用以及组件间的数据流。
适用场景
- 复杂的应用状态
- 多个组件共享状态
- 可预测的状态变更
- 需要时间旅行调试
- 服务端状态同步
快速入门
最小可运行示例：
// 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/ 目录中的详细实现：
| 指南 | 内容 |
|---|---|
| Redux with Redux Toolkit (React) | Redux with Redux Toolkit (React) |
| Zustand (Lightweight State Management) | Zustand (Lightweight State Management) |
| Context API + useReducer | Context API + useReducer |
| MobX (Observable State) | MobX (Observable State) |
最佳实践
✅ 应该
- 遵循既定模式和约定
- 编写清晰、易于维护的代码
- 添加适当的文档
- 在部署前进行全面测试
❌ 不应该
- 跳过测试或验证
- 忽略错误处理
- 将配置值硬编码
评论
支持 Markdown