Zustand Store

Create Zustand stores following established patterns with proper TypeScript types and middleware.

Quick Start

Copy the template from assets/template.ts and replace placeholders:

• {{StoreName}} → PascalCase store name (e.g., Project )

• {{description}} → Brief description for JSDoc

Always Use subscribeWithSelector

import { create } from 'zustand'; import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<MyStore>()( subscribeWithSelector((set, get) => ({ // state and actions })) );

Separate State and Actions

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

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

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

Integration Steps

• Create store in src/frontend/src/store/

• Export from src/frontend/src/store/index.ts

• Add tests in src/frontend/src/store/*.test.ts