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

Posted 2023-02-22

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

【英文标题】：How to handle data composition and retrieval with dependencies in Flux?

【发布时间】：2015-06-16 07:37:52

【问题描述】：

我试图弄清楚在使用 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)，并将其存储在商店中，只有在组装整个对象时才会通知。这样做的问题是对来自外部的子模型之一的变化做出反应。

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

【参考方案1】：

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

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

【讨论】：

我同意，但我的问题是我无法控制服务 API，它只处理基本模型。我最终在 API 中进行了组合，现在效果很好。只需要小心更新以仅在需要时触发依赖项重新加载

实施一项鲜为人知的技术，Relay/GraphQL 是 Facebook 的流行语，并不能解决任何人的问题。

对不起，但我有点不同意@Rollo 虽然没有任何实现细节，但 Relay/GraphQL 在概念上定义得很好。也许我引用它们不是一个好选择，但允许层次结构中的最低级别组件查询代表该级别的应用程序所需的整个数据树的想法对我来说似乎是一个非常合理的解决方案。跨度>

好吧，如果它对您有所帮助，那么所有的力量都归您所有。但是如果你有一个扁平的 API，我认为最好封装组件来执行它们自己的操作来检索数据，它与已经存在的东西一起工作得更好。 Relay/GraphQL 不是一个容易实现的模式。

完全不用担心，这是一次很有价值的讨论，所以我很高兴你把我们的注意力重新吸引到它上面......绝对仍然是一个有趣的问题，我同意不要赶上潮流很重要在它离开车站之前（关于 GraphQL/Relay ）：P。干杯！