Question

比方说，我有提交表单的React / Redux前端。

接收到表单后，我的后端部分将依次对10个文件执行脚本。我想在前端显示这种情况下的增量进度（即当前已完成的文件数）。

this question的OP设置了一个简化器，该简化器将状态更新为数字。我们如何与后端集成？是否可以不使用套接字而做？

Answer 1

我认为最好的方法是使用websocket，后端将发布进度事件，而前端也将其订阅。但是，由于您不希望使用websocket，因此我想到的唯一方法是使用间隔轮询。

在redux动作中，您可以执行以下操作：

async doSomething = () => {
   return async (dispatch) => {
       await callApiForStart(); // call your api to start the progressing
       dispatch(startProgressing()); // tell the reducer to update the progressing

       const interval = setInterval(async () => {
          const result = await callApiToCheckProgress(); // in the backend, you can store the progress to somewhere like memory or redis or even DB.
          dispatch(increaseProgress(result)); // tell the reducer to update the progress base on result
          if (result === true) { // any condition to complete the check
              clearInterval(interval);
              dispatch(stopProgressing());
          }
       }, 1000); // my example interval is 1000, should depends on your logic
   }
}

React / Redux / Backend设置以获得实时增量进度

1 个答案: