在React/Flux中管理商店数据依赖性

Question

我有一个使用Facebook的Flux架构开发的网络应用程序.该页面有两个视图:一个显示TODO项目列表.第二个视图显示一组随机的TODO项目.

显然,商店需要管理两个问题.第一个是可用的TODO列表.第二个是随机选择的TODO项目列表.

因此TODOStore,我有一个,他唯一关心的是管理可用的TODO项目.它有行动loadTODOs,addTODO,deleteTODO,editTODO.在启动时,此商店不会加载所有TODO项目.我希望它仅在必要时从数据库中检索TODO项目列表.

第二家商店是RandomTODOListStore.它的职责是管理随机选择的TODO项目.在我看来RandomTODOListStore应该通过TODOStore使用来访问TODO项目TODOStore.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项目.

问题是:"如何RandomTODOListStore保证TODOStore已经检索到TODO项目？" .

Answer 1

我认为这就是为什么 Flux 架构提到需要使用这里waitFor提到的方法来同步存储

如果您想同步您的商店，您的 RandomTODOListStore 可能应该如下所示：

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

然后，在您的 TodoStore 上，您可以对Constants.LOAD_RANDOM_TODO尚未加载的待办事项列表做出反应并加载它们。

然而，我认为这过于复杂，您可能不应该为随机待办事项创建另一个商店，因为该商店（我猜）总是委托给真正的待办事项商店。只需使用TodoStore.getRandom()即可

编辑：

是的，TodoStore 不需要知道它是如何使用的。因此，当您想要获得随机待办事项时，您可能可以使用您使用的相同事件，例如Constants.LOAD_TODOS，然后从该商店获取随机待办事项TodoStore.getTodos()[randomIndex]

如果两个组件同时触发事件，您可以忽略第二个事件

另一个解决方案是对加载的事件做出RandomTODOListStore反应并选择主存储的一些待办事项将它们放入 RandomTODOListStore 中：

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

您可以从Fluxxor 的异步示例中获得启发：对于异步数据，不仅会触发一个事件，还会触发 2 个事件（命令 + 成功/失败）