Update State in redux in background after every few minutes in ReactJS

Question

Is there a way to run a background process which would run a function every few minutes to call backend API and update the redux state. It is a large React App which has lot of components. This affects globally so I am looking for just a background process to do this.

I am looking if someone has done this before or used a ReactJS library to do it.

Tried using it via `setInterval`? Similar example: https://github.com/ccPrathap/sai-eog-react-assessment/blob/master/src/components/DroneVisualization.js#L19 — Prathap Reddy, Aug 06 '20 at 13:43
@PrathapReddy Like I mentioned it is a big react component. What if the user is on a different page. Can you expand on your answer? — Learn AspNet, Aug 06 '20 at 13:49
You can have all such calls in you main file like `App.js`. Will that be an issue in you case? — Prathap Reddy, Aug 06 '20 at 13:50

Not the best answer · Answer 1 · 2020-08-06T13:59:53.207

4

Create a component like BackgroundTask and put it in your page with a useEffect inside :

useEffect(() => {
  const timer = setInterval(() => {
    // call you action here
  }, 5000);
  return () => clearInterval(timer)
}, [])

And add it to the App component :

export default App => (
      <Provider store={store}>
        <BackgroundTask/>
        ... rest of your app ...
     </Provider>
);

edited Aug 06 '20 at 13:59

answered Aug 06 '20 at 13:44

Not the best answer

301
1
4

So I will to put this BackgroundTask in every component? What if the user is on a different page. Can you expand on your answer? – Learn AspNet Aug 06 '20 at 13:48
No just inside your App (Main) component – Not the best answer Aug 06 '20 at 13:57
@NotTheBestAnswer, Will the clean up (`return () => clearInterval(timer)`) really work? Because of empty dependencies `[]`, the effect run only for the first time after component has rendered. – Prathap Reddy Aug 06 '20 at 13:59
2

@PrathapReddy yes it should work https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks – Not the best answer Aug 06 '20 at 14:02

score 0 · Accepted Answer · answered Aug 06 '20 at 14:03

You can achieve this by using setTimeout() function.

All you have to do is, inside your main root component, let's assume your root component is App.js. you can do the following.

import React, { useEffect } from 'react';

const App = () => {
  
  useEffect(() => {
    const timer = setTimeout(() => {
      /* Your API call */
    }, 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      /* allYourComponents */
    </div>
  );
};

export default App;

Update State in redux in background after every few minutes in ReactJS

2 Answers2