javascript - 如何设计需要每秒更换的 reducer ？

我正在尝试制作一个计时器应用程序，每个计时器都有一个递减的时间，直到它完成（变为0）并播放声音：


每个计时器的初始状态都有一个名为passing的属性：

const INITIAL_STATE = {
  ...
  passing: false
};

对于每个计时器，如果其passing为true，则我每秒调用pass action来减少其时间：

componentDidUpdate(){
  if(timer.passing){
     this.pass(timer.id)
  }
}

pass = (id)=>{
  setInterval(()=>{
    this.props.pass(id)
  }, 1000)
};

我的reducer：

case PASS:
  let newTimers = [];
  state.timers.map(timer=>{
    if(timer.id === action.payload){
      const {hours, minutes, seconds} = timer.time;
      if(hours < 1 && minutes < 1 && seconds < 1){
         timer.passing = false;
         timer.alarm = true;
      }else if(timer.time.seconds === 0){
         if(timer.time.minutes === 0){
            timer.time.hours--;
            timer.time.minutes = 59;
            timer.time.seconds = 59;
         }else{
            timer.time.minutes--;
            timer.time.seconds = 59;
         }
      }else{
         timer.time.seconds--;
      }
    }
    newTimers.push(timer);
  });
  return {...state, timers: newTimers};

当我只启动一个计时器时，这种方法是可行的，但是一旦启动多个计时器，它们中只有一个起作用，因为同时调用了多个pass actions。

那么，如何使我的减速器进行自我更新，而又不必每秒调用动作？


  请记住，没有特定的目标时间，例如下午4点等，因为
  用户可以点击“停止”按钮并按住计时器几个小时，然后
  点击开始（继续）。因此获取当前时间并计算剩余时间
  目标时间无法完成。

最佳答案

您不需要创建减速器来每秒更改，您需要在组件的时间间隔内分派适当的操作。

关于javascript - 如何设计需要每秒更换的 reducer ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54302422/