Redux 中如何实现数据轮询？
在Web应用程序中，数据轮询是一种非常普遍的技术。它可以定期向服务器发送请求并获取最新数据，这对于需要实时更新数据的应用程序非常重要。Redux是一个非常受欢迎的前端状态管理工具，它提供了一个统一的存储和管理应用程序状态的方式。在这篇文章中，我们将探讨如何在Redux中实现数据轮询。
实现方式
Redux本身不提供任何数据轮询的支持，但是我们可以使用Redux中间件来实现它。Redux中间件是一个功能强大的工具，它可以捕捉每个Redux中的操作并对其进行转换或重新处理。
首先，我们需要安装一个Redux中间件，它可以让我们很容易地实现数据轮询。这个中间件叫做redux-saga。
安装redux-saga：
npm install redux-saga # 或者 yarn add redux-saga
接下来，我们需要编写一个Redux Saga（redux-saga的工作原理是将异步调用转换为Generator函数）。这个Saga将每隔一段时间向服务器发送一个数据请求。我们可以使用redux-saga的put和call方法来实现这个目的。
示例代码：
-- -------------------- ---- -------
------ - ---- ----- --------- - ---- ---------------------
-- --------
-------- ----------- -
------ ---------------------------------
-------------- -- ----------------
------------ -- -
----- ------
---
-
-- -------- ----
--------- -------------- -
--- -
----- ------ -
----- ---- - ----- ----------------
----- ----- ----- --------------------- ---- ---
----- ------------ -- -----
-
- ----- ------- -
----- ----- ----- ------------------- ----- ---
-
-
-- --------- --------------- ----
--------- ------------------- -
----- -------------------------- --------------
-
-- ------ ----
------ ------- --------- ---------- -
----- -----
--------------------
---
-在上面的代码中，我们定义了一个fetchData函数，它使用fetch API向服务器发送请求并获取最新数据。我们还定义了一个startPolling函数。这个函数将不断地调用fetchData函数并使用put方法将获取的数据发送到Redux Store。最后，我们使用delay方法让Saga暂停5秒钟，然后再次发送请求。我们也定义了一个watchStartPolling函数，它使用takeEvery方法监控START_POLLING action，并调用startPolling函数。
最后，在我们的Redux Store中，我们需要调用START_POLLING action来启动这个Saga。我们可以在组件的componentDidMount方法中调用一个action creator，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------ - ---- ------------
----- --- ------- --------- -
------------------- -
--------------------------
-
-------- -
-- ---
-
-
------ ------- --------
-----
- ------------ -
-------总结
数据轮询在Web应用程序中是一种非常普遍的技术，它可以让我们定期向服务器发送请求并获取最新数据。在Redux中实现数据轮询可以使用Redux中间件，如redux-saga。在这篇文章中，我们编写了一个Saga，使用了redux-saga的put和call方法实现了数据轮询，并使用了takeEvery方法监听START_POLLING action。最后，在我们的Redux Store中调用START_POLLING action启动了这个Saga。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492675048841e9894034117