如何等待Redux Action派发？Redux应用锁逻辑执行时机异常

问题一：如何等待Redux Action的派发？ #

Redux Action的等待逻辑分两种情况来看：

1. 同步Action #

Redux的dispatch方法本身是同步执行的——当你调用dispatch(action)后，store会立即完成状态更新，不需要额外等待。你可以在dispatch之后直接获取最新的store状态（比如通过store.getState()，或者如果是连接到组件的props，组件会在状态更新后重新渲染）。

2. 异步Action（使用中间件时） #

如果你的Action是异步的（比如依赖API请求、定时器等，通常用redux-thunk、redux-saga这类中间件实现），需要让Action返回一个Promise来实现等待：

• 以redux-thunk为例，你可以让Action Creator返回一个异步函数，最后返回Promise：

  export const saveRemoteCount = (remoteCount) => {
    return async (dispatch) => {
      // 这里可以加入异步操作，比如API请求
      // const data = await API.someRequest();
      dispatch({ type: 'SAVE_REMOTE_COUNT', payload: remoteCount });
      // 返回Promise让调用方可以等待
      return Promise.resolve();
    };
  };
  

  之后在组件里就可以用await或.then()来等待Action执行完成：

  await this.props.saveRemoteCount(remoteCount);
  // 此时异步Action已经完成，store状态已更新
  

• 如果你用redux-saga，通常会在saga内部通过take等effect监听Action的完成事件，组件可以通过触发特定Action来触发后续逻辑，或者通过自定义的Promise包装saga的执行结果。

问题二：为何then()中仍使用旧的remoteCount值，如何在Action派发完成后执行判断？ #

问题原因 #

你遇到的核心问题是闭包导致的旧值引用：
在componentDidMount一开始，你解构了const {remoteCount, count} = this.props;，这两个变量会一直持有组件挂载时的初始值（都是0）。哪怕之后saveRemoteCount成功派发Action、store状态更新，这个闭包里的变量也不会同步更新。另外，Redux更新组件props是异步的——store状态更新后，组件不会立即重新渲染，所以在.then()里直接访问this.props也可能还是旧值。

解决方案 #

最符合Redux数据流的做法是使用componentDidUpdate生命周期钩子，监听状态变化后再执行判断逻辑：

componentDidUpdate(prevProps) {
  const { remoteCount, count, isAppLock } = this.props;
  // 只有当remoteCount或count发生变化时才执行判断，避免无限循环
  if (prevProps.remoteCount !== remoteCount || prevProps.count !== count) {
    // 根据相等状态设置应用锁定
    isAppLock(remoteCount === count);
  }
}

componentDidMount() {
  // 只负责触发获取远程计数的操作，判断逻辑交给componentDidUpdate
  this.getRemoteCount();
}

这种方式的优势在于：

• 不管是remoteCount还是count发生变化，都会自动触发判断，覆盖所有状态更新场景
• 完全遵循Redux的单向数据流，组件通过props响应状态变化，不需要直接操作store

如果一定要在getRemoteCount的.then()里执行判断，可以直接从store获取最新状态（前提是你能访问到store实例）：

this.getRemoteCount().then(() => {
  const { remoteCount, count } = store.getState(); // 直接从store拿最新值
  if (remoteCount === count) {
    this.props.isAppLock(true);
  }
});

不过这种方式不推荐，因为组件应该通过props接收状态，而非直接依赖store实例，会降低组件的复用性和可测试性。

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