Flux：如何让一个 action 等待 store？

Posted 2023-02-22

【中文标题】Flux：如何让一个 action 等待 store？

【英文标题】：Flux: How to make an action wait for a store?

【发布时间】：2015-08-04 22:36:47

【问题描述】：

我正被一个 React 问题困扰着，我确信这不会像我现在认为的那么困难。

我正在针对返回资源的 RESTful 服务器 API 构建单页应用程序，以及描述可以使用该资源做什么的链接。而且我试图确保我的客户端的 ajax 调用仅使用以这种方式从服务器检索的 URL。因此，例如，我的 LoggedInSessionStore 包含允许我获取所有公共文档列表的 URL。

我遇到的问题是如何管理动作和商店之间的依赖关系。例如，当获取所有公共文档的操作触发时，它需要从 LoggedInSessionStore 中获取其 URL。但是那家商店可能还没有人满；因此，在前一个操作（获取登录会话）完成之前，该操作不得触发。

所以，我想要一个可以使用存储在商店中的 URL 获取服务器数据的操作。什么是公认的方法来确保该操作在该商店被填充之前不会触发？

【参考方案1】：

TL;DR不要将您的网址存储在您的商店中。让您的操作处理 API 调用。

一般来说，在使用 Flux 时，您的操作不应该知道您的商店。 Flux 应用程序中的数据意味着向一个方向流动：

Components --> Actions --> Dispatcher --> Stores --> Components

您的 React 组件创建操作，然后由 Dispatcher 分派到您的商店。商店将通过注册的回调通知这些操作，并相应地更新自己。组件将监听 store 更新自己，并相应地更新自己的状态。这样一圈就完成了。

重点是：行动不应依赖于商店

我的建议是将所有 API 逻辑转化为操作。这包括您的 API 的 URL。这是 Flux 应用程序中相当常见的模式：

组件在componentDidMount 上触发提取操作。显示加载微调器，因为它还没有需要渲染的数据。 fetch 操作进行 AJAX 调用以从服务器获取数据。 当数据从服务器返回时，操作将其作为有效负载分派 商店看到负载并根据获取的数据设置其内部状态 组件看到存储已更新，并相应地更新自己的状态。这会导致它呈现应用，而不仅仅是加载微调器。

另一种选择是将您的获取逻辑包含在您的商店中，包括 AJAX 请求代码。我发现前者更容易推理（商店什么都不知道，他们只是在数据可用时对其做出反应），但如何实现它取决于您。只需确保 API 获取逻辑只在一个地方，而不是在 Actions 和 Stores 之间分开。

这个帖子也可能有帮助：Should flux stores, or actions (or both) touch external services?

【讨论】：

感谢您的回答@ian。我的代码的结构完全按照您的建议进行，我认为这是我的问题的一部分。问题的另一部分是我试图遵循 HATEOAS 原则：每个操作所需的 URL 来自服务器，来自早期 API 调用的结果。因此，除了第一个动作之外的每个动作都必须等待 URL 在前一个有效负载中从服务器返回（然后可能会保存在 Store 中）。所以我的问题是：React/Flux 与 HATEOAS 不兼容吗？

这是一个很好的问题，但很遗憾我无法帮助您。我从未尝试将 HATEOAS 原则应用于 Flux 应用程序