如何在每次状态更改呈现之前等待异步操作完成

Question

我正在开发一个应用程序，该应用程序显示后端响应当前状态的变化而动态生成的图像。

我只希望在异步调用返回新映像后，在状态更改后重新渲染组件。

然后我想根据状态自动更新图像（例如在画布上）和其他UI-例如一些HTML。

如果我正在客户端上同步生成新图像，则可以使用（布局）效果钩子来更新画布。

我只能在后端的网络请求返回后更改状态-但我不确定这样做的最干净方法。我必须复制一整堆状态（转换为“待处理”状态），然后对其进行一些变异，将其发送到服务器，然后仅在调用返回时应用它？如果同时进行多个状态更改，可能会有些复杂。然后，我需要继续更改“待处理”状态以响应后续操作。

我想知道-React（或Redux？）中有什么可以帮助解决这个问题吗？还是我应该自己编写代码？

顺便说一句，我是React的新手。

Answer 1

您基本上是在寻找异步操作，您可以学习如何原生here或使用像redux-thunk（或redux-saga，但老实说有点复杂）之类的中间件。

基本知识适用于您需要执行3次操作的每个异步请求

1. 启动请求的动作。
2. 动作完成后的动作。
3. 请求失败时的动作。

和代码看起来像

function async makeRequest() {
  dispatch({type: 'START'})
  try {
    const res = await myRequest()
    dispatch({type: 'SUCCESS', payload: res})
  } catch (e) {
    dispatch({type: 'FAILURE', payload: e})
  }
}