使用 Redux 创建倒数计时器

Question

I want to create a timer that will indicate a flash message (“Saved!”) to be shown for a given duration value, eg 30 seconds.

My thinking how to accomplish this with Redux goes like this:

1. The countdown is fired.
2. Every second, the TIMER_TICK action type is sent to the reducer.
3. When the duration value (in seconds) is reached, the timer should be cleared.

const initialState = {
  count: 0,
  timerOn: false,
}

const tick = () => ({ type: TIMER_TICK });

let timer = null;

export const startFlashMessageTimer = () => dispatch => {
  clearInterval(timer);
  timer = setInterval(() => dispatch(tick()), 1000);
}

But I'm stuck at where to put the logic that checks if the count value is reached (30 in this case). Any suggestion how/where I solve this?

Answer 1

Something like this?

export const startFlashMessageTimer = () => (dispatch, getState) => {
  let timer = null;
  clearInterval(timer);
  timer = setInterval(() => {
      dispatch(tick());
      const { count } = getState();
      if (count >= 5) { clearInterval(timer) }
  }, 1000);
}