React项目中Redux无法按顺序触发dispatch action是什么原因？

你遇到的问题和dispatch批量处理无关，核心原因是 updateProfileImage 触发的API请求是异步操作，你当前的代码是同步执行三个dispatch，不等API请求完成就直接执行了dispatch(isLoading(false))，所以loading状态看起来始终为false。

方案1：在组件内等待异步请求完成后再关闭loading #

如果你使用的是redux-thunk、redux-saga这类支持异步action的中间件，dispatch(updateProfileImage())会返回一个Promise，你可以把handleSave改为异步函数，等待请求完成后再执行关闭loading的dispatch：

const handleSave = async () => {
    dispatch(isLoading(true))
    // 等待异步请求完成
    await dispatch(updateProfileImage());
    dispatch(isLoading(false))
};

这种方案适合loading是当前页面独有的局部状态，逻辑简单直接，不需要修改现有中间件逻辑。

方案2：把loading状态控制放到中间件中处理 #

如果你全应用的API请求都统一通过中间件处理，更推荐把loading的状态变更逻辑封装到中间件里：

• 中间件监听到API请求类的action发起时，自动dispatch isLoading(true)
• 监听到API请求成功/失败回调时，自动dispatch isLoading(false)
  这种方案的优势是不需要每个业务组件都写重复的loading控制代码，适合全局统一的加载提示场景，维护性更高。

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