前言
reduxr-async 是一个基于 Redux 的异步动作处理的中间件。它使得在 Redux 应用程序中使用异步的操作更加容易。
如果你正在学习 Redux，掌握 reduxr-async 可以帮你更好的理解 Redux 中间件的概念，同时也可以提升你在实现相关项目时的效率。
在这篇文章中，我们将会介绍 reduxr-async 的使用方法，让你快速掌握它的使用。
安装
首先，在你的项目中安装 reduxr-async：
--- ------- ------------ ------
理解异步操作
在 Redux 应用程序中，每个操作都必须是同步的。然而，在应用程序中，我们必须处理大量的异步操作，如从服务器获取数据。针对这种情况，可以使用 reduxr-async 解决。
我们可以将异步操作分成三个步骤：
- 发送一个异步请求（例如，从服务器中获取数据）
- 请求结束后，将数据返回到 reducer 中
- 在 reducer 中更新 state
reduxr-async 允许我们在这三个步骤中的任何一步中执行异步操作，并预定义了一些 action 类型和 reducer，使异步操作更加容易实现。
使用 reduxr-async
要使用 reduxr-async，需要修改 store 的创建方式，将异步操作处理中间件添加到中间件列表中。
我们可以使用 applyMiddleware() 方法来添加中间件。
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -------------
------ - --------------- - ---- ---------------
----- ----- - ------------
------------
---------------------- ----------------
--在上面的代码中，我们通过 applyMiddleware() 方法将 reduxr-async 中间件添加到中间件列表中。我们还添加了 thunk middleware，它可以像 reduxr-async 一样处理异步 action。
现在，我们可以创建 reduxr-async 中的异步操作。它们通常称为“action creators”。
------ - ----------------- - ---- ---------------
------ ----- --------- - ------------------------------- -- -- -
------ ------------------
-------------- -- -----------------
---在上面的代码中，我们创建了一个名为 fetchData 的异步操作。它返回一个 action，其中 type 为 FETCH_DATA，对应 reducer 将会用到。对于异步操作，reducer 会处理四种情况。
- 请求开始（START）
- 请求成功（SUCCESS）
- 请求失败（ERROR）
- 请求取消（CANCEL）
我们可以为每个请求添加一个函数，处理它们各自的情况。
------ - ------------- - ---- ----------------
------ - ------------- - ---- ---------------
----- -------- - -
----------- ------- -- -
-- ----
------ ------
--
----------------- ------- -- -
-- ----
------ ------
--
------------------- ------- ------- -- -
-- ----
----- - ---- - - ---------------
------ - --------- ---- --
--
----------------- ------- -- -
-- ----
------ ------
--
------------------ ------- -- -
-- ----
------ ------
-
--
------ ----- ----------- - --------------------------- -------------------------------- ----在上面的代码中，我们添加了一个名为 dataReducer 的 reducer。该 reducer 添加了对 FETCH_DATA 的处理，并使用『...asyncReducers('FETCH_DATA')』引入异步 action 处理器。
异步操作处理器内包含了 FETCH_DATA_START、FETCH_DATA_SUCCESS、FETCH_DATA_ERROR 和 FETCH_DATA_CANCEL 的 reducer 处理器。当异步操作完成时，reducer 会根据状态类型返回一个新的 state。
我们可以通过以下方法将 reducer 加入 store。
------ - --------------- - ---- -------- ------ - ----------- - ---- ------------------ ----- ----------- - ----------------- ----- ------------ --- ------ ------- ------------
在上面的代码中，我们将 dataReducer 添加到 rootReducer 中。
现在，我们只需调用 fetchData 来开始异步操作。结果将根据我们在 reducer 中定义的状态类型返回不同的 state。
------ - --------- - ---- ----------------- ----------------------------
示例代码
下面是一个完整的示例代码：
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----------------- - ---- ---------------
----- --------- - ------------------------------- -- -- -
------ ------------------
-------------- -- -----------------
---
----- -------- - -
----------- ------- -- -
------ ------
--
----------------- ------- -- -
------ ------
--
------------------- ------- ------- -- -
----- - ---- - - ---------------
------ - --------- ---- --
--
----------------- ------- -- -
------ ------
--
------------------ ------- -- -
------ ------
-
--
----- ----------- - --------------------------- -------------------------------- ----
------ ------- -------- ----- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
------------ -- -
----------------------
-- ------------
-- -------------- -
------ --------------------
-
-- ------------ -
------ ----------- -------------------
-
------ -
----
--------------------- -- -
--- ------------------------------
---
-----
--
-上面的代码将会从服务器中获取数据并显示在页面上。
总结
reduxr-async 是一个方便实现异步操作的 npm 包。使用它可以快速并容易地处理异步操作。通过添加 reduxr-async 中间件，我们可以很容易地定义异步操作。reducer 会根据状态类型返回一个新的状态，并将它们更新到 Redux store 中。
希望这篇文章能对你理解 reduxr-async 的使用方法有所帮助。对于没有尝试过使用的朋友来说，可以为你的 next.js、React、Vue 项目提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700fe361a36e0bce8d3d