使用 Redux 创建倒数计时器

Question

我想创建一个计时器，指示在给定的持续时间值内显示一条闪现消息（“已保存！”），例如30 秒。

我对如何使用 Redux 实现这一点的想法是这样的：

倒计时开始。
每秒，TIMER_TICK 动作类型被发送到减速器。
当达到持续时间值（以秒为单位）时，应清除 timer。

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

但我被困在将检查计数值是否达到的逻辑放在哪里（在本例中为 30）。任何建议 how/where 我解决这个问题？

Answer 1

是这样的吗？

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

使用 Redux 创建倒数计时器

Creating a countdown timer with Redux

javascript

redux

redux-thunk