前端开发中，使用频率最高的一个技术就是状态管理了。而 Redux 是状态管理的第一选择。在 Redux 的基础上，有一款非常方便的插件，就是 redux-polling。即使你不知道它是什么，只要看到“Polling”这个词，你就知道它的用处了。本文将向大家介绍如何使用 redux-polling 这个 npm 包。
简介
redux-polling 是一个用于轮询 API 数据，并将获取的数据存储在 Redux Store 中的轮询库。这个库能够帮助开发者轻松地管理轮询操作和数据状态。
安装
安装非常简单，只需要通过 npm 下载即可：
--- ------- ------------- ------
使用
创建 Redux Store
首先，我们需要在 Redux 中创建一个 Store。 在这里，Redux 的 Store 就相当于一个存储状态的地方。我们将使用 redux 和 redux-polling 中的 createPollingMiddleware 函数来创建 Store。
------ - ------------ --------------- - ---- -------- ------ - ----------------------- - ---- ---------------- ----- ----------------- - -------------------------- ----- ----- - -------------------- ------------------------------------
创建轮询器
接下来，我们需要创建一个轮询器来轮询 API 数据。redux-polling 允许我们设置多个轮询器以轮询多个接口。我们可以使用 polling 创建一个轮询器。
------ ----- -------- - -- -- --
----- ------------
-------- -
-------- -
--------- ------
-------- -- -- -------------------
-------------- -- -----------------
--
--
---在上面的代码中，我们向 redux 中分发了类型为“CHECK_API”的 action。这里的 polling 会将 API 的返回数据作为 payload 来调用你的 reducer。此处，interval 参数指定了每个请求之间的时间间隔，promise 参数用于发送请求并获得数据。
Hook
接下来，我们将使用 Redux 的 hook，以将轮询器添加到 React 组件中。
------ ------ - --------- - ---- --------
------ - ----------- - ---- --------------
------ - -------- - ---- ------------
------ ------- -------- ------------- -
----- -------- - --------------
------------ -- -
---------------------
-- ------------
------ -
-----
---- -- -- ----------
------
--
-示例
------ - ------------ ---------------- --------------- - ---- --------
------ - ----------------------- - ---- ----------------
------ ----------- ---- ----------------
----- ------- - -----------------
------ ------ - --- ------- -- -
------ ------------- -
---- ------------
------ -
---------
----- --------------------
------ ---------------------
---------- -------------------------
--
--------
------ ------
-
--
---
----- ----------------- - --------------------------
----- ----- - -------------------- ------------------------------------
-------- ----- -
------ -
--------- --------------
------------ --
-----------
--
-
-------------------- --- ---------------------------------
总结
本文介绍了如何在 React 和 Redux 中使用 redux-polling 进行轮询 API。本文还向大家介绍了如何创建 Store、如何创建轮询器以及如何在组件中使用 Hook。redux-polling 是一个让 Redux 更加完善的插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b4e51ab1864dac66878