异步操作的流量存储依赖关系

Flux store dependency with async actions

本文关键字：依赖 关系 存储 流量 异步操作      更新时间：2023-09-26

我在理解使用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变量之前发生更改。

使用通量模式是如何处理的？Dispatcher对此有帮助吗？抱歉，我是通量模式的新手。直觉上，我只需按照适当的顺序调用异步操作，例如：

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

但我想知道是否还有一种更为Flux的方式来做到这一点。

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

  • 用户存储有旧数据/没有数据，颜色存储已经有最新数据
  • 用户存储有最新的用户数据，颜色存储仍有旧数据

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

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

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

对于第二种解决方案，您通常可以执行以下操作：

  • 你有两个动作都开火吗
  • 两个监听器触发相同的函数getStateFromStores()
  • 该函数从两个存储中获取状态，并且只有在用户和颜色匹配时才更新组件（setState()）

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

如果我正确理解您的问题，您可以在这种情况下使用waitFor。还有关于"waitFor vs将商店合并为一个"的讨论，所以合并商店也可以解决你的问题。

相关文章：