Lar
zustand-store-ts
microsoft/skills
Crie stores do Zustand com TypeScript, middleware subscribeWithSelector e separação adequada de estado/ação para gerenciamento de estado no React.
...Expandir tudoLoja Zustand
Crie lojas Zustand seguindo padrões estabelecidos com tipos TypeScript e middlewares adequados.
Início Rápido
Copie o modelo de assets/template.ts e substitua os espaços reservados:
{{StoreName}}→ Nome da loja em PascalCase (por exemplo,Project){{description}}→ Breve descrição para JSDoc
Sempre Use subscribeWithSelector
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<mystore>()(
subscribeWithSelector((set, get) => ({
// estado e ações
}))
);
</mystore>Separe Estado e Ações
export interface MyState {
items: Item[];
isLoading: boolean;
}
export interface MyActions {
addItem: (item: Item) => void;
loadItems: () => Promise<void>;
}
export type MyStore = MyState & MyActions;
</void>Use Seletores Individuais
// Bom - apenas re-renderiza quando `items` muda
const items = useMyStore((state) => state.items);
// Evite - re-renderiza em qualquer mudança de estado
const { items, isLoading } = useMyStore();
Inscreva-se Fora do React
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Selecionado:', selectedId)
);
Etapas de Integração
- Crie a loja em
src/frontend/src/store/ - Exporte de
src/frontend/src/store/index.ts - Adicione testes em
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`
Todos os arquivos
0 arquivosInstalar zustand-store-ts
Baixe e extraia os arquivos de habilidade para o diretório .claude/skills/.
Baixar ZIPClone o repositório e copie os arquivos da habilidade para o seu projeto.
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
Copiar
