首頁

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