0

Flux に基づいた同型アプリケーションを考え、Fluxible ライブラリを使用してそれを実行します。React メール アプリケーションがあり、左側にメッセージのリストがあり、右側に現在開いているメッセージがあります。

ルーターは、URL「/message/123」で呼び出されると「SHOW_POST」アクションをトリガーし、アクションはデータをロードしてストアを更新し、メッセージが右側に表示されます。これはすべて機能し、ナビゲーションの約束が解決され、ページがレンダリングされます。

ただし、ページは左側にメッセージのリストなしで表示されます。SHOW_POST 中に「LOAD_ALL_MESSAGES」へのアクションが呼び出された場合、それらは実際にはサーバーでレンダリングされず、サーバーは空のリストを返し、AJAX を介してクライアントにロードされます。

他のコンポーネントが必要とするページに他のストアを設定する方法。アクションを必要とするコンポーネントがレンダリングされたときにアクションを呼び出してそれらを設定しようとしましたが、これは汚れているようで、コンポーネントがサーバー側でレンダリングされないという問題を解決しません。

すべてのナビゲーション アクションでストアを設定するために追加のアクションをトリガーする必要があるのも同様に不潔に思えます。ストアが必要ない可能性があるためです。ほぼすべてのさまざまなナビゲーション アクションからこれらの設定アクションを呼び出す必要があるため、コードは繰り返しになります。

サーバー側のレンダリング中にバックグラウンド ストアを設定するために推奨されるアーキテクチャは何ですか。各ナビゲーション内から複数のアクションをトリガーし、それらすべてが解決されるのを待ちますか?

4

1 に答える 1

0

これは私が従うアプローチです、

  1. そのactionようなルートのメソッド (複数のストアからのデータを必要とする) は次のようになります。

    アクション: 関数 (コンテキスト、ペイロード、完了) {
  var getXData = 新しい Promise(関数(解決){
    context.executeAction(getXDataAction, {}, resolve);
  });
  var getYData = new Promise(関数(解決){
    context.executeAction(getYDataAction, {}, resolve);
  });
  Promise.all([getXData, getYData]).then(function() { done() });
}

  2. これらのアクションの中で、データが外部にフェッチされないように、関連するストアにデータが既に存在するかどうかを確認します。

または、別のロジックを作成action creatorして、ロジックをルートからアクション クリエーターに移動することもできます。ルートをスリムに保つ以外に、本当のメリットはありません。

于 2016-01-13T15:40:35.563 に答える