4

React+Flux+async API requestsパターンの経験がある人からの意見が必要です。次の状況でAPI応答をキャッシュするより良い方法は何ですか:

  • データを取得するための API エンドポイントに対応する記事の 3 つのリスト ページがあります。

  • 各記事には詳細ページの UI がありますが、articleById エンドポイントがないため.find、取得した配列の ID ごとに記事が必要です。

  • リストに対して1 つのリクエストのみを作成してキャッシュしたいので、リストから詳細ページに移動したり、リストに戻ったりすると、API リクエストは発生しません。

  • 別のリストに切り替えるときは、リクエストを作成してキャッシュする必要があります。

実際のリクエストを行う WebAPIUtils サービスでレスポンスをキャッシュする必要があるのでしょうか?

それとも、API リクエストを開始するアクションを起動する必要があるかどうかを知るために、コンテナー コンポーネント (3 つのリストすべてで同じ) をハックする方がよいでしょうか?

ありがとう！

4

1 に答える 1

3

ストアの使用

次のアクションを処理するリストをキャッシュする ListStore が必要です。 LIST_CACHE : このアクションは、リストをリスト キャッシュにプッシュします。

List コンポーネントで、ListStore から更新を受け取ったら、表示することになっている List を見つけて、それをその状態に設定してみてください。

リストが存在しない場合は、ListStore が変更イベントを発行するのを待ってから、ListStoreChangedハンドラーでリストを再度検索します。

ここで、リスト キャッシュの API リクエストをいつ行うかを決定する必要があります。考えられるオプションの 1 つは、アプリの読み込み時にすべてのリストの API リクエストを作成し、受信したすべてのリストを LIST_CACHE アクションにディスパッチすることです。

まだお読みでない場合は、こちらをお読みください: http://facebook.github.io/flux/docs/overview.html

于 2015-03-03T12:52:28.707 に答える