javascript - 如何设计一个每秒都需要变化的 reducer ？

Question

我正在尝试制作一个计时器应用程序，每个计时器都有一个递减的时间，直到它结束(变为 0)并播放声音:

每个定时器的初始状态都有一个属性，名为passing :

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

对于每个计时器，如果它是 passing是真的，每一秒我都调用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被同时调用。

那么我怎样才能让我的 reducer self 更新，而无需每秒调用操作？

remember there is no specific target time like 4 pm, etc. because the user may tap on stop button and hold the timer for some hours and then tap on start(continue). so getting the current time and calculate the remaining time to the target time can't be done.

Answer 1

您不需要创建一个 reducer 来每秒更改一次，您需要在组件的时间间隔内分派(dispatch)适当的操作。