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