如何将 setInterval 与 redux-thunk 一起使用？答案

【问题标题】：how to use setInterval with redux-thunk?如何将 setInterval 与 redux-thunk 一起使用？
【发布时间】：2020-06-01 18:13:29
【问题描述】：

我正在使用 redux-thunk 来管理异步函数，并且我想在动作创建器中使用 setInterval，这是我的代码：

export const startLobbyPolling = () => dispatch => {
  const pollTimer = setInterval(() => {
    dispatch(fetchLobby);
  }, POLL_TIME);
  dispatch({ type: START_LOBBY_POLLING, payload: pollTimer });
};

fetchLobby 是另一个简单地获取请求并存储其数据的动作创建者。但令人惊讶的是它不起作用，因为它只在 redux 调试器工具中显示 START_LOBBY_POLLING 操作，之后什么也没有发生。如果知道如何将 setInterval 与 redux 一起使用，我将不胜感激。

【问题讨论】：

POLL_TIME 的价值是什么？
它是一个常数值 5000
fetchLobby 函数中有什么内容？
export const fetchLobby = () => async dispatch => { const response = await tortuga.get('/lobby/my-lobby'); const data = response.data; dispatch({ type: FETCH_LOBBY, payload: data }); };
tortuga 也是 axios 实例，其 baseURL 没有其他配置

标签： javascript reactjs redux setinterval redux-thunk

【解决方案1】：

我建议不要使用 redux 作为投票管理器。

相反，您应该有一个组件/容器来为您做这件事。原因是，当组件被卸载时，您的轮询也将被正确取消

const PollContainer = ({ fetchLoby, children }) => {
   useEffect(() => {
      const ptr = setInterval(fetchLoby, POLL_TIME)
      return () => clearInterval(ptr)
   }, [fetchLoby])

   return children
}

您现在可以使用 PollContainer，只要它已挂载，它将保持 fetchLoby。

【讨论】：

谢谢，这似乎是一个更好的方法，我不知道

【解决方案2】：

似乎我应该调用该函数，而不仅仅是将它作为参数传递给调度 dispatch(fetchLobby); --> dispatch(fetchLobby()); 现在可以使用了

【讨论】：

【解决方案3】：

setInterval 与 redux-thunk 一起使用并没有什么特别之处。它应该像在其他任何地方一样工作。您需要查看setInterval中已经使用的回调函数。

【讨论】：

那没有回答问题，因为他似乎想进行轮询，使用 setInterval 是有意义的...
是的，我有点错过了阅读变量名的机会。现在更新。