在侦听器回调后调用操作并且...无法在调度中间调度？

Posted 2023-02-22

【中文标题】在侦听器回调后调用操作并且...无法在调度中间调度？

【英文标题】：Call action after callback from listener and... cannot dispatch in the middle of dispatch?

【发布时间】：2016-04-20 06:26:15

【问题描述】：

我在使用 React 和 Flux 时遇到了麻烦...我们有一个与新的 Flux 聊天示例非常相似的应用程序。我们有著名的错误“在调度过程中无法调度”。但是，在某些情况下，我们很难想出一个好的方法来解决这个问题。

我们的疑问与此相同：https://groups.google.com/forum/#!topic/reactjs/mVbO3H1rICw，但我不能很好地理解所采用的解决方案。据我了解，这不是一个非常优雅的解决方案。

这是事件的顺序：

动作 A 已调度；

Store 更新其内部状态并发出更改消息；

React 组件 X 接收到更改消息（通过侦听器的回调）并更新其状态（setState）；

组件 X 渲染，作为其中的一部分，新组件 Y 也被安装。我们使用状态信息选择要渲染的组件（Y、Z等）；

新组件 Y 需要显示最初未加载的数据。所以我们在组件 Y 的 componentDidMount() 中调用了一个 API，它调用了一个动作 B。

然后，使用 Action B 中的新调度程序，我们会遇到这个调度错误。

如果你认为我们的应用逻辑有问题，我可以举一些实际的例子来说明为什么这种场景对我们来说很常见。任何关于如何重构这种“通量”的想法都非常受欢迎。

感谢您的帮助！

【参考方案1】：

我认为您需要在启动操作 b 之前使用调度程序中的 waitFor 令牌（您使用的是来自 flux npm 模块的调度程序，对吗？）。此外，如果您总是需要来自操作 b 的数据，那么您可以在操作 A 期间从您的商店进行 ajax 调用。

solution b would look like this in /* store.js */

Dispatcher.register(function(payload)
  switch payload.type 
    case ACTION_A:
      /* do your state logic */
      StoreDataAccessLayer.apiCall()
  

您有一个数据访问层类/对象，它将您的 ajax 调用包装到 api。使用商店中的状态作为输入，并从成功函数中调用触发器更改。这是我在使用flux npm 模块时看到的原始解决方案，如果您不使用waitFor

【讨论】：

嗨！我不想从商店调用操作。 “Flux 应用程序中的数据单向流动”：facebook.github.io/flux/docs/overview.html

您不会使用操作来进行该 API 调用。您正在将 api 移动到第一个动作的循环中

我的错误。我说是因为我们在调用 API 之后调度 API 结果（有效负载），因为一些组件正在监听这个 API 调用。我们的解决方案类似：github.com/schempy/react-flux-api-calls。而且我无法从操作 A 分派所有 API 调用，因为这个 Store 不知道需要什么 API 调用，因为只有组件（Y、Z 等）知道这一点。我将就这个问题举两个实际的例子来说明问题。