Redux-Thunk链式dispatch失效：仅首次dispatch生效，第二次无响应

Hey，我来帮你搞定这个Redux-Thunk里链式dispatch失效的问题！你遇到的情况是在同一个thunk action里连续调用两次dispatch，结果只有第一次生效，第二次完全没响应对吧？咱们一步步来拆解。

问题场景重现 #

先把你给出的相关代码贴出来，方便参考：

Store 配置 #

const store = createStore(reducers, loadState(), applyMiddleware(thunk));

出现问题的 Action 代码 #

export function doSomething(name) {
  return function (dispatch) {
    dispatch({ type: 'USERNAME', payload: name })
    dispatch({ type: 'OTHER_TYPE', payload: 'text' })
    return true;
  }
}

按照正常逻辑，Redux-Thunk应该支持在thunk里连续同步dispatch，两次action都应该被分发到reducer更新状态，但你这里却出现了第二次dispatch无响应的情况。

可行解决方案 #

你提到用Promise.all()包装多个dispatch的方式解决了问题，这个方案是有效的，修改后的代码如下：

export function doSomething(name) {
  return function (dispatch) {
    return Promise.all([
      dispatch({ type: 'USERNAME', payload: name }),
      dispatch({ type: 'OTHER_TYPE', payload: 'text' })
    ]);
  }
}

问题原因分析 #

通常来说，Redux的dispatch本身是同步操作，在thunk里连续调用两次dispatch应该都能正常生效。但你遇到的情况，大概率是以下某个隐性因素导致的：

• Store初始化异常：如果你的loadState()函数是异步加载状态（比如从localStorage读取但用了异步API），却被同步传入createStore，会导致store初始化状态不完整，影响后续dispatch的执行逻辑。
• 中间件拦截：项目中如果存在自定义中间件或者第三方中间件，可能在处理第一次dispatch后，意外拦截了第二次dispatch的传递流程。
• 组件状态重置/卸载：组件在接收第一次状态更新后，可能因为某些逻辑触发了卸载或者状态重置，导致第二次dispatch的状态更新无法被组件捕获。

而用Promise.all()包装dispatch后，会把这两个dispatch的执行放入微任务队列，让它们在当前同步任务执行完成后再执行，从而避开了同步执行时可能遇到的拦截或状态异常问题，确保两次dispatch都能被store和中间件完整处理。

内容的提问来源于stack exchange，提问作者mrkacan