Redux Saga中dispatch后无法立即读取最新store数据该如何解决

背景说明 #

项目采用父子组件结构开发：

• 父组件负责拉取房间列表数据，将数据存入 Redux Store 后，动态渲染对应数量的子组件
• 子组件为操作按钮，点击时会触发请求获取对应房间的详细信息，同样将返回数据存入 Redux Store
• 业务需求：用户点击按钮时，对比父组件传入的房间状态、与请求返回后存入 Store 的同房间状态是否一致，确保使用用户点击时刻的最新数据

示例数据结构 #

房间列表数据：

result: [
  {
    key: 1,
    roomNo: '01',
    status: 'OCCUPIED',
  },
  {
    key: 2,
    roomNo: '02',
    status: 'UNOCCUPIED',
  },
]

房间详情数据：

detailResult: [
  {
    key: 1,
    roomNo: '01',
    status: 'OCCUPIED',
    roomColor: 'red',
  },
]

现有问题代码 #

子组件当前实现逻辑：

const { reduxStore } = useSelector((state) => ({
  reduxStore: state.reduxStore,
}));

const retrieve = useCallback(
  (params) => {
    dispatch(Actions.wardFetchRoom(params));
  },
  [dispatch]
);

const handleClick = (event) => {
  const params = { roomNo: roomNo };
  retrieve(params);
  console.log('Step1', props.bedNo);
  console.log('Step2', props.status);
  console.log('Step3', reduxStore.room.status);
  // 预期比对逻辑：props.status === reduxStore.room.status
};

实际异常表现 #

代码读取的 Store 数据始终是上一次更新的旧值，整体存在一次操作的延迟，时序如下：

T0: 组件渲染完成
T1: 点击 key=1 的房间子组件按钮
T2: 控制台输出: "Step1 = 1, Step2 = OCCUPIED, Step3 = NULL" （预期值为 Step3 = OCCUPIED）
T3: 点击 key=2 的房间子组件按钮
T4: 控制台输出: "Step1 = 2, Step2 = UNOCCUPIED, Step3 = OCCUPIED" （该值来自 T1 时刻的请求结果）

问题根因 #

两个核心原因共同导致了读取到旧值的现象：

• 闭包快照问题：useSelector 返回的 reduxStore 是当前组件渲染时刻的 Store 状态快照，会被包裹在 handleClick 的函数闭包中，不会在点击触发时实时读取最新的 Store 状态，天然存在读取旧值的可能
• 异步流程时序错配：Actions.wardFetchRoom 是由 Redux Saga 接管的异步 action，调用 dispatch 仅仅是启动 Saga 任务、触发接口请求，并不会等待接口返回、Store 更新完成再继续往下执行。因此在 retrieve(params) 之后的同步代码执行时，本次请求的数据还根本没写入 Store，自然读不到最新值。用户观察到的“延迟一次操作”的现象，本质就是上一次请求的异步流程在本次点击的同步代码执行完之后才完成，把 Store 状态更新了。

调整方案 #

针对上述问题，按以下思路调整代码即可实现准确的状态比对：

1. 解决闭包旧值问题：手动获取实时 Store 引用 #

如果需要在任意时刻读取最新的 Store 状态，不要依赖 useSelector 返回的渲染快照，可以通过直接注入的 Store 实例读取当前值：

// 直接引入全局 Store 实例，读取的状态不受组件渲染周期、闭包影响
import store from '../store';

2. 解决异步时序问题：在 Store 数据更新完成的时机触发比对 #

不要在同步点击逻辑里硬等异步请求结果，将状态比对的逻辑绑定到数据更新完成的节点执行，有两种常用实现方式：

方式一：组件层监听 Store 变化触发比对

在拿到本次请求返回的最新房间状态后，主动触发比对逻辑：

const handleClick = (event) => {
  const params = { roomNo: roomNo };
  // 先记录用户点击时刻父组件传入的初始状态
  const clickTimeStatus = props.status;
  
  // 触发异步请求
  retrieve(params);

  // 监听 Store 变化，匹配到本次请求对应的房间详情更新后，执行比对
  const unsubscribe = store.subscribe(() => {
    const latestRoom = store.getState().reduxStore.room;
    // 判断是不是当前点击房间的更新数据
    if (latestRoom.roomNo === roomNo) {
      const isStatusConsistent = clickTimeStatus === latestRoom.status;
      console.log('状态比对结果', isStatusConsistent);
      // 比对完成后取消订阅，避免内存泄漏
      unsubscribe();
    }
  });
};

方式二：在 Saga 流程中处理比对逻辑

如果业务逻辑和请求流程强绑定，可以直接在 Saga 的请求完成分支里完成状态比对，无需依赖组件层的逻辑：

function* wardFetchRoomSaga(action) {
  try {
    // 发起接口请求
    const res = yield call(api.fetchRoomDetail, action.payload);
    // 更新 Store
    yield put({ type: Actions.wardFetchRoomSuccess, payload: res.data });
    // 读取更新后的最新状态，和点击时传入的初始状态做比对
    const latestStatus = res.data.status;
    const clickTimeStatus = action.payload.initialStatus;
    const isConsistent = latestStatus === clickTimeStatus;
    console.log('状态比对结果', isConsistent);
  } catch (e) {
    // 异常处理逻辑
  }
}

触发 action 时把点击时刻的初始状态传入：

const handleClick = (event) => {
  const params = { 
    roomNo: roomNo,
    initialStatus: props.status // 把点击时刻的状态随 action 传入 Saga
  };
  retrieve(params);
};

补充说明：不要试图在 dispatch 之后立刻读取最新 Store 值，这和 Redux 单向数据流、异步中间件的设计本身是相悖的。正确的做法是将需要基于最新数据执行的逻辑，绑定到数据更新完成的时机触发，而不是在同步执行栈里硬等异步流程结束。

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