
关于
按照既定模式创建 Zustand Store,具备正确的 TypeScript 类型和中间件。
name: zustand-store-ts description: "按照既定模式创建 Zustand store,使用正确的 TypeScript 类型和中间件。" risk: unknown source: community date_added: "2026-02-27"
Zustand Store
按照既定模式创建 Zustand store,使用正确的 TypeScript 类型和中间件。
快速开始
从 assets/template.ts 复制模板并替换占位符:
{{StoreName}}→ PascalCase 格式的 store 名称(例如Project){{description}}→ 用于 JSDoc 的简短描述
始终使用 subscribeWithSelector
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<MyStore>()(
subscribeWithSelector((set, get) => ({
// state and actions
}))
);
分离状态和操作
export interface MyState {
items: Item[];
isLoading: boolean;
}
export interface MyActions {
addItem: (item: Item) => void;
loadItems: () => Promise<void>;
}
export type MyStore = MyState & MyActions;
使用独立选择器
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);
// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();
在 React 外部订阅
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Selected:', selectedId)
);
集成步骤
- 在
src/frontend/src/store/中创建 store - 从
src/frontend/src/store/index.ts导出 - 在
src/frontend/src/store/*.test.ts中添加测试
何时使用
当任务明确匹配概述中描述的工作流程或操作时,适用此技能。
限制
- 仅在任务明确匹配上述描述的范围时使用此技能。
- 不要将输出视为特定环境验证、测试或专家审查的替代品。
- 如果缺少所需的输入、权限、安全边界或成功标准,请停下来寻求澄清。
兼容工具
Claude CodeCursor
标签
前端开发