Redux-timer-middleware 是一个用于 Redux 应用程序的中间件。它可以让你在 Redux 应用程序中配置定时器，并在指定时间调用 Redux action。这个库非常易于使用，并且可以使开发者在 Redux 应用程序中更加灵活地控制处理。
安装
Redux-timer-middleware 可以通过 npm 安装。你可以使用以下命令进行安装：
npm install --save redux-timer-middleware
配置
在 Redux 应用程序中使用 Redux-timer-middleware 非常简单。只需要在创建 Redux store 时，在 applyMiddleware 函数中包含 middleware 即可。以下是一个基本的示例：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- ------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ -------------------------------- -- ------ ------- ------
使用
使用 Redux-timer-middleware 非常简单。你只需要 在创建 Action 时，配置一个 meta 对象，对象里面包含 delay 和 action 两个属性。
const myAction = () => ({
type: 'MY_ACTION',
meta: {
delay: 5000, // 5 秒后执行
action: myActionWithPayload('payload')
}
});在上面的例子中，myAction 被调用时，Redux-timer-middleware 会等待 5 秒钟，并自动调用 myActionWithPayload('payload') 函数。这样你就可以在你的应用程序中轻松地启动定时器了。
实际例子
以下是一个更完整的示例，该示例使用了 React，Redux 和 Redux-timer-middleware。这个示例创建了一个带有开始和停止按钮的计时器，点击开始按钮后，计时器会自动启动，并且在 3 秒钟后触发 Redux action。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- -------------------------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------- ------- - ---- --------------
-- -- ------
----- ---------------- - -- -- --
----- --------------
----- -
------ ----- -- - ----
------- ---------------
-
---
----- --------------- - -- -- --
----- ------------
---
----- ------------- - -- -- --
----- ----------------
---
-- ----- -------
----- ------- - ------ - - ---------- ----- -- ------- -- -
------ ------------- -
---- --------------
------ - ---------- ---- --
---- -------------
------ - ---------- ----- --
---- -----------------
---------------------- ----------
------ ------
--------
------ ------
-
--
-- ----- --
----- ----- - -- ---------- ----------- --------- -- -- -
-----
-------------- - --------- - ---------------
------- -----------------------------------
------- ---------------------------------
------
--
----- --------------- - ----- -- --
---------- ---------------
---
----- ------------------ - -------- -- --
----------- -- -- -----------------------------
---------- -- -- ---------------------------
---
----- -------------- - --------
----------------
------------------
---------
-- -- -----
----- ----- - ------------
--------
--------------------------------
--
-- -- ----- --
----------------
--------- --------------
--------------- --
------------
-------------------------------
--通过上面的示例，你已经掌握了如何在 Redux 应用程序中使用 Redux-timer-middleware 了。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8cfd