Hogar
zustand-store-ts
microsoft/skills
Crea tiendas de Zustand con TypeScript, middleware subscribeWithSelector y una separación adecuada del estado y las acciones para la gestión del estado en React.
...Expandir todoAlmacén de Zustand
Crea almacenes de Zustand siguiendo patrones establecidos con tipos de TypeScript adecuados y middleware.
Inicio Rápido
Copia la plantilla desde assets/template.ts y reemplaza los marcadores de posición:
{{StoreName}}→ Nombre de la tienda en PascalCase (por ejemplo,Project){{description}}→ Descripción breve para JSDoc
Usa siempre subscribeWithSelector
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
export const useMyStore = create<mystore>()(
subscribeWithSelector((set, get) => ({
// estado y acciones
}))
);
</mystore>Separa el Estado y las Acciones
export interface MyState {
items: Item[];
isLoading: boolean;
}
export interface MyActions {
addItem: (item: Item) => void;
loadItems: () => Promise<void>;
}
export type MyStore = MyState & MyActions;
</void>Usa Selectores Individuales
// Correcto - solo se vuelve a renderizar cuando `items` cambia
const items = useMyStore((state) => state.items);
// Evitar - se vuelve a renderizar ante cualquier cambio de estado
const { items, isLoading } = useMyStore();
Suscribirse Fuera de React
useMyStore.subscribe(
(state) => state.selectedId,
(selectedId) => console.log('Seleccionado:', selectedId)
);
Pasos de Integración
- Crea la tienda en
src/frontend/src/store/ - Exporta desde
src/frontend/src/store/index.ts - Añade pruebas en
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 los archivos
0 archivosInstalar zustand-store-ts
Descarga y extrae los archivos de habilidades en tu directorio .claude/skills/.
Descargar ZIPClona el repositorio y copia los archivos de la habilidad a tu proyecto.
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
