React & Redux 中 AJAX 轮询的实用技巧

2023-09-07 13:06:13

在当今这个数据驱动的时代，实时数据显得尤为重要。无论是构建动态的仪表盘、即时通讯应用程序，还是任何需要快速响应的数据驱动的应用程序，我们都离不开实时数据。

然而，并非所有 API 都支持流式事件。在这种情况下，AJAX 轮询就成为了一种常用的曲线救国方法。通过定期向服务器发送请求来获取最新数据，我们可以实现数据的实时更新。

在 React 和 Redux 中使用 AJAX 轮询是一种常见且有效的做法。React 负责构建用户界面，Redux 负责管理应用程序状态。两者结合使用，可以轻松地实现数据的实时更新。

使用 AJAX 轮询的步骤

定义轮询间隔 ：确定轮询服务器的频率，这取决于应用程序的需求和数据更新的频率。
创建轮询函数 ：编写一个函数来执行轮询任务，该函数应包含以下步骤：
- 向服务器发送请求获取最新数据。
- 更新 Redux 中的数据状态。
- 重新渲染 React 组件以反映最新的数据。
启动轮询 ：在组件的挂载或更新生命周期中调用轮询函数以启动轮询。
停止轮询 ：在组件的卸载生命周期中停止轮询以避免不必要的资源消耗。

示例代码

// 轮询函数
const poll = () => {
  // 向服务器发送请求获取最新数据
  fetch('/api/data')
    .then(res => res.json())
    .then(data => {
      // 更新 Redux 中的数据状态
      dispatch({ type: 'UPDATE_DATA', payload: data });
    });
};

// 启动轮询
useEffect(() => {
  // 在组件挂载时启动轮询
  const interval = setInterval(poll, 5000);

  // 返回一个清理函数，在组件卸载时停止轮询
  return () => clearInterval(interval);
}, []);