redux-api-middleware 是一个用于使 Redux 应用和 API 交互的中间件。它可以帮助开发者方便地处理异步操作，例如发送请求和处理响应。本文将介绍如何使用 redux-api-middleware。
安装
首先需要使用 npm（或 yarn）安装 redux-api-middleware：
--- ------- --------------------
配置
在 Redux 应用中使用该中间件需要先对其进行配置。示例代码如下：
------ - ------------ --------------- - ---- -------- ------ - ---------------- - ---- ----------------------- ------ ----------- ---- ------------- ----- ---------- - ------------------- ----- ----- - ------------ ------------ --------------------------- --
其中，createMiddleware() 方法用于创建一个 redux-api-middleware 的实例，并将其作为中间件传递给 Redux Store。
发送请求
使用 redux-api-middleware 发送请求需要定义一个 action，示例代码如下：
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- --------- - -- -- --
------- -
--------- ------------
------- ------
------ -
-------------------
-------------------
------------------
-
-
---在这个示例中，fetchUser() 方法返回一个包含 [RSAA] 属性的对象。[RSAA] 是 redux-api-middleware 提供的一个特殊属性，用于定义 API 请求的细节。endpoint 属性表示请求的 URL，method 属性表示请求的 HTTP 方法，types 属性表示请求的不同阶段所对应的 Redux Action 类型。
处理响应
当 API 响应成功后，redux-api-middleware 会自动生成一个 action 并将其分发到 Redux Store 中。开发者可以在 Reducer 中处理该 action 和相应的数据。示例代码如下：
------ -
-------------------
-------------------
------------------
- ---- -------------------------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
---------- ----
--
---- -------------------
------ -
---------
---------- ------
----- --------------
--
---- -------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
--
------ ------- ------------在这个示例中，当收到 FETCH_USER_REQUEST 类型的 action 时，Reducer 将 isLoading 属性设置为 true。当收到 FETCH_USER_SUCCESS 类型的 action 时，Reducer 将 isLoading 属性设置为 false，同时将 user 属性设置为 action 的 payload。当收到 FETCH_USER_FAILURE 类型的 action 时，Reducer 将 isLoading 属性设置为 false，同时将 error 属性设置为 action 的 payload。
总结
redux-api-middleware 是一个方便易用的中间件，它可以帮助开发者处理 Redux 应用和 API 的交互。通过本文的学习，读者可以了解如何安装和配置 redux-api-middleware，并且可以通过示例代码掌握如何发送请求和处理响应。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/55073