zustand-store-ts

# 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` ## Diff History - **v00.33.0**: Ingested from skills-main --- ## Why This Skill Exists 'Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. <!-- SR_40: auto-generated from frontmatter `purpose`/`description` (OPP-Phase3). Expand with domain-specific rationale. --> ## When to Use Use this skill when the task requires zustand store ts capabilities. <!-- SR_40: auto-generated from frontmatter `when`/`description` (OPP-Phase3). --> ## What If Fails - condition: Código não disponível para análise <!-- SR_40: auto-generated from frontmatter `what_if_fails` (OPP-Phase3). -->