Zustand Store

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

Início Rápido

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

• {{StoreName}} → Nome do 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

// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);

// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();

Assine Fora do React

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

Passos de Integração

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

Quando Usar

Esta habilidade é aplicável para executar o fluxo de trabalho ou ações descritas na visão geral.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se faltarem entradas necessárias, permissões, limites de segurança ou critérios de sucesso.