本文介绍一个常用于 Redux 中处理异步请求的 npm 包 redux-api-middleware-actions，通过该包提供的 action 创建器，可以轻松地使用 redux-api-middleware 处理异步请求，并将请求的结果保存在 Redux 的 store 中。本文将详细介绍使用该包的步骤以及示例代码。
什么是 redux-api-middleware-actions
redux-api-middleware-actions 是一个提供 action 创建器的 npm 包，旨在简化使用 redux-api-middleware 处理异步请求的流程。redux-api-middleware-actions 的主要作用是提供一组 action 创建器，用于发起异步请求并将响应数据保存在 Redux 的 store 中。它遵循 Redux 的设计思想，将 React 应用中的数据状态保存在 store 中，使得数据状态的变更成为可预测的并可以被跟踪。
使用 redux-api-middleware-actions 的步骤
安装
首先，需要安装 redux、redux-api-middleware 和 redux-api-middleware-actions：
npm install --save redux redux-api-middleware redux-api-middleware-actions
配置 store
接着，在应用的 Redux store 中使用 redux-api-middleware 的中间件：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- - ---- -----------------------
------ ----------- ---- -------------
------ ------- -------- ---------------- -
----- ----- - ------------
------------
------------------------------
--
------ ------
-在 createStore 函数中，使用 applyMiddleware 函数将 apiMiddleware 中间件作为参数传递给 createStore 函数，以便将其与应用的 reducer 绑定在一起。这样就可以使用到 redux-api-middleware 来处理异步请求了。
使用 action 创建器
redux-api-middleware-actions 为开发者提供了一组 action 创建器，用于发起异步请求并将响应数据保存在 store 中。
例如，在获取用户列表的场景下，可以这样编写 action 创建器：
-- -------------------- ---- -------
------ -
----------------
----------------
--------------
- ---- -------------------------------
------ ----- --------- - -- -- -----------------
--------- ---------
------- --------------------
------ ---------------------- --------------------- ----------------------
-------- -
-------- -
--------------- -------------------------------
--
--
---在上面的代码中，createApiAction 函数接受一个包含以下属性的对象作为参数：
- endpoint: String，必须，发送请求的 URL。
- method: String，可选，HTTP 请求方法，例如
GET,POST,PUT等，默认为GET。 - types: Array，必须，action 类型数组，格式为 [RequestType, SuccessType, FailureType]，该数组对应着请求开始、请求成功和请求失败三个阶段，可以为每个阶段自定义对应的 action 类型。
- options: Object，可选，发送请求时的配置项，包含了 headers、body 等信息。
然后，在组件中调用该 action 创建器：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- -------------------------
------ ------- -------- ---------- -
----- -------- - --------------
----- - ------ --------- - - ----------------- -- -------------
------------ -- -
----------------------
-- ----
------ -
-----
---------- -- ------------------
----------- -- -------------- -- -
---- --------------
------------------
-------------------
------
---
------
--
-使用 useDispatch 从 Redux store 中获取 dispatch 函数，并在 useEffect 的回调函数中调用 loadUsers 函数。
等待请求完成后，Redux store 中的数据会发生更新，并将更新结果传递至对应的组件中。这样，我们就可以轻松、可预测地将数据状态存储在 Redux store 中，所有的数据变更都可以被跟踪并追溯到其源头。
示例代码
完整的示例代码可以在 redux-api-middleware-actions-example 中找到。
结论
redux-api-middleware-actions 是一个非常方便的 npm 包，它使得使用 redux-api-middleware 处理异步请求更加简单和可预测。它通过提供 action 创建器和中间件，简化了 Redux 应用的开发流程，让开发者更加专注于 React 组件的编写和 UI 的交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1d81e8991b448dabab