Question

我正在努力解决Cannot dispatch in the middle of a dispatch错误Flux向我投掷的一个基本示例。

在我看来，我的socialLogin(token)上有一个触发AuthActions动作的按钮。使用Alt on my Action，我generateActions('login');

我的socialLogin方法执行Async API请求，该请求返回一个promise（Api是一个使用请求lib的简单类）：

// AuthActions
socialLogin(type, access_token) {
    Api.request('get', 'auth/social', { type, access_token })
       .then((payload) => {
           if (payload.code !== 'OK') {
               // Do something...
           } else {
               this.actions.login(payload.data.token);
           }
       })
       .catch((response) => {
           console.log('ERROR', response);
           // Do something....
       });
    this.dispatch();
}

商店onLogin方法目前无效。

但运行此操作会抛出/捕获错误Uncaught (in promise) Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.(…)。

我无法理解为什么在阅读了很多问题/文章之后 - this.dispatch()“不应该”解决“当前正在发送的行动？

我如何在此处触发其他操作，甚至触发多项操作（登录，使用其他外部操作等）。

谢谢！

Answer 1

我认为在你的例子中你可以完全省略this.dispatch();行，它应该。动作创建者函数socialLogin作为调度本身的一部分被调用，因此不允许调用调度。如果您确实想在登录过程开始时调度socialLogin操作（例如，允许设置微调器等），则可以返回要分派的有效负载。例如用

替换this.dispatch();

return { type, access_token };

如果他们想要抓住流程的开始，那么商店可以收听socialLogin。

Answer 2

您需要的是this.actions.myAnotherAction()，其中myAnotherAction是您案件中AuthActions内的另一个操作。看

Answer 3

在动作中，只需返回一个承诺：

clipboard = QApplication.clipboard()

有时在容器/控制器视图中，您可能会因此操作而调用操作，这将导致相同的错误。在那里只需调用任何后续的带有延迟选项的操作，如：

 socialLogin(type, access_token) {
  return (dispatch) => {
    dispatch({type:type, accessToken:access_token});
    return new Promise((resolve,reject)=>{
      Api.request('get', 'auth/social', { type, access_token })
      .then((payload) => {
       if (payload.code !== 'OK') {
           // Do something...
       } else {
           this.actions.login(payload.data.token);
       }
       resolve(payload);
       })
       .catch((response) => {
       console.log('ERROR', response);
       // Do something....
       reject(response);
       });
    }
  }

}

Flux / Alt Basic异步示例抛出“无法在调度中间发送”

3 个答案: