具有异步操作的 Flux 存储依赖性

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

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

用户存储有 old/no 数据，颜色存储已有最新数据
user store 有最新的用户数据，colors store 仍然有旧数据

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

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

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

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

你的组件是否触发了这两个动作
两个监听器触发相同的函数getStateFromStores()
此函数从两个存储中获取状态，并且仅在用户和颜色匹配时才更新组件 (setState())

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

Answer 2

如果我对你的问题理解正确，你可以使用waitFor for this case. Also there's the discussion about "waitFor vs combining stores into one"，所以组合商店也可以解决你的问题。

具有异步操作的 Flux 存储依赖性

Flux store dependency with async actions

javascript

flux

reactjs