How can I dispatch an action after every 5 min in reactjs

Question

I am trying to dispatch an action every after 5 min. It has to dispatch action once user is logged in. It will start dispatching action every after 5min. I tried using setInterval but the problem here is even if I am logout it keeps on dispatching action.

Here is My Code I have defined this keepAlive function inside my app.js where I have wrapped whole app into redux store. Here is isAuthenticated is boolean function. If isAuthenticated is true and API.getAcessToken is available in localstorage only then I want to dispatch action.

  function keepAlive() {
    if (
      props.isAuthenticated === true &&
      API.getAccessTokenFromLocalStorage()
    ) {
      setInterval(() => {
        props.keepTokenAlive();
      }, 100000); // 1000ms =1sec
    } else {
      return null;
    }
  }
  keepAlive();

Does this answer your question? [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — Justinas, Oct 15 '20 at 13:37

score 2 · Answer 1 · answered Oct 15 '20 at 13:40

2

Can you do this?

let to = null;

function keepAlive() {
    //Assign a reference to clear the interval
    to = setInterval(() => {
        if (
           props.isAuthenticated === true &&
           API.getAccessTokenFromLocalStorage()
        ) {
             props.keepTokenAlive();
        } else {
            // If not passing the condition, clear the interval
            clearInterval(to);
        }            
    }, 100000); // 1000ms =1sec
}

 keepAlive();

answered Oct 15 '20 at 13:40

Kalhan.Toress

21,683
8
68
92

yeah let me try this one – aditya kumar Oct 15 '20 at 13:43
This works but this starts to give me some other issue while making first dispatch . It says isAuthenticated is undefined. But it is defined in redux store in boolean type. – aditya kumar Oct 15 '20 at 13:58
Keep in mind that intervals are _paused_ when your computer goes into hibernation. Some browsers also throttle intervals when the tab is not visible/active. So "5 minutes" will not always be exactly 5 minutes. – dube Oct 15 '20 at 14:00
is there any other way to handle this refresh token ? I have added this question several times here but i did not get right answer. If you know any other way can you please help me – aditya kumar Oct 15 '20 at 14:04

score 2 · Accepted Answer · answered Oct 15 '20 at 13:57

You could create a custom React hook. There are libraries that solve this but the code involved is small and you could do so yourself.

For example, this is the source code from the use-interval NPM package:

import { useEffect, useRef } from 'react';

const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  useEffect(
    () => {
      savedCallback.current = callback;
    },
    [callback]
  );

  useEffect(
    () => {
      const handler = (...args) => savedCallback.current(...args);

      if (delay !== null) {
        const id = setInterval(handler, delay);
        return () => clearInterval(id);
      }
    },
    [delay]
  );
};

export default useInterval;

You would use it like so:

const MyComponent = () => {
  useInterval(() => {
    // your code here
  }, 5000);

  return null
}

will it work if i put condition. like in code that i have provided in my question. I mean i only want it to dispatch action only if user is authorized . — aditya kumar, Oct 15 '20 at 14:02
@adityakumar just do anything you want where `// your code here` — Emile Bergeron, Oct 15 '20 at 14:33

How can I dispatch an action after every 5 min in reactjs

2 Answers2