reactjs - 如何等待 useReducer 调度更新状态？

Question

如何等待调度更新状态？我在 useReducer API 文档中没有找到任何内容，在 TypeScript 类型定义中也没有找到任何指示。

这是我尝试过但没有奏效的方法：

await new Promise<void>((resolve) => {
  dispatch({ type: DO_SOMETHING, something });
  resolve();
});

console.log(state.something); // still the old version

Answer 1

如何等待调度更新状态？

你不能。

在任何特定的渲染中，组件的状态和道具都不会改变，它们在该渲染中是恒定的。组件必须重新渲染才能看到新的 prop 和 state 值。

在您的情况下，您只能在 reducer 函数更新组件的状态并且组件重新渲染后才能访问更新的状态。

Answer 2

需要自己创建的等待状态

例如

dispatch(doSomethingAction())

const doSomeThingAction = () => {
   dispatch({type: 'LOADING'})

   // do something 
   .
   .
   .
   .
   // something has done
   dspatch({ type: SUCCESS, something });
}