在反应中使用 redux-thunk 初始化单个计时器答案

【问题标题】：Initialising a single timer with redux-thunk in react在反应中使用 redux-thunk 初始化单个计时器
【发布时间】：2020-05-06 07:40:12
【问题描述】：

目前，我正在为每 0.1 秒向商店发送更新操作的计时器使用副作用：

const Timer = ({ update, score }) => {
  useEffect(() => {
    const interval = setInterval(() => {
        update()
    }, 100);
    return () => clearInterval(interval);
  })
  return (<p>{score}</p>);
}

在 incrementAsynch() 中初始化计时器的最佳位置在哪里？

function incrementAsync() {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(update());
    }, 100);
  };
}

我应该保持使用效果吗？

const Timer = ({ update, score }) => {
  useEffect(() => {
    incrementAsync()
    return () => clearInterval(interval);
  })
  return (<p>{score}</p>);
}

如果是这样，我该如何阻止它？这会创建多个计数器吗？

【问题讨论】：

标签： reactjs redux react-redux thunk

【解决方案1】：

每次您调度 incrementAsync 时都会开始一个新的间隔，但不会终止旧的间隔。因此，如果您分派 3 次，您将每秒获得 30 个更新操作。

Redux-Thunk 对于这种情况不是很好。我建议您尝试一个更适合此类问题的中间件。

最重要的是 - redux-saga - redux-observable

这两个中间件还具有取消此类计时器的功能

【讨论】：