Flux:如何让一个动作等待一个 store?

IT技术 reactjs reactjs-flux flux
2021-05-15 16:19:10

我被一个 React 问题束缚住了手脚,我确信这不会像现在对我来说那么困难。

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

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

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

1个回答

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

通常,在使用 Flux 时,您的操作不应该了解您的商店。Flux 应用程序中的数据旨在向一个方向流动:

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

您的 React 组件创建操作,然后由 Dispatcher 将其分派到您的商店。商店将通过他们注册的回调收到有关操作的通知,并将相应地更新自己。组件会监听 store 来更新自己,它们会相应地更新自己的状态。这样循环就完成了。

重点是:动作不应该依赖于商店

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

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

另一种选择是在您的商店中设置提取逻辑,包括 AJAX 请求代码。我发现前者更容易推理(商店一无所知,他们只是在数据可用时对数据做出react),但这取决于您希望如何实现它。只要确保 API 获取逻辑只在一个地方,而不是在 Actions 和 Stores 之间分开。

此线程也可能有帮助:flux 存储或操作(或两者)是否应该接触外部服务?