如何在Redux中等待多个Action执行完成并获取结果？

太懂这种异步批量操作卡壳的感觉了！你之前用延迟和Promise没搞定，大概率是没把每个dispatch的异步Action正确包装成Promise，或者没利用好Promise.all()来等待所有任务完成。我给你捋捋靠谱的解决方案：

核心思路 #

要实现“多个异步Action执行完成后再触发下一个Action”，关键是让每个异步Action的dispatch调用返回Promise，然后用Promise.all()统一等待所有Promise完成，再处理结果并触发后续Action。

方案一：基于Redux Thunk的实现 #

如果你的项目用的是传统Redux + Thunk中间件，首先要确保你的异步Action Creator返回的是一个异步函数（async/await包裹），并且在函数末尾返回结果（或抛出错误），这样dispatch这个Action时会得到一个Promise。

第一步：定义异步Action Creator

// 示例：提交数据的异步Action Creator
const submitItem = (itemData) => async (dispatch) => {
  try {
    // 这里替换成你的实际异步请求（比如axios/fetch）
    const response = await api.submit(itemData);
    const result = response.data;
    
    // 触发同步Action更新状态（可选，根据你的状态管理需求）
    dispatch({ type: 'SUBMIT_ITEM_SUCCESS', payload: result });
    
    return result; // 关键：返回结果，让dispatch(submitItem())成为一个Promise
  } catch (error) {
    dispatch({ type: 'SUBMIT_ITEM_FAILURE', payload: error.message });
    throw error; // 抛出错误，方便Promise.all捕获异常
  }
};

第二步：批量触发并等待所有完成

在你需要批量提交的逻辑里，把所有dispatch(submitItem())放进Promise.all()，用await等待全部完成后再处理结果：

const handleBatchSubmit = () => async (dispatch) => {
  try {
    // 准备所有要提交的任务，每个dispatch都会返回Promise
    const submitTasks = [
      dispatch(submitItem(item1)),
      dispatch(submitItem(item2)),
      dispatch(submitItem(item3))
    ];

    // 等待所有异步任务完成，拿到所有结果数组
    const allResults = await Promise.all(submitTasks);

    // 把结果整合成你需要的对象（按你的需求结构调整）
    const vals = {
      firstResult: allResults[0],
      secondResult: allResults[1],
      thirdResult: allResults[2]
    };

    // 现在可以安全地触发后续Action了
    dispatch({ type: 'ALL_SUBMITS_COMPLETED', payload: vals });
    console.log('最终整合结果：', vals);
  } catch (error) {
    // 处理任意一个任务失败的情况
    console.error('批量提交失败：', error);
  }
};

方案二：基于Redux Toolkit的更简洁实现 #

如果你的项目用Redux Toolkit（现在官方推荐的方式），可以用createAsyncThunk来定义异步Action，它本身就会返回带有Promise的Action，用法更简洁：

第一步：用createAsyncThunk定义Action

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// 定义异步Action
export const submitItem = createAsyncThunk(
  'items/submit',
  async (itemData, { rejectWithValue }) => {
    try {
      const response = await api.submit(itemData);
      return response.data;
    } catch (error) {
      // 用rejectWithValue返回错误信息，方便后续处理
      return rejectWithValue(error.message);
    }
  }
);

第二步：批量执行并处理结果

这里需要注意用unwrap()来获取成功的结果（或抛出错误）：

const handleBatchSubmit = () => async (dispatch) => {
  try {
    const allResults = await Promise.all([
      dispatch(submitItem(item1)).unwrap(),
      dispatch(submitItem(item2)).unwrap(),
      dispatch(submitItem(item3)).unwrap()
    ]);

    const vals = {
      result1: allResults[0],
      result2: allResults[1],
      result3: allResults[2]
    };

    dispatch({ type: 'ALL_SUBMITS_COMPLETED', payload: vals });
  } catch (error) {
    console.error('有提交任务失败：', error);
  }
};

特殊场景：允许部分任务失败 #

如果希望即使部分提交失败，也能处理成功的结果，可以用Promise.allSettled()替代Promise.all()，它会等待所有任务完成（无论成功失败），然后返回每个任务的状态：

const handleBatchSubmit = () => async (dispatch) => {
  const submitTasks = [
    dispatch(submitItem(item1)),
    dispatch(submitItem(item2)),
    dispatch(submitItem(item3))
  ];

  const allResults = await Promise.allSettled(submitTasks);

  const vals = {};
  allResults.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      vals[`result${index + 1}`] = result.value;
    } else {
      console.error(`第${index + 1}个提交失败：`, result.reason);
    }
  });

  dispatch({ type: 'ALL_SUBMITS_COMPLETED', payload: vals });
};

为什么你之前的Promise用法没成功？ #

大概率是这两个原因：

1. 你的异步Action Creator没有返回Promise（比如只是普通的同步Action，或者异步函数里没返回结果）；
2. 没有用await等待Promise.all()完成，直接就去获取vals，此时异步任务还没结束，结果自然是空的。

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