Flux：如何让行动等待商店？

Question

我将自己与React问题捆绑在一起，我确信它可能会像我现在看起来那样困难。

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

我遇到的问题是如何管理操作和存储之间的依赖关系。例如，当获取所有公共文档的操作触发时，它需要从LoggedInSessionStore获取其URL。但该商店可能尚未填充;因此，在上一个操作（获取登录会话）完成之前，操作不得触发。

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

Answer 1

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

一般情况下，当使用Flux时，您的行为不应该知道您的商店。 Flux应用程序中的数据旨在向一个方向流动：

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

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

重点是：操作不应依赖于商店

我建议您将所有API逻辑移动到操作中。这包括API的网址。这是Flux应用中相当常见的模式：

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

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

此主题也可能有所帮助：Should flux stores, or actions (or both) touch external services?