如何等待Redux Action Creator执行完毕？

这个问题是异步操作的典型场景——你dispatch的是一个带API请求的异步Action Creator，API请求还没完成、reducer还没更新Store时，你就去读取值，自然拿不到最新数据。咱们通过以下两步解决：

1. 修改Action Creator，让它返回Promise #

redux-thunk允许Action Creator返回一个函数，我们可以让这个函数返回API请求的Promise，这样dispatch(fetchMellisa(...))就会返回这个Promise，方便后续等待异步操作完成。

修改后的代码：

export function fetchMellisa (value) { 
  return dispatch => { 
    // 返回axios的Promise链，让dispatch调用能拿到这个Promise
    return axios.get(/*URL*/)
      .then( ({ data }) => {
        dispatch({ type: ACTION_CREATOR_1, payload: data });
        // 可选：返回data，方便调用方后续直接使用
        return data;
      })
      .catch( error => {
        console.error('error', error);
        // 抛出错误，让调用方可以捕获处理
        throw error;
      }); 
  }; 
}

2. 在调用处等待Promise完成 #

现在dispatch(fetchMellisa(...))会返回一个Promise，我们可以用async/await或者.then()来等待异步操作完成，之后再读取Store里的最新值。

方式一：使用async/await（更直观） #

如果是类组件的方法，先把方法标记为async：

async handleAddressFetch() {
  // 等待Action Creator完成API请求和dispatch
  await this.props.dispatch(fetchMellisa(values.currentAddress));
  // 此时Store已经更新，可以安全读取最新值
  const currentAddress = this.props.addressMelissa[0].Address;
  // 执行后续逻辑...
}

方式二：使用.then()链式调用 #

如果不想用async/await，也可以用Promise链式调用：

this.props.dispatch(fetchMellisa(values.currentAddress))
  .then(() => {
    // 等待完成后读取最新值
    const currentAddress = this.props.addressMelissa[0].Address;
    // 执行后续逻辑...
  })
  .catch(error => {
    // 处理API请求失败的情况
    console.error('请求失败', error);
  });

额外提醒 #

确保你的组件已经通过connect（类组件）或者useSelector（函数组件）正确映射了addressMelissa到props，这样Store更新时组件能拿到最新的state。如果是在组件渲染时使用这个值，其实可以直接在render里引用，但如果需要在同一个函数流程里等待异步操作完成后执行逻辑，上面的方法就完全适用。

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