首页

Skill

网页开发

zustand-store-ts

microsoft/skills

使用 TypeScript 创建 Zustand 存储，结合 subscribeWithSelector 中间件以及合理的状态/操作分离，以实现 React 状态管理。

...展开全部

更新时间 2026-09-13

# typescript # react # middleware # state management # zustand

Zustand 状态管理库

遵循既定模式创建 Zustand 状态存储，并正确配置 TypeScript 类型和中间件。

快速入门

从 assets/template.ts 复制模板并替换占位符：

{{StoreName}} → PascalCase 状态存储名称（例如，Project）
{{description}} → JSDoc 的简要描述

始终使用 subscribeWithSelector

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<mystore>()(
  subscribeWithSelector((set, get) => ({
    // state and actions
  }))
);
</mystore>

分离状态和操作

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

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

export type MyStore = MyState & MyActions;
</void>

使用独立选择器

// 良好 - 仅在 `items` 更改时重新渲染
const items = useMyStore((state) => state.items);

// 避免 - 任何状态更改时都会重新渲染
const { items, isLoading } = useMyStore();

在 React 外部订阅

useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);

集成步骤

在 src/frontend/src/store/ 中创建状态存储
从 src/frontend/src/store/index.ts 导出
在 src/frontend/src/store/*.test.ts 中添加测试

在 GitHub 上查看

---
name: zustand-store-ts
description: Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation for React state management.
license: MIT
---

# Zustand Store

Create Zustand stores following established patterns with proper TypeScript types and middleware.

## Quick Start

Copy the template from [assets/template.ts](assets/template.ts) and replace placeholders:
- `{{StoreName}}` → PascalCase store name (e.g., `Project`)
- `{{description}}` → Brief description for JSDoc

## Always Use subscribeWithSelector

```typescript
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<MyStore>()(
  subscribeWithSelector((set, get) => ({
    // state and actions
  }))
);
```

## Separate State and Actions

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

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

export type MyStore = MyState & MyActions;
```

## Use Individual Selectors

```typescript
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);

// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();
```

## Subscribe Outside React

```typescript
useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);
```

## Integration Steps

1. Create store in `src/frontend/src/store/`
2. Export from `src/frontend/src/store/index.ts`
3. Add tests in `src/frontend/src/store/*.test.ts`

所有文件

0 个文件

安装 zustand-store-ts

将技能文件下载并解压至你的 .claude/skills/ 目录。

下载ZIP

克隆仓库并复制技能文件到您的项目中。

git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/zustand-store-ts # Copy SKILL.md to your .claude/skills/ directory

复制

快速设置: 将技能文件夹复制到 .claude/skills/ 目录。Claude 将自动检测并使用该技能。

仓库 microsoft/skills