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.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「zustand-store-ts」を使用しています。 Create a counter store with increment, decrement, and reset actions
期待される結果:
A TypeScript store interface with count state and three action methods, plus the create() implementation with subscribeWithSelector middleware wrapped around the store definition.
「zustand-store-ts」を使用しています。 How do I subscribe to only the userId change?
期待される結果:
Use store.subscribe((state) => state.userId, (id) => console.log(id)) to receive callbacks only when userId changes, avoiding unnecessary executions for other state updates.
セキュリティ監査
安全Static 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.
品質スコア
作れるもの
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.
これらのプロンプトを試す
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.
ベストプラクティス
- 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
回避
- 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