6

Facebook の Flux Architecture を使用して開発された Web アプリがあります。このページには 2 つのビューがあります。1 つは TODO アイテムのリストを表示します。2 番目のビューには、TODO アイテムのランダムなセットが表示されます。

店舗が管理する必要がある懸念事項が明らかに 2 つあります。1 つ目は、利用可能な TODO のリストです。2 つ目は、ランダムに選択された TODO アイテムのリストです。

したがってTODOStore、利用可能な TODO アイテムを管理することのみに関心を持っている がいます。loadTODOs、addTODO、deleteTODO、へのアクションがありeditTODOます。起動時に、このストアはすべての TODO アイテムをロードしません。必要な場合にのみデータベースから TODO 項目のリストを取得したい。

2店舗目はRandomTODOListStore. ランダムに選択された TODO アイテムを管理するのが役割です。を使用して、 をRandomTODOListStore介して TODO アイテムにアクセスする必要があるように思えます。TODOStoreTODOStore.getTODOItems()

function RandomTODOListStore() {
   var $randomTODOs = [];

   dispatcher.register(function(payload) {
        var action = payload.action;

        switch (action.actionType) {
            case Constants.LOAD_RANDOM_TODO:
                loadRandomTODO();
                break;
        }
    });

    function loadRandomTODO() {
        $randomTODOs = selectRandom(TODOStore.getTODOList());
        emit("change");
    }
}

これに関する問題は、前述のように、TODOStoreが起動時に TODO 項目をロードしないことです。

問題は、「が TODO 項目を既に取得したことをどのようにRandomTODOListStore保証するのか?」ということです。TODOStore.

4

3 に答える 3

2

これが、Flux アーキテクチャがここwaitForで言及されている方法でストアを同期する必要性に言及している理由だと思います

ストアを同期したい場合、RandomTODOListStore はおそらく次のようになります。

case Constants.LOAD_RANDOM_TODO:
  Dispatcher.waitFor([TodoStore.dispatcherIndex],this.loadRandomTODO);
  break;

次に、TodoStore で、Constants.LOAD_RANDOM_TODOまだロードされていない場合は、Todo のリストに反応してロードできます。

ただし、これは複雑すぎると思います。おそらく、ランダムな todo 用に別のストアを作成しないでください。このストアは、(私が推測するに) 常に実際の todo ストアに委任されます。TodoStore.getRandom()代わりに使用してください

編集：

はい、TodoStore はその使用方法を知る必要はありません。したがって、ランダムな todo を取得したい場合は、おそらく使用するのと同じイベントを使用して、Constants.LOAD_TODOSそのストアからランダムな todo を取得できます。TodoStore.getTodos()[randomIndex]

両方のコンポーネントが同時にイベントを発生させる場合は、2 番目のイベントを無視できます

別の解決策はRandomTODOListStore、読み込まれたイベントに反応し、メイン ストアのいくつかの todo を選択して RandomTODOListStore に配置することです。

case Constants.TODOS_LOADED:
  this.randomTodos = randomSubset(TodoStore.getTodos,subsetSize);
  break;

Fluxxorの Async の例からインスピレーションを得ることができます。非同期データの場合、発生するイベントは 1 つだけでなく、2 つ (コマンド + 成功/失敗) あります。

于 2014-07-21T11:43:58.090 に答える