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

Question

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

一个商店网络应用程序，具有以下模型：

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

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

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

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

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

CartList 组件是从 Store 中检索所有数据并创建 Cart 组件列表的组件，该列表传递每个组件的特定依赖项。 （购物车、供应商、产品）

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

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

这暂时可行，但有一些我不喜欢的地方：

1) 流程对我来说似乎有点脆弱，特别是因为组件正在监听 3 个存储，但只有一个入口点可以触发“数据事件发生了变化”，所以我无法区分是什么确实发生了变化并做出了正确的反应。

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

3) 因为唯一的入口点对错误做出反应是相当棘手的。

因此，我正在考虑的另一种解决方案是在对 API 的调用中使用“模型组合”逻辑，使用包含所有 3 个所需模型的包装模型 (CartList)，并将其存储在商店中，只有在组装整个对象时才会通知。这样做的问题是对来自外部的子模型之一的变化做出反应。

有没有人想出一种处理数据组合情况的好方法？

Answer 1

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

就像我说的，这取决于细节，这可能不可行，但我们发现使用 SQL/Java 等可用的东西在服务器端整理这些依赖项要容易得多，而不是像你提到的那样进行大量异步调用和商店打交道。