Question

我在使用Flux模式了解什么是最好的方法时遇到了问题。比方说我有一个userStore，我会听。更改后，我需要获取user.name并访问colors[user.name] - 但colors对象来自我拥有的另一个colorsStore商店。这是它的本质：

var self = {};
userStore.addListener(function(user) {
  // dependency with the colors store
  var color = self.colors[user.name]
})
colorsStore.addListener(function(colors) {
  self.colors = colors;
})

actions.getUser() // modifies userStore
actions.getColors() // modifies colorsStore

问题是这两个动作是异步的（例如，他们从AJAX调用中获取数据）。考虑到这一点，userStore可能会在从另一个商店填充self.colors变量之前发生变化。

如何使用Flux模式处理？ Dispatcher对此有所帮助吗？对不起，但我是Flux模式的新手。直观地说，我只需按照适当的顺序调用异步操作，例如：

actions.getColors() // need to populate self.colors before running getUser()
  .then(actions.getUser())

但是想知道是否有更多的Flux方式这样做。

Answer 1

从光通量角度来看，您的设置很好。您的组件需要能够处理由您的操作生成的不同可能（存储）状态，其中可能包括：

用户商店有旧/无数据，颜色商店已有最新数据
用户商店拥有最新的用户数据，颜色商店仍有旧数据

如果您希望用户以某种方式看到这些状态中的任何一种（例如显示加载指示器，在等待最新颜色时显示旧颜色/默认颜色），那么react-flux方式是处理这些状态在你的组件内部。

如果您不想向用户显示有关这些状态的任何信息，您有两种选择：

在组件内部，从colorStore侦听器函数内部触发actions.getUser()（快速而肮脏的解决方案）
更改设置以防止不需要的存储状态触发组件更新

对于第二种解决方案，您通常可以这样做：

让你组成两个动作
两个侦听器都会触发相同的函数getStateFromStores()
此函数从两个商店中获取状态，并且仅在用户和颜色匹配时才更新组件（setState()

这样，您的异步调用可以按任何顺序返回。

Answer 2

如果我正确理解您的问题，您可以在这种情况下使用waitFor。还有关于"waitFor vs combining stores into one"的讨论，因此组合商店也可以解决您的问题。

Flux存储与异步操作的依赖关系

2 个答案: