Question

我的中间件看起来像

＆＃13;

export const timerMiddleware = store => next => action => {
  if (action.type === "START_TIMER") {
    // console.log("timer");
    action.interval = setInterval(
      () => store.dispatch({ type: "TICK", currentTime: Date.now() }),
      1000
    );
    debugger;
  } else if (action.type === "STOP_TIMER") {
    //console.log(store);
    debugger;
    console.log(action.interval);
    clearInterval(action.interval);
  }
  next(action);
};

＆＃13;

在启动计时器上，时钟正在滴答作响，但在stop_timer上，我松开了setInterval的引用。所以无法停止时钟。我在这里失踪了什么。 https://codesandbox.io/s/xrmnwr7y8z

Answer 1

您可能不想改变动作。每次进入中间件时，您都会有一个新动作，因此您的间隔将会丢失。 action.interval也不符合flux标准动作模式。你可以在中间件之外放一些，比如

'background-color':'white'

然后去

let interval;
const timerMiddleware ...

然后是什么时候清除它

interval = setInterval // interval will now be a number which is a reference to your interval

但是如果你想要更加不可变，你可以访问中间件中的商店

clearInterval(interval)

然后在您的reducer中，您可以将其存储在const interval = setInterval(...) store.dispatch({ type: "SET_YOUR_INTERVAL" payload: interval });或其他

下

state.someInterval

然后当您返回到中间件并且操作是“STOP_TIMER”时，您可以使用store.getState（）来获取对当前状态的引用。然后你可以去case "SET_YOUR_INTERVAL": return { someInterval: action.payload }

然后store.dispatch你可以调度一个动作来清理状态区间

有关setTimeout和setInterval的返回值的更多信息：setInterval/setTimeout return value

从redux中间件清除间隔

1 个答案: