javascript - React Flux - 在调度中调度 - 如何避免？

Question

我好像遇到过在Flux中无法避免dispatch-within-a-dispatch问题的情况。

我读过一些关于这个问题的类似问题，但除了 setTimeout 黑客之外，它们似乎都没有好的解决方案，我想避免这种情况。

我实际上使用的是 alt.js而不是 Flux，但我认为概念是相同的。

场景

想象一个最初呈现登录表单的组件。当用户登录时，这会触发一个 XHR，最终响应身份验证信息(例如用户名)，然后根据身份验证信息获取一些安全数据并呈现它而不是登录表单。

我遇到的问题是，当我尝试根据 XHR 响应触发一个获取数据的操作时，它仍在 LOGIN_RESPONSE 操作的调度中，并触发了可怕的

Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

例子

我创建了 this jsfiddle来证明问题。

我有一个 Wrapper 组件，它根据用户是否在 MyStore 中设置，呈现登录按钮或 Contents 子组件.

1. 首先，登录按钮在 Wrapper 组件中呈现。
2. 单击该按钮会调度 LOGIN 操作。
3. 延迟一段时间后，LOGIN_RESPONSE 操作被调度(通过 async mechanism in alt.js )。
4. 此操作触发 MyStore 更新用户名。
5. Wrapper 组件观察商店的变化并更新其状态。
6. 这会导致 Wrapper 呈现 Content 组件而不是登录按钮。
7. Content 组件在装载时尝试分派(dispatch) FETCH_DATA 操作，该操作失败，因为分派(dispatch)器仍在分派(dispatch) LOGIN_RESPONSE。 (如果我将 FETCH_DATA 分派(dispatch)包装在 setTimeout 中，它就可以工作，但感觉像是 hack)。

这种情况的变体似乎是一种常见的情况。事实上，几乎所有相关问题都有类似的场景，但没有好的或具体的答案。

• React - Authentication process : Cannot dispatch in the middle of a dispatch
• Dispatching cascading/dependent async requests in Flux/React
• Flux Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch

这个数据流是否存在本质上的错误？执行此类操作的正确 Flux 方法是什么？

Answer 1

这是许多库中 componentDidMount 调度的常见问题。解决方案是将调度包装在 React 的批量更新中；幸运的是，Alt 允许您使用 batchingFunction 选项执行此操作:

var alt = new Alt({
  // React.addons.batchedUpdates is deprecated:
  // batchingFunction: React.addons.batchedUpdates

  // use this instead in newer versions of React
  // see https://discuss.reactjs.org/t/any-plan-for-reactdom-unstable-batchedupdates/1978
  batchingFunction: ReactDOM.unstable_batchedUpdates
});

参见 https://jsfiddle.net/BinaryMuse/qftyfjgy/一个工作示例和this Fluxxor issue在不同的框架中描述相同的问题。