フロントエンド状態管理
プロセス
- 各値を分類します：永続的なサーバーデータ、共有可能なURL/ナビゲーション状態、フォームドラフト、一時的な表示状態。信頼できる単一の所有者を選択します。
- インストール済みの状態管理・データフェッチツールを再利用します。ローカル状態はそのコンシューマの近くに配置し、具体的な調整ニーズがある場合にのみ共有状態を導入します。
- すべてのクエリ次元と認可次元でサーバーキャッシュをキー設定します。ログアウト、テナント切り替え、ID変更時にそれをクリアまたは分離します。
- ローディング、空、エラー、成功の各状態を明示的にモデル化します。同時リクエストの場合、キャンセルは作業を減らすことができますが、古い応答が新しい意図を上書きできないように結果の受け入れをガードする必要もあります。
- 楽観的更新の場合、サーバーと調整し、失敗時の振る舞いを定義します。ロールバックは新しい成功した更新を消去してはいけません。操作を追跡するか、ライブラリがサポートする並行性パターンを使用します。
- 戻る/進むナビゲーション、再試行、迅速な入力変更、失敗した更新、アカウント切り替えを検証します。
例
Aを検索した後、Bを検索すると、Bが先に返され、Aが後で返されます。表示される結果はBのままであり、URLは応答の完了順ではなく、現在の検索を反映します。
停止条件
ローカルな競合を解決するために状態ライブラリを置き換えないでください。同じサーバー値を独立したグローバルストアに重複させることは、同期の義務を生み出します。
エビデンス
- 状態の所有権マップとキャッシュキー。
- 競合/ロールバック/セッション遷移のチェック。
- 可視的なローディングと復旧動作。
参考
react-state-management をレビューした後に独自に作成されたワークフロー。