Redux useSelector响应不及时，状态快速切换时无法捕获更新如何解决？

问题根因 #

不是useSelector无法捕获状态变化，而是React 18+的自动批量更新机制导致的：同一个事件循环内触发的多次Redux状态更新，会被React合并为一次渲染，中间的过渡状态会被直接跳过。

你DELETE请求耗时仅2ms，DELETE_STUDENT（把isFetching设为true）和DELETE_STUDENT_SUCCESS（把isFetching改回false）两个action的触发间隔极短，处于同一个事件循环内，React只会给组件同步最终的isFetching=false状态，你的useEffect自然感知不到曾经出现过isFetching=true的状态。
而POST请求耗时300ms，两个action的触发不在同一个事件循环，不会被批量合并，所以可以正常检测到状态变化；手动加延迟后同理，两个action被分到不同的事件循环，也就可以正常运行。

解决方案 #

方案1：直接在Saga中处理提示逻辑（最推荐） #

请求的成功、失败状态在Saga侧可以第一时间获取，直接在这里触发弹窗即可，不需要绕组件监听的弯路，逻辑更简洁也不会碰到批量更新的问题：

function* deleteStudentHandler(action: ActionType<typeof deleteStudent>) {
  try {
    yield call(StudentsService.delete, action.payload);
    yield put(deleteStudentSuccess(action.payload));
    // 直接触发成功提示
    Swal.fire('删除成功');
  } catch (e) {
    yield put(deleteStudentFailure(e.message));
    // 直接触发错误提示
    Swal.fire('删除失败', e.message, 'error');
  }
}

方案2：新增请求完成标记位，规避中间状态监听 #

如果提示逻辑必须放在组件侧，可以给deleteState新增一个notifyTrigger标记字段，每次请求完成（成功/失败）时更新这个字段为唯一值（比如时间戳），组件监听这个字段触发提示即可，不需要再监听isFetching的变化：

1. 修改Reducer逻辑：

case StudentsActionTypes.DELETE_STUDENT_SUCCESS: {
  return {
    ...state,
    students: state.students.filter(student => student.id !== action.payload),
    deleteState: {
      ...state.deleteState,
      isFetching: false,
      isSuccess: true,
      // 每次请求完成更新标记位
      notifyTrigger: Date.now()
    }
  }
}
case StudentsActionTypes.DELETE_STUDENT_FAILURE: {
  return {
    ...state,
    deleteState: {
      ...state.deleteState,
      isFetching: false,
      errMsg: e.message,
      isSuccess: false,
      notifyTrigger: Date.now()
    }
  }
}

2. 修改组件监听逻辑：

const { notifyTrigger, errMsgDelete, isSuccess } = useSelector(
  (state: StoreState) => state.students.deleteState
);

useEffect(() => {
  // 首次渲染无请求完成时跳过
  if (!notifyTrigger) return;
  if (isSuccess) {
    Swal.fire('删除成功');
  } else {
    Swal.fire('删除失败', errMsgDelete, 'error');
  }
}, [notifyTrigger, errMsgDelete, isSuccess]);

方案3：强制退出批量更新（不推荐） #

可以使用flushSync将设置isFetching的更新从批量更新中抽离，强制React立即渲染该状态，但该操作会影响渲染性能，仅作为兜底方案使用。

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