react-state-management
Reactの状態管理を実装する
Reactコンポーネント間で状態を管理すると、コードが複雑になりデータの一貫性が損なわれることがあります。このスキルは、Redux Toolkit、Zustand、Jotai、React Queryの包括的なパターンを提供し、ローカル・グローバル・サーバー状態を効率的に扱えるようにします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-state-management」を使用しています。 What state management library should I use for a small app with simple global state needs?
期待される結果:
小規模アプリでシンプルなグローバル状態が必要な場合は、ZustandまたはJotaiが優れた選択肢です。
**Zustand** は最小限のボイラープレートで最もシンプルなAPIを提供します:
- 単一のフック風関数でストアを作成
- devtoolsと永続化ミドルウェアを内蔵
- Provider不要
- 選択的サブスクリプションで不要な再レンダーを防止
**Jotai** はアトミックで粒度の細かい更新に優れています:
- 各状態は独立したアトム
- 派生アトムが他のアトムから自動的に計算
- 細かなリアクティビティに最適
統一ストアモデルが好みならZustandを選びましょう。グローバルストアのラッパーなしでアトミック更新を望むならJotaiが適しています。
「react-state-management」を使用しています。 How do I handle server state with React Query vs client state with Redux Toolkit?
期待される結果:
明確さと保守性のために、サーバー状態とクライアント状態を分離しましょう:
**React Queryがサーバー状態を担当:**
- サーバーデータ、キャッシュ、同期
- 自動再フェッチとバックグラウンド更新
- stale-while-revalidateのキャッシュ戦略
- ロールバック付きの楽観的ミューテーション
**Redux Toolkitがクライアント状態を担当:**
- UI状態（モーダル、サイドバーの開閉）
- 認証状態（Cookie以外の場合）
- アプリの設定やプリファレンス
- 複雑なクライアント側の派生状態
この分離により関心の混在を防ぎ、各ツールの目的が明確になるためデバッグもしやすくなります。
セキュリティ監査
安全All 44 static findings are false positives. The scanner incorrectly flagged markdown code blocks as shell commands, standard documentation URLs as hardcoded secrets, and React/Redux patterns (state, slices, selectors) as cryptographic or reconnaissance patterns. This is legitimate documentation for React state management libraries.
品質スコア
作れるもの
新規プロジェクトにおける状態ソリューションの選定
新しいReactアプリケーションを開始する開発チームが、アプリの規模と要件に基づいて適切な状態管理アプローチを選ぶ必要があります。
サーバーデータのキャッシュ実装
フロントエンド開発者が、ReactアプリケーションのAPIデータに対してキャッシュ、バックグラウンド再フェッチ、楽観的更新を追加したいと考えています。
レガシーReduxのモダンパターンへの移行
開発者が冗長なReduxのボイラープレートコードを、Immerによるイミュータブル更新を使ったRedux Toolkitに更新する必要があります。
これらのプロンプトを試す
ReactアプリでTypeScriptと一緒にRedux Toolkitをセットアップするにはどうすればよいですか？slicesとtyped useDispatch/useSelectorフックを使ってストアを作成する方法を示してください。
devtoolsサポート付きでlocalStorageに永続化するZustandストアの作成方法を教えてください。コンポーネントでストアにアクセスする方法と、型付きの状態更新の扱い方も含めてください。
楽観的更新を行うReact Queryのmutationを書いてください。以前の状態をスナップショットするonMutate、ロールバックのためのonError、再フェッチのためのonSettledを含めてください。
同じアプリケーション内で、サーバー状態にはReact Query、クライアント専用状態にはZustandを組み合わせるにはどうすればよいですか？関心の分離と、コンポーネントが両方を消費する方法を示してください。
ベストプラクティス
- 状態は可能な限り使用箇所の近くに配置する - すべてをグローバル状態に入れない
- セレクタで必要なデータだけをストアから取得し、不要なコンポーネント再レンダーを防ぐ
- サーバー状態（React Query）とクライアント状態（Zustand/Redux）を分離する - それぞれ更新パターンとライフタイムが異なる
回避
- 複数コンポーネントで参照されるという理由だけで、すべての状態をグローバルに置く - ローカル状態で十分なことが多い
- イミュータブル更新パターンやImmerのようなライブラリを使わずに状態を直接変更する
- React Queryとクライアントストアの両方にサーバー状態を重複させる - サーバーデータはReact Queryを単一の真実のソースにする