Flux Dispatch.dispatch(...)：无法在调度过程中调度答案

【问题标题】：Flux Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatchFlux Dispatch.dispatch(...)：无法在调度过程中调度
【发布时间】：2014-12-22 06:41:42
【问题描述】：

我的代码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af

所以当我收到登录成功回调时，我想进行重定向，
重定向也可以通过调度程序工作。

我得到 Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

中间有什么技巧可以调用动作吗？

【问题讨论】：

标签： flux reactjs-flux

【解决方案1】：

我看不到您发布的要点中的何处进行了重定向。我只看到 AUTH_SIGNIN 和 AUTH_SIGNIN_SUCCESS 操作，它们看起来很简单。

但是不，在调度过程中创建动作是没有技巧的，这是设计使然。行动不应该是导致改变的事情。它们应该像报纸一样，通知应用程序外部世界的变化，然后应用程序响应该消息。商店本身会引起变化。行动只是通知他们。

如果您遇到此错误，则需要备份并查看您是如何处理原始操作的。大多数情况下，您可以将应用程序设置为响应原始操作，完成您需要做的所有事情，并避免尝试创建第二个操作。

【讨论】：

实际上很常见的是，例如组件 A 创建一个更改存储 B 的操作，组件 C 正在侦听，并且作为响应，组件 C 需要从服务器获取数据，这是一个操作，但调度程序仍然仍在调度，所以它不能。对此的解决方案对我来说感觉很 hacky（将 fetch 操作包装在 setTimeout 或类似中）
组件不应该决定何时获取数据。这是视图层中的应用程序逻辑。这个逻辑属于 store，它可以触发 XHR，然后错误/成功回调使用新数据创建操作。
组件没有获取任何数据，而是触发一个动作......并且存储触发动作实际上打破了单向数据流，因为它变成了这样pastebin.com/wrWQdFz1
Flux 中的单向数据流是 Action->Dispatcher->Store->View。我绘制的循环图（您正在引用）仅用于显示客户端交互。数据流仍然是单向的在 Flux 应用程序中。发布 XHR 时，数据已离开系统。数据与响应一起进入系统。只要您在响应中创建操作而不是直接在商店中处理它，您就保留了单向流。
@fisherwebdev 这个问题让我很困惑很长时间，我想在组件渲染后触发一个动作，例如，在我的视图层中，我有一个用于创建项目的模式对话框，我触发了一个动作来保存项目，并且该动作通知商店它已经完成了它的工作，然后商店发出改变来触发将关闭对话框的渲染，但我想在组件渲染后重新加载数据，什么是最好的处理地点？目前我使用 setTimeout 在它发出更改后在商店中触发重新加载操作，但它看起来很脏。有什么建议吗？

【解决方案2】：

您可以通过“调度”下一个动作而不是直接调用它来使其工作，这是一个示例代码：

// instead of doing this
Dispatcher.dispatch(...);

// go like this
setTimeout(function() {
  Dispatcher.dispatch(...);
}, 1);

这将导致您的下一个调度稍后在当前调度过程中被调用，并且不会发生错误。

如果您的调度代码在回调中，则任何其他类型的异步操作都可以正常工作（例如在 Ajax 请求的响应中）。

我正在使用这种样式来让一些表单响应这里的通用数据，我没有遇到任何问题，至少我使用它的方式是这样。

【讨论】：

uuughhh - setTimeout 黑客是可怕的。最好使用 Promise
@DanOsborne 我认为 Promise 在这里解决不了任何问题，因为它们不会像 setTimeout 那样自动结束当前的执行线程。如果我理解错了，你能举个例子吗？谢谢！

【解决方案3】：

您可以在调度程序中使用“延迟”选项。在你的情况下，它会像：

Dispatcher.dispatch.defer(...);

【讨论】：

Dispatcher 没有 defer 方法。 Uncaught TypeError: _dispatcher.dispatcher.dispatch.defer is not a function

【解决方案4】：

可以查看dispatcher是否在调度，如：

if(!MyDispatcher.isDispatching()) {
    MyDispatcher.dispatch({...});
}

【讨论】：