在 React 应用中，为了管理应用的状态，我们会使用 Redux 这一流行的状态管理库。Redux 在很多方面给我们带来了诸多优势，但是在异步操作处理上就稍显吃力了。为了解决这个问题，我们可以使用像 redux-thunk、redux-saga、redux-observable 这样的中间件。在本篇文章中，我们将介绍另外一个库——redux-wait。
redux-wait 提供的主要功能是等待异步操作完成之后再更新 Redux 状态，防止 UI 展示过程中展示错误的状态。它使用了 Promise 对象来管理异步操作，通过 tap([])，让后续的 action 等待异步操作完成后才进行更新。
安装
要使用 redux-wait 需要先安装它，可以运行以下命令：
npm install --save-dev redux-wait
或者使用 yarn：
yarn add -D redux-wait
配置
安装了 redux-wait 之后，我们需要在 Redux store 中进行配置。我们需要调用 applyMiddleware，将 redux-wait 中间件添加到 Redux store 中。以下是一个示例：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ -------------- ---- ------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- --------------- -- ------ ------- ------
这里我们同时也使用了 redux-thunk 库，在 applyMiddleware 中传入 thunk 参数。
使用
我们可以在 action 中使用 wait 函数，等待异步操作的结果。以下是使用 redux-wait 的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------------------
------ ----- -------- - -- -- ----- ---------- --------- - ---- -- -- -
--- -
----- - ------ ----- --------- - - -----------
-- ------ -- ------------------ - -- ----- -----
-------
-
-- ---------------------- - -- ----- ----------
------ ------------------
-
----- ------- - -------------------
--------- -- ------------
----------
----- ------------
----- --------------
---
----- ------ - ----- -------- -- --------
----------
----- --------------------
-------- -------
--
- ----- ------- -
----------
----- --------------------
-------- ------
---
-
--在上面的代码中，我们使用 Redux action 创建函数来获取博客文章列表。我们首先从 Redux store 中获取当前保存的文章列表，如果已经存在文章列表并且不是处于获取状态，就不需要重新获取了，直接返回。如果正在获取文章列表，则只需要等待异步操作完成。如果没有获取文章列表，则创建一个 Promise 对象来获取文章列表，并且使用 wait 函数将 Promise 对象包装起来，等待异步请求结束后再更新状态。
结论
我们已经在本文中了解了 redux-wait 的基本使用方法。redux-wait 工作起来非常简单且方便，而且可以有效地避免展示错误的状态。在使用 redux-wait 过程中，我们可以使用 action 创建函数的方式来等待异步请求结果的返回。同时，我们还介绍了 redux-thunk 的同时使用方法，这使得我们可以方便地进行复杂的数据逻辑处理，包括异步请求和条件判断等等。
通过本文，我们相信读者已经掌握了 redux-wait 的使用方法，也理解了 redux-wait 在 Redux 应用中协助处理异步数据流的重要作用。希望读者能够通过本文的介绍，更好地利用 redux-wait 解决 React 应用中的异步流程问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8dd4