Настройка React / Redux / Backend для получения постепенного прогресса

Question

Допустим, у меня есть интерфейс React / Redux, который отправляет форму.

При получении формы моя внутренняя часть будет последовательно выполнять скрипт для десяти файлов.Я хочу показать прогресс на внешнем интерфейсе, как это происходит (т. Е. Количество файлов завершено в настоящее время).

ОП этот вопрос устанавливает редуктор, который обновляет состояние как число.Как бы мы интегрировались с бэкэндом?Можно ли обойтись без использования сокетов?

Answer 1

Лучший способ, я думаю, - это использовать websocket, в котором бэкэнд будет публиковать событие progress, а интерфейс подписываться на него даже.Однако, поскольку вы предпочитаете не использовать веб-сокет, я могу думать только о том, чтобы использовать интервальный опрос.

Внутри вашего действия с избыточностью вы можете сделать что-то вроде этого:

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
   }
}