为啥要在 Flux 中使用 Actions？

Posted 2023-02-22

【中文标题】为啥要在 Flux 中使用 Actions？

【英文标题】：Why should I use Actions in Flux?为什么要在 Flux 中使用 Actions？

【发布时间】：2015-01-27 05:49:08

【问题描述】：

我开发的一个应用程序最初是使用 Flux 构建的。

但是，随着时间的推移，应用程序变得越来越难以维护。有非常大量的操作。而且通常一个动作只在一个地方听（商店）。

Actions 使得不用将所有事件处理程序代码都写在一个地方成为可能。所以不要这样：

store.handleMyAction('ha')
another.handleMyAction('ha')
yetAnotherStore.handleMyAction('ha')

我会写：

actions.myAction('ha')

但是我从不那样使用动作。我几乎可以肯定，这不是我的应用程序的问题。

每次调用操作时，我都可以调用 store.onSmthHappen 而不是 action.smthHappen。

当然也有例外，当一个动作在多个地方处理时。但是当这种情况发生时，感觉就像出了什么问题。

如果我直接从商店调用方法而不是调用操作，那会怎样？我的应用程序不会那么灵活吗？不！仅发生 rename（极少数例外）。但是要付出什么代价！使用所有这些操作来理解应用程序中发生的事情变得更加困难。每次，在跟踪复杂动作的处理时，我都必须找到在处理它们的商店中。然后在这些商店中，我应该找到调用另一个动作的逻辑。等等。

现在我来解决问题：

有些控制器直接从商店调用方法。 如何处理操作的所有逻辑都在商店中。还存储对 WebAPI 的调用（通常一个存储与一个 WebAPI 相关）。如果事件应该在多个 Store 中处理（通常顺序），那么控制器会通过编排从 Store 返回的 Promise 来处理这个问题。自身私有方法中的一些序列（常用）。控制器的方法可以将它们用作处理的简单部分。所以我将永远不会重复代码。

控制器方法不返回任何内容（单向流）。

实际上控制器不包含如何处理数据的逻辑。它只是点在哪里，以及以什么顺序。

您几乎可以在商店中看到数据处理的全貌。商店中没有关于如何与另一家商店互动的逻辑（通过 Flux，它就像 多对多关系，但只是通过 动作 ）。现在store是一个高内聚模块，只负责领域模型（集合）的逻辑。

助焊剂的主要（在我看来）优势仍然存在。

因此，商店是唯一真正的数据来源。组件可以订阅商店。并且组件调用与以前相同的方法，但不是actions 而是使用controller。与 React 的交互根本没有改变。

此外，事件处理变得非常明显。现在我只要看一下控制器中的处理程序就一切都清楚了，而且调试起来也容易得多。

问题是：

为什么动作是不断变化的？我错过了他们的哪些优势？

【参考方案1】：

为捕获视图上或来自服务器的特定交互而实施的操作，然后可以将其分派到任意数量的不同商店。开发人员以 facebookchat 为例对此进行了解释。 有一个 messageStore 和一个 threadstore。当动作例如。 messagePost 被发出，它被分派到两个商店做不同的工作来更新他们的属性。 Threadstore 增加了未读消息的数量，messageStore 将新消息添加到它的 messagearray 中。

所以它基本上是引导一个动作在多个商店中执行数据更改。

【讨论】：

可以将新邮件标记为未读。然后在线程存储中统计，有多少条消息被标记为未读。

我认为您不明白我的意思：1 个动作被调度并更新 2 个商店。作为软件架构师，这取决于您是否适合您的用例

Facebook 解决方案也许更好。但像这样的情况通常是例外而不是规则。那么，我应该使用基于异常的架构应用程序吗？并创建这么多只在少数情况下使用的操作？奥卡姆会不高兴的。

嗯，基本上通过使用操作，您可以确保应用程序逻辑的集中。如果您不执行被调度的操作，您将不得不直接调用您的商店的方法，这会增加您的错误可能性。这是因为您可以在控制器 1 和 2 中执行操作 A。

我看到的主要区别是“调度程序调用存储方法”方法要求应调用哪些存储以及它们应如何更改以响应每个事件的所有信息都收集到调度程序中。 Actions 使这些信息能够分布在整个 store 中，因此每个 store 只需要了解自己及其依赖关系，而不是调度程序需要了解所有 store 及其依赖关系。

【参考方案2】：

我和你有同样的问题和思考过程，现在我开始使用Flummox，这使得 Flux 架构更简洁。

我在定义我的商店的同一个文件中定义我的操作，这已经足够接近了。我仍然可以订阅调度程序来记录事件，这样我就可以看到所有被调用的操作，如果需要，我可以选择创建多存储操作。

它带有一个很好的 FluxComponent，可以让您将所有与商店相关的代码包装在一个地方，因此它的子组件是无状态组件，可以在商店更改时更新，例如

  <FluxComponent connectToStores=['storeA', 'storeB']>
    <InnerComponent />
  </FluxComponent>

保留 Flux 架构（它在幕后使用 Facebook 的 Flux）有望让其他技术的使用变得容易，例如 GraphQL。