Zustand Store Ts

1---
2name: zustand-store-ts
3description: Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.
4---
5 
6# Zustand Store
7 
8Create Zustand stores following established patterns with proper TypeScript types and middleware.
9 
10## Quick Start
11 
12Copy the template from [assets/template.ts](assets/template.ts) and replace placeholders:
13- `{{StoreName}}` → PascalCase store name (e.g., `Project`)
14- `{{description}}` → Brief description for JSDoc
15 
16## Always Use subscribeWithSelector
17 
18```typescript
19import { create } from 'zustand';
20import { subscribeWithSelector } from 'zustand/middleware';
21 
22export const useMyStore = create<MyStore>()(
23  subscribeWithSelector((set, get) => ({
24    // state and actions
25  }))
26);
27```
28 
29## Separate State and Actions
30 
31```typescript
32export interface MyState {
33  items: Item[];
34  isLoading: boolean;
35}
36 
37export interface MyActions {
38  addItem: (item: Item) => void;
39  loadItems: () => Promise<void>;
40}
41 
42export type MyStore = MyState & MyActions;
43```
44 
45## Use Individual Selectors
46 
47```typescript
48// Good - only re-renders when `items` changes
49const items = useMyStore((state) => state.items);
50 
51// Avoid - re-renders on any state change
52const { items, isLoading } = useMyStore();
53```
54 
55## Subscribe Outside React
56 
57```typescript
58useMyStore.subscribe(
59  (state) => state.selectedId,
60  (selectedId) => console.log('Selected:', selectedId)
61);
62```
63 
64## Integration Steps
65 
661. Create store in `src/frontend/src/store/`
672. Export from `src/frontend/src/store/index.ts`
683. Add tests in `src/frontend/src/store/*.test.ts`
69