Maison
zustand-store-ts
microsoft/skills
Créez des stores Zustand avec TypeScript, le middleware subscribeWithSelector et une séparation appropriée de l'état et des actions pour la gestion d'état dans React.
...Développer toutMagasin Zustand
Créez des magasins Zustand en suivant les modèles établis avec des types TypeScript et des middlewares appropriés.
Démarrage rapide
Copiez le modèle depuis assets/template.ts et remplacez les espaces réservés :
{{StoreName}}→ Nom du magasin en PascalCase (par ex.Project){{description}}→ Brève description pour JSDoc
Toujours utiliser subscribeWithSelector
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<mystore>()(
subscribeWithSelector((set, get) => ({
// état et actions
}))
);
</mystore>Séparer l'état et les actions
export interface MyState {
items: Item[];
isLoading: boolean;
}
export interface MyActions {
addItem: (item: Item) => void;
loadItems: () => Promise<void>;
}
export type MyStore = MyState & MyActions;
</void>Utiliser des sélecteurs individuels
// Bien - ne redessine que lorsque `items` change
const items = useMyStore((state) => state.items);
// À éviter - redessine à chaque changement d'état
const { items, isLoading } = useMyStore();
Souscrire en dehors de React
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Sélectionné :', selectedId)
);
Étapes d'intégration
- Créer le magasin dans
src/frontend/src/store/ - Exporter depuis
src/frontend/src/store/index.ts - Ajouter des tests dans
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`
Tous les fichiers
0 fichiersInstaller zustand-store-ts
Téléchargez et extrayez les fichiers de compétences dans votre répertoire .claude/skills/.
Télécharger le ZIPClonez le dépôt et copiez les fichiers de compétence dans votre projet.
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
Copier
