# Zustand Store TS

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

- Skill: `artubss/zustand-store-ts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add artubss/zustand-store-ts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/artubss/zustand-store-ts/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: artubss (https://skillmd.com/u/artubss)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/artubss/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

```typescript
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

```typescript
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

```typescript
// 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

```typescript
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.