使用 AI 构建类型安全的 Zustand 状态管理 Store

通过为 AI 设定标准的模式模板，让其自动生成高性能、类型安全且易于维护的 Zustand Store，避免因状态定义混乱导致的组件过度渲染。

为什么需要这个技能

在 React 项目中，状态管理如果缺乏规范，容易出现两个问题：一是 TypeScript 类型定义不全，导致在组件中使用时缺乏代码补全或出现类型错误；二是状态与更新函数（Actions）混在一起，导致 Store 结构臃肿。

本技能通过强制 AI 执行“状态与动作分离”以及“选择器（Selector）优化”等模式，确保生成的 Store 具备高性能的渲染机制，并能通过 subscribeWithSelector 中间件在 React 组件之外高效监听状态变化。

适用场景

在 TypeScript 项目中快速搭建全局状态管理模块。
需要将复杂的业务状态（State）与操作逻辑（Actions）解耦。
需要在非 React 环境（如 API 请求拦截器、定时任务）中监听状态变更。
优化 React 组件性能，防止因 Store 整体更新导致的无效重新渲染。

核心工作流

定义类型接口：AI 将分别定义 MyState（纯数据）和 MyActions（更新函数），最后通过交叉类型 MyState & MyActions 组合成 MyStore。
集成中间件：强制使用 subscribeWithSelector 包装 Store，以支持更精细的状态订阅。

实现状态分离：

export interface MyState {
  items: Item[];
  isLoading: boolean;
}

export interface MyActions {
  addItem: (item: Item) => void;
  loadItems: () => Promise<void>;
}

export type MyStore = MyState & MyActions;

应用性能优化：AI 会在生成使用示例时，引导开发者使用独立选择器而非解构整个 Store：
```
// 正确：仅在 items 变化时重新渲染
const items = useMyStore((state) => state.items);
```
规范化部署：按照 src/frontend/src/store/ 目录结构创建文件，并统一在 index.ts 中导出。

下载和安装

下载 zustand-store-ts 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐

使用 AI 构建类型安全的 Zustand 状态管理 Store #

为什么需要这个技能 #

适用场景 #

核心工作流 #