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

Question

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

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

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

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

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

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

• CartList.jsx
  • Cart.jsx
    • CartItem.jsx

CartList组件是从商店中检索所有数据并创建Cart组件列表的组件，它们为每个组件传递特定的依赖关系。 （推车，供应商，产品）

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

我目前的解决方案是在CartList组件中处理这个问题，在getState中我从每个商店获得Carts，Vendors和Products，在_onChange上我做了整个流程：

这暂时有效，但有一些我不喜欢的事情：

1）流程对我来说似乎有点脆弱，特别是因为该组件正在监听3个商店但是只有触发的入口点＆＃34;数据事件中的某些内容发生了变化＆＃34;所以我＆＃39 ;我无法区分确切的变化和反应。

2）当组件触发某些嵌套依赖项时，它无法创建任何操作，因为它位于_onChange方法中，该方法正在考虑仍在处理上一个操作。 Flux不喜欢这样，并触发一个＆＃34;无法在发送过程中发送。＆＃34;，这意味着在整个过程完成之前我无法触发任何操作。

3）因为唯一的入口点对错误做出反应非常棘手。

因此，我想到的另一种解决方案是使用＆＃34;模型组合＆＃34;调用API时的逻辑，有一个包装模型（CartList），它包含所需的所有3个模型，并将其存储在Store上，只有在组装整个对象时才会通知它。问题在于对来自外部的一个子模型的变化作出反应。

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

Answer 1

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

就像我说的那样，根据细节这可能不太可行，但是我们发现使用SQL / Java之类的东西来解决服务器端的这些依赖关系要容易得多，而不是像你提到的那样，进行大量的异步调用并搞乱了商店。