React/Redux/Backend set-up to get realtime incremental progress

Question

Let's say I have React/Redux frontend that submits a form.

On receiving the form, my backend portion will then execute a script on ten files sequentially. I want to show the incremental progress on the frontend as this happens (i.e. Number of files completed currently).

The OP of this question set up a reducer that updates the state as a number. How would we integrate with the backend? Is it possible to do without using sockets?

Answer 1

The best way I think is to use websocket which the backend will publish the progress event and the frontend subscribe to that even. However, as you prefer not using websocket, the only way I can think of is to use interval polling.

Inside your redux action, you can do something like this:

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