---

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)
);

集成步骤

1. 在 src/frontend/src/store/ 中创建 store
2. 从 src/frontend/src/store/index.ts 导出
3. 在 src/frontend/src/store/*.test.ts 中添加测试

何时使用

当任务明确匹配概述中描述的工作流程或操作时，适用此技能。

限制

• 仅在任务明确匹配上述描述的范围时使用此技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少所需的输入、权限、安全边界或成功标准，请停下来寻求澄清。