how can i stop the setInterval() timer i created, i have used clearInvterval but it's not working

Viewed 21

I'm finding it really difficult to stop my setInterval() using clearInterval() in my react app. My setInterval() was to dispatch my reducer from redux at an interval of 1 second. Below are my react and redux codes. Please, what could be the problem?

  let countSession = useSelector((state)=>state.timer.minutes);
  let countDown = useSelector((state)=>state.timer.seconds);
  const initialSec = countDown=== 60 ? '0':countDown;
  const seconds = initialSec < 10 ? '0' + initialSec: initialSec
  const dispatch = useDispatch();

  const a = ()=>{
    setInterval(handleDispatch,1000);
  }
  const handleDispatch =()=>{
    dispatch(countSeconds());
  } 
  const b =  ()=>{
    clearInterval(handleDispatch)
  }
  return (
    <Compo className="App">
      <div className='label'>25 + 5 Clock</div>
      <TimerApp/>
      <br/> 
      <Compo className='timerBox' >
        <div className='count'>Session</div>
        <div className='count'>{countSession}:{seconds}</div>
      </Compo>
      <div className='playPause' id='playPause' onClick={()=>{a()}}>
        <RiPlayFill/>
        <MdPause/>
      </div>
      <button onClick={()=>{b()}}>Stop</button>
    </Compo>
  );
}

Redux

countSeconds:(state)=>{
            state.seconds -=1;
            if(state.seconds < 0){
                state.minutes -=1;
                state.seconds = 59;
            }
        }
0 Answers
Related