在反應中使用 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

兩個中間件還具有取消此類計時器的功能