如何使用 Reflux 商店处理分层数据？

Posted 2023-02-22

【中文标题】如何使用 Reflux 商店处理分层数据？

【英文标题】：How to deal with hierarchical data with Reflux stores?

【发布时间】：2015-02-14 18:03:51

【问题描述】：

大纲

在我的应用程序中，我使用了React 和Reflux，并且对我的数据进行了分层设置。我正在尝试将我的应用程序的元素分解为单独的商店，以便能够正确挂钩事件并分离关注点。

我有以下数据流：

Workspaces -> Placeholders -> Elements

在这种情况下，创建工作区时，必须依次创建默认占位符，并使用对新创建的工作区的引用 (ID)。这同样适用于占位符与元素的关系。

症结

Reflux 方式似乎暗示 PlaceholderStore 监听来自 WorkspaceStore 的触发器，将新创建的 ID 添加到 this.trigger()。

Reflux 只允许从商店触发单个事件；从而防止外部组件能够辨别create 或update 动作。这意味着如果商店中的一个触发器发送 ID 为argument[0]，则后续触发器应该执行相同的操作（以保持一致）。对于寻找多个工作区的更新（例如重新排序/批量更新）的组件来说，这是一个问题。

不受欢迎的解决方案

我曾想过添加一个StoreActions 的概念；只有商店可以创建的操作，然后其他商店会监听（有效地从商店丢弃原始触发器）。有了这个组件/商店可以监听特定的事件，传递给所述事件的参数可以被定制而无需担心。这似乎是一种错误的做法，也是对 Reflux 事件系统的滥用。

帮助

我应该尝试分解相关数据吗？有没有更好的方法来构建数据？

我已阅读有关聚合存储的信息，但没有看到任何要剖析的实现。这些是否提供了一种解决方案，将来自多个商店的数据整合在一起，如果是，是什么负责创建 React 组件可以侦听的事件？

非常感谢任何人提供的任何帮助/见解！

【问题讨论】：

我是 Reflux 的新手。我发现创建多个stores 很糟糕。我更喜欢对多个stores（比如说CRUD）进行单个操作，然后我会为一个模块（假设@ 987654333@ 部分供用户使用），然后有一个用于该模块的主文件（用于所有组件或其route handler 或模板）将store handlers（或triggers）向下传递到组件到任何较小的子组件需要它。

Reflux 的新手。维护管理适当复杂模型的单个商店将更容易。这就是我目前在我的 React/Reflux 应用程序中的做法。但是，数据大小会增长，我可能需要按照您的尝试拆分数据并存储起来。我的观点是，您可能希望从更简单的结构开始，并仅根据需要（通过需要它的实际使用情况）对其进行改进。

【参考方案1】：

Yes, it is perfectly reasonable to call actions from a store。我将操作视为数据流的发起者，并将异常流视为单独的流。

一个很好的例子是一个 CRUD 存储，它也处理 AJAX 调用（在服务器端对数据进行 CRUD）。商店将在数据更新后立即触发更改事件。但是，如果 AJAX 调用失败，它应该改为为此启动数据流，以便其他商店和组件可以监听这些。在我看来，此类错误与 toast/notification 组件和 Analytics 错误日志记录有关，例如 GA Exceptions。

AJAX 示例也可以通过动作中的preEmit 钩子实现，上面有several examples among the github issues discussion。甚至还有这个"async actions" helper。

按照设计，商店只发出更改事件。如果您想发出其他类型的事件，这基本上意味着您正在开始新的数据流，您应该使用动作来代替。

【讨论】：

啊太棒了。所以我什么都不担心。谢谢。