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

Question

我似乎遇到了一种情况,我无法避免在Flux中发送调度问题.

我已经阅读了一些关于这个问题的类似问题,但是除了setTimeout黑客之外,它们似乎都没有一个好的解决方案,我想避免.

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

脚本

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

我遇到的问题是当我尝试根据XHR响应触发一个动作来获取数据时,它仍然在发送LOGIN_RESPONSE动作,并触发了可怕的行为

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

例

我创建了这个jsfiddle来演示这个问题.

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

1. 首先,登录按钮在Wrapper组件中呈现.
2. 单击该按钮将调度该LOGIN操作.
3. 延迟之后,将LOGIN_RESPONSE调度该操作(通过alt.js中的异步机制).
4. 此操作会触发MyStore更新用户名.
5. Wrapper 组件观察存储更改并更新其状态.
6. 这会导致Wrapper呈现Content组件而不是登录按钮.
7. Contentmount上的组件尝试分派FETCH_DATA操作,但由于调度程序仍在调度,因此操作失败LOGIN_RESPONSE.(如果我将FETCH_DATA调度包装在setTimeout它的工作中,但感觉就像一个黑客).

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

• React - 身份验证过程:无法在调度中间调度
• 在Flux/React中调度级联/依赖异步请求
• Flux Dispatch.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/以获取工作示例，并参阅此 Fluxxor 问题以获取不同框架中相同问题的描述。