tanstack-store

TanStack Store

TanStack Store を扱う作業、特に @tanstack/react-store、フレームワーク非依存のストア、アトム、派生状態、または古い useStore の例からの移行に関わる場合に、このスキルを使用してください。

ワークフロー

1. コードを変更する前に、ローカルの状態の形を確認します。
   • @tanstack/store、@tanstack/react-store、フレームワークアダプター、React、テストユーティリティのパッケージバージョン。
   • ストアのライフタイム：モジュールシングルトン、コンテキストから提供されるバンドル、コンポーネントのライフタイムを持つストア、リクエストスコープの SSR 状態、またはローカルアトム。
   • 使用中の読み書き API：useSelector、非推奨の useStore、_useStore、useAtom、setState、アクションファクトリー、サブスクリプション、またはアトム。
   • 更新時の想定：不変オブジェクトの更新、派生計算、バッチ処理、永続化の副作用、セレクターによる再レンダリングの動作。
2. 動作やバージョンが重要な場合は、最新のドキュメントとパッケージの情報を確認します。source-map.md から始めてください。
3. インストール、パッケージ名、コアの createStore、Store、アクション、サブスクリプション、不変更新、バッチ処理については、setup-core.md を参照してください。
4. React の使用方法、useSelector、セレクターの compare、useAtom、useCreateStore、useCreateAtom、コンテキスト、useStore からの移行については、react-patterns.md を参照してください。
5. アトム、非同期アトム、派生ストア、以前の値、等価性、shallow、リアクティブグラフの動作については、atoms-derived-batching.md を参照してください。
6. SSR、テスト、ライフサイクル、永続化、フレームワークアダプター、開発ツールを使わないデバッグ、本番環境での確認については、production-testing.md を参照してください。

実装上の判断

• React では useSelector を優先してください。useStore は非推奨のエイリアス、_useStore はコードベースで意図的に採用されている場合を除き、移行期間中の API として扱ってください。
• ストアの更新は不変にしてください。setState は更新関数の戻り値でストアの値を置き換えるため、オブジェクトを更新する場合はスプレッド構文を使うか、次の状態全体を構築してください。
• React のレンダリングには、対象を絞ったセレクターを使用してください。ストア全体を選択すると、コンポーネントはあらゆる変更に依存することになります。
• compare または shallow は、セレクターが複合値を返し、その結果が不必要に変わる場合にのみ追加してください。まずは安定したプリミティブ値の選択を優先してください。
• 複数のストアまたはアトムの更新を、最終状態で一度だけサブスクライバーに通知する場合は、batch を使用してください。
• ストアがドメイン操作を担う場合は、アクションファクトリーを使用してください。UI コンポーネントで同じ更新ロジックを繰り返し実装しないようにしてください。
• 状態が真にグローバルかつ公開されている場合を除き、SSR ではユーザーやセッションのストアをモジュールスコープに置かないでください。ユーザーごとのデータには、リクエストスコープまたはコンポーネントスコープのストアを作成してください。
• 永続化やログ記録などの副作用には subscribe を使用し、必ず unsubscribe によるクリーンアップを行ってください。0.11.2 以降、サブスクライバー内で他のストアを読み取っても追跡されません。副作用のトリガーとなるすべてのソースを購読してください。
• アダプターの詳細に依存する前に、最新のドキュメントを確認してください。Store は引き続きアルファ版／v0 であり、アダプターの API もまだ進化しています。

検証

リポジトリに既存のチェックがあれば、それを優先してください。TanStack Store に関する重要な変更では、以下から該当するものを実施してください。

• ストアの状態、アクションファクトリー、セレクター、アトムの値、コンテキストバンドルの型チェック。
• setState、アクションメソッド、派生ストア、アトム、非同期アトム、バッチ処理、サブスクリプションのクリーンアップに関する単体テスト。
• セレクターによる再レンダリングの境界、compare、useAtom のセッター、コンテキストエラー、非推奨 API からの移行に関するコンポーネントテスト。
• ストアのライフタイム、モジュールスコープ、コンテキストプロバイダー、またはサーバーで作成された初期状態を変更する場合の SSR／リクエストテスト。
• 派生状態、楽観的なローカル状態、永続化、コンポーネント間のサブスクリプションに依存する UI フローのブラウザーでのスモークテスト。