reactjs-flux - 如何在 Flux 中处理具有依赖关系的数据组合和检索？

Question

我试图找出使用 Flux 架构处理中型复杂应用程序中相当常见的情况的最佳方法是什么，当组成数据的模型之间存在依赖关系时如何从服务器检索数据。例如:

商店网络应用程序，具有以下模型:

• 购物车(用户可以拥有多个购物车)
• 供应商
• 产品

对于每个模型，都有一个关联的商店(CartsStore、VendorsStore、ProductsStore)。

假设有太多的产品和供应商，无法让它们始终加载，当我想显示购物车列表时，我的问题就出现了。

我有一个 React.js 组件的层次结构:

• 购物车列表.jsx
  • 购物车.jsx
    • CartItem.jsx

CartList 组件从商店检索所有数据并创建购物车组件列表，传递每个组件的特定依赖项。 (购物车、供应商、产品)

现在，如果我事先知道我需要哪些产品和供应商，我只需向服务器发起所有三个请求，并在需要时在商店中使用 waitFor 来同步数据。问题是，在我拿到购物车之前，我不知道需要向服务器请求哪些供应商或产品。

我当前的解决方案是在 CartList 组件中处理此问题，在 getState 中我从每个商店获取购物车、供应商和产品，并在 _onChange 上执行整个流程:

这目前有效，但有一些我不喜欢的事情:

1) 这个流程对我来说似乎有点脆弱，特别是因为该组件正在监听 3 个存储，但只有一个入口点来触发“数据事件中的某些内容发生了变化”，所以我无法区分什么完全改变了并且 react 正确。

2) 当组件触发某些嵌套依赖项时，它无法创建任何操作，因为在 _onChange 方法中，该方法被认为仍在处理先前的操作。 Flux 不喜欢这样，并触发“无法在调度中间调度。”，这意味着在整个过程完成之前我无法触发任何操作。

3)因为唯一的入口点对错误使用react非常棘手。

因此，我正在考虑的另一种解决方案是在 API 调用中使用“模型组合”逻辑，使用包含所需的所有 3 个模型的包装模型 (CartList)，并将其存储在 Store 上，仅当整个对象组装完毕时才会收到通知。问题是要对来自外部的子模型之一的变化使用react。

有人找到了处理数据组合情况的好方法吗？

Answer 1

不确定它在您的应用程序中是否可行，或者是否正确，但我有一个类似的场景，我们最终做了一个 Relay/GraphQL 的伪实现，它基本上为您提供了每个请求的整个树。如果有大量数据，可能会很困难，但我们只是在服务器端找出了依赖关系等，然后以良好的分层格式返回它，这样 React 组件就拥有了调用来源级别所需的一切。

就像我说的，根据细节，这可能不可行，但我们发现使用 SQL/Java 等可用的东西在服务器端整理这些依赖关系要容易得多，而不是像您提到的那样进行大量异步调用并扰乱商店。