zustand-store-ts
React 用の型安全な Zustand ストアを構築する
適切な TypeScript 型とミドルウェアを使用して React の状態を管理するのは複雑です。このスキルは、subscribeWithSelector と明確な状態/アクションの分離を備えた保守可能な Zustand ストアを作成するための実績のあるパターンを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「zustand-store-ts」を使用しています。 increment、decrement、reset アクションを含むカウンター store を作成する
期待される結果:
count 状態と 3 つのアクションメソッドを含む TypeScript ストアインターフェース。subscribeWithSelector ミドルウェアをストア定義にラップした create() 実装を含む。
「zustand-store-ts」を使用しています。 userId の変更のみをサブスクライブするにはどうすればよいですか？
期待される結果:
store.subscribe((state) => state.userId, (id) => console.log(id)) を使用すると、userId が変更された場合にのみコールバックを受信し、他の状態更新に対する不要な実行を回避できます。
セキュリティ監査
安全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 開発者
ユーザーセッション、テーマ、機能フラグなどのアプリケーション全体の状態を管理するための新しい Zustand ストアを、完全な TypeScript サポートで作成します。
状態パターンを標準化するチーム
適切な型付け、ミドルウェアの使用、サブスクリプションのベストプラクティスにより、コードベース全体で一貫したストアパターンを確立します。
Redux から Zustand への移行
TypeScript 型を維持し、再レンダリングを最適化しながら、既存の Redux ストアを軽量な Zustand ストアに変換します。
これらのプロンプトを試す
アイテムの配列と合計価格の計算を含むショッピングカートの Zustand ストアテンプレートを作成してください。TypeScript を使用し、subscribeWithSelector ミドルウェアを含めてください。
非同期の login アクションと logout アクションを含むユーザー store を生成してください。状態とアクションのための適切な TypeScript インターフェースを含め、ローディング状態とエラー状態も含めてください。
タスク、フィルター、計算されたセレクターを含むプロジェクト管理ストアを作成してください。不要な再レンダリングを防ぐために個別のセレクターを使用する方法を示してください。
ログ記録や分析のような外部システムとの統合のために、React コンポーネント外でストアの変更をサブスクライブする方法を示してください。
ベストプラクティス
- 粒度の細かいサブスクリプションのために、常に subscribeWithSelector ミドルウェアでストアをラップする
- 状態とアクションのために個別のインターフェースを定義し、それらを結合してストアイプとする
- コンポーネント内でセレクター関数を使用して、必要な状態スライスのみをサブスクライブする
回避
- コンポーネント内でストア全体を分割代入すると、任意の状態変更で再レンダリングが発生する
- TypeScript インターフェースなしでストアを作成すると、型安全の利点が失われる
- 1 つのプロパティだけが必要な場合に状態オブジェクト全体をサブスクライブすること