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

Question

目前，我正在为每 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);
  };
}

我应该保持它在 useEffect 中吗？

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

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

Answer 1

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

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

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

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