Zustand Store TS

Zustand Store

Crie stores Zustand seguindo padrões estabelecidos com tipos TypeScript adequados e middleware.

Início Rápido

Copie o template de assets/template.ts e substitua os placeholders:

• {{StoreName}} → Nome da store em PascalCase (ex: 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) => ({
    // state and actions
  }))
);

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;

Use Seletores Individuais

// Bom - só faz re-render quando `items` muda
const items = useMyStore((state) => state.items);

// Evite - faz re-render em qualquer mudança de estado
const { items, isLoading } = useMyStore();

Se Inscreva Fora do React

useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);

Etapas de Integração

1. Crie a store em src/frontend/src/store/
2. Exporte a partir de src/frontend/src/store/index.ts
3. Adicione testes em src/frontend/src/store/*.test.ts

Quando Usar

Esta skill é aplicável para executar o workflow ou as ações descritas no resumo.