aa71e76eb9
- Add date_added to all 950+ skills for complete tracking - Update version to 6.5.0 in package.json and README - Regenerate all indexes and catalog - Sync all generated files Features from merged PR #150: - Stars/Upvotes system for community-driven discovery - Auto-update mechanism via START_APP.bat - Interactive Prompt Builder - Date tracking badges - Smart auto-categorization All skills validated and indexed. Made-with: Cursor
75 lines
1.8 KiB
Markdown
75 lines
1.8 KiB
Markdown
---
|
|
name: zustand-store-ts
|
|
description: "Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation. Use when building React state management, creating global stores, or implementing reacti..."
|
|
risk: unknown
|
|
source: community
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# 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
|
|
|
|
```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`
|
|
|
|
## When to Use
|
|
This skill is applicable to execute the workflow or actions described in the overview.
|