简介
redux-wait-actions 是一个方便的 redux middleware，可以在 redux 的 action 中添加异步等待时间，以便更好地控制 redux 中的异步操作。它支持直接使用 Promise 和 async/await。
本文将介绍如何在前端项目中使用 redux-wait-actions，包括：
- 安装和引入 redux-wait-actions
- 在 redux 中配置 middleware
- 在 action 中使用 redux-wait-actions
其中，我们将以一个使用 React 和 Redux 构建的 todo list 应用为例进行演示。
安装和引入 redux-wait-actions
我们可以使用 npm 快速安装 redux-wait-actions：
npm install redux-wait-actions
然后，在代码中引入 redux-wait-actions：
import { waitMiddleware } from 'redux-wait-actions';在 redux 中配置 middleware
为了使用 redux-wait-actions，我们需要在 redux 中配置 middleware。在 todo list 应用的代码中，我们可以这样增加中间件：
import { applyMiddleware, createStore } from 'redux';
import { waitMiddleware } from 'redux-wait-actions';
import rootReducers from './reducers';
const store = createStore(
rootReducers,
applyMiddleware(waitMiddleware)
);在 action 中使用 redux-wait-actions
接下来，我们将演示如何在 action 中使用 redux-wait-actions。假设我们需要在用户点击 “add todo” 按钮时，等待 1 秒后再执行添加操作。我们可以这样修改 addTodo action：
-- -------------------- ---- -------
-- ---
------ ----- ------- - ------ -- --
----- ---------------------
----
---
-- -- ------------------
------ ----- ------- - ------ -- --
----- ---------------------
----- ----- -- ----- ---- --
------ ---------- --------- -- -
----- --- --------------- -- ------------------- ------- -- -- - -
---------- ----- --------------------- ---- ---
-
---在上面的代码中，我们添加了两个新的属性：wait 和 async。
- wait：表示等待的毫秒数。
- async：一个 async/await 函数，必须返回一个 Promise。在这个例子中，我们等待 1 秒后再执行添加操作。
这样，当用户点击 “add todo” 按钮时，相应的添加操作将被挂起，并在 1 秒后再执行。
示例代码
最后，我们提供完整可运行的代码如下：
-- -------------------- ---- -------
-- --------
------ - ---------------- ----------- - ---- --------
------ - -------------- - ---- ---------------------
------ ------------ ---- -------------
----- ----- - ------------
-------------
-------------------------------
--
------ ------- ------
-- ----------
------ ----------- ---- ----------------
------ ----- ------- - ------ -- --
----- ---------------------
----- ----- -- ----- ---- --
------ ---------- --------- -- -
----- --- --------------- -- ------------------- ------- -- -- - -
---------- ----- --------------------- ---- ---
-
---
------ ----- ---------- - ---- -- --
----- ------------------------
--
---
------ ----- ------------------- - -------- -- --
----- ----------------------------------
------
---
-- --------------
----- ----------- - -
--------- -----------
------------ --------------
---------------------- -----------------------
--
------ ------- ------------
-- -----------
------ - --------------- - ---- --------
------ ----------- ---- ----------------
----- ----- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-
--- ----------
----- ------------
---------- -----
-
--
---- ------------------------
------ -------------- --
-------- --- ----------
- --------- ---------- ----------------
- ----
--
--------
------ ------
-
--
----- ---------------- - ------ - ----------- ------- -- -
------ ------------- -
---- ----------------------------------
------ --------------
--------
------ ------
-
--
----- ------------ - -----------------
------
----------------
---
------ ------- -------------
-- ------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- ----------- ------------------- - ---- ------------
----- --- - -- --------- ------ ---------------- -- -- -
--- ------
------ -
-----
----- ----------- -- -
-------------------
-- --------------------- -
-------
-
-------------------------------
----------- - ---
---
------ --------- -- ----- - -------
------- --------------
--- ----
---------
-------
----
--------------- --
--- -------------
----------- -- ------------------------------
-------- --------------- -------------- - -------------- - ------ ---
-----------
-----
--
-----
-----
------- ----------- -- -------------------------------------------
---- ---
---------
------- ----------- -- -------------------------------------------------
---- ---------
---------
------- ----------- -- ----------------------------------------------
---- ------
---------
------
------
--
--
----- --------------- - ----- -- -
------ -
------ ------------
----------------- ----------------------
-
--
------ ------- ------------------------------完整代码也可以在下面的 GitHub 仓库中找到：
https://github.com/hanrea/react-redux-todo-list/tree/redux-wait-actions
总结
在本文中，我们学习了如何使用 redux-wait-actions，在 action 中添加等待时间，以便更好地控制 redux 中的异步操作。我们介绍了 redux-wait-actions 的基本概念，安装和引入，以及在 action 中使用的详细步骤。通过学习本文，我们可以更好地理解和使用 redux-wait-actions，从而更好地控制 redux 中的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ff81e8991b448e199b