Дом
zustand-store-ts
microsoft/skills
Создавайте хранилища Zustand с TypeScript, middleware subscribeWithSelector и правильной разделением состояния и действий для управления состоянием в React.
...Расширить всеМагазин 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) => ({
// состояние и действия
}))
);
</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('Выбрано:', selectedId)
);
Шаги интеграции
- Создайте магазин в
src/frontend/src/store/ - Экспортируйте из
src/frontend/src/store/index.ts - Добавьте тесты в
src/frontend/src/store/*.test.ts
---
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
Копировать
