reactjs - Flux:如何让一个 Action 等待存储？

Question

我正被一个 React 问题困扰，我确信这个问题不会像我现在看起来那么困难。

我正在针对返回资源的 RESTful 服务器 API 构建一个单页应用程序，以及描述可以使用该资源执行哪些操作的链接。我试图确保我的客户端的 ajax 调用仅使用以这种方式从服务器检索的 URL。例如，我的 LoggedInSessionStore 包含允许我获取所有公共(public)文档列表的 URL。

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

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

Answer 1

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

一般来说，在使用 Flux 时，您的操作不应该了解您的商店。 Flux 应用程序中的数据应该朝一个方向流动:

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

您的 React 组件创建操作，然后由调度程序将其分派(dispatch)到您的商店。商店将通过其注册的回调收到有关操作的通知，并相应地进行 self 更新。组件将监听存储来更新自己，并且它们将相应地更新自己的状态。这样，这个循环就完成了。

要点是:行动不应取决于商店

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

1. 组件触发 componentDidMount 上的获取操作。显示加载微调器，因为它还没有渲染所需的数据。
2. 获取操作会发出 AJAX 调用以从服务器获取数据。
3. 当数据从服务器返回时，操作会将其作为有效负载进行分派(dispatch)
4. 存储看到负载并根据获取的数据设置其内部状态
5. 组件发现存储已更新，并相应地更新其自身的状态。这会导致它渲染应用程序而不仅仅是加载旋转器。

另一种选择是将获取逻辑放在商店中，包括 AJAX 请求代码。我发现前者更容易推理(商店什么都不知道，他们只是在数据可用时使用react)，但这取决于你想如何实现它。只需确保 API 获取逻辑仅在一个位置，而不是在操作和存储之间拆分。

此线程也可能有帮助:Should flux stores, or actions (or both) touch external services?