zustand-store-ts
Build Type-Safe Zustand Stores for React
Managing React state with proper TypeScript types and middleware is complex. This skill provides proven patterns for creating maintainable Zustand stores with subscribeWithSelector and clear state/action separation.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "zustand-store-ts". Create a counter store with increment, decrement, and reset actions
Erwartetes Ergebnis:
A TypeScript store interface with count state and three action methods, plus the create() implementation with subscribeWithSelector middleware wrapped around the store definition.
Verwendung von "zustand-store-ts". How do I subscribe to only the userId change?
Erwartetes Ergebnis:
Use store.subscribe((state) => state.userId, (id) => console.log(id)) to receive callbacks only when userId changes, avoiding unnecessary executions for other state updates.
Sicherheitsaudit
SicherStatic analysis flagged 19 patterns (14 external_commands, 5 blocker/crypto), but all are false positives. The backticks detected are markdown code fence delimiters for TypeScript examples, not shell execution. The cryptographic warnings reference 'subscribeWithSelector' text patterns, not actual crypto algorithms. This is a documentation-only skill with code examples for Zustand state management.
Qualitätsbewertung
Was du bauen kannst
React Developer Building Global State
Create a new Zustand store for managing application-wide state like user sessions, themes, or feature flags with full TypeScript support.
Team Standardizing State Patterns
Establish consistent store patterns across a codebase with proper typing, middleware usage, and subscription best practices.
Migrating from Redux to Zustand
Convert existing Redux stores to lightweight Zustand stores while maintaining TypeScript types and optimizing re-renders.
Probiere diese Prompts
Create a Zustand store template for a shopping cart with items array and total price calculation. Use TypeScript and include the subscribeWithSelector middleware.
Generate a user store with async login and logout actions. Include proper TypeScript interfaces for state and actions, with loading and error states.
Create a project management store with tasks, filters, and computed selectors. Show how to use individual selectors to prevent unnecessary re-renders.
Show how to subscribe to store changes outside React components for logging or integration with external systems like analytics.
Bewährte Verfahren
- Always wrap stores with subscribeWithSelector middleware for granular subscriptions
- Define separate interfaces for state and actions, then combine them for the store type
- Use selector functions in components to subscribe only to needed state slices
Vermeiden
- Destructuring the entire store in components causes re-renders on any state change
- Creating stores without TypeScript interfaces loses type safety benefits
- Subscribing to the entire state object when only one property is needed