本文章将介绍如何使用 @pierrebleroux/redux-api-middleware 这个 npm 包来管理 Redux 应用的异步网络请求，本文章旨在为前端开发者提供详细的学习、指导和示例代码。
什么是 Redux API Middleware
@pierrebleroux/redux-api-middleware 是一个针对 Redux 应用的 API 中间件。它可以帮助前端开发者更加简单地管理应用的网络请求，包含了易于使用的 action creators，用于发送与处理网络请求数据。
如何使用 Redux API Middleware
安装
首先，需要使用 npm 或者 yarn 来安装 redux-api-middleware （推荐使用 yarn）。
yarn add @pierrebleroux/redux-api-middleware
初始化
在创建 store 时，需要将 apiMiddleware 作为参数传递给 applyMiddleware 函数，并包装 createStore 的调用:
import { createStore, applyMiddleware } from 'redux';
import apiMiddleware from '@pierrebleroux/redux-api-middleware';
import { rootReducer } from './reducers';
const store = createStore(rootReducer, applyMiddleware(apiMiddleware));创建 Action Creators
在开始使用 redux-api-middleware 之前，需要准备 action creators ，这些 action creators 用于触发 API 请求并更新 store。
这里的 action creators 主要分为 3 类：
- 发起请求
- 处理成功的响应
- 处理失败的响应
例如：
-- -------------------- ---- -------
------ - ---- - ---- ----------------------
------ ----- --------- - -- -- --
------- -
--------- --------------------
------- ----- ----------
------ -
---------- -- ----
-
----- ---------- -- ----
-------- -------- ------ ---- -- -
------ -------------------- -- -
------ ---------- -----
--
--
--
-
----- ---------- -- ----
-------- -------- ------ ---- -- -
------ ------------------- -- -
------ ------- ------------
--
--
--
--
--
---这个 action creator 返回一个对象，这个对象非常重要，其中包含了一个 RSAA (Redux Standard Api-calling Action) 标识，用于指定请求的处理方式，同时也包含了 endpoint、method 和 types 等信息。
发送 Action
现在已经定义好了 action creator，我们可以通过调用 dispatch(fetchData()) 来发送 action。
store.dispatch(fetchData())
成功响应的数据将会被层层处理，最后被存入 store 对象的 response 属性中。失败的响应数据将被存入 store 对象的 error 属性中。
使用 Response Data
如果一个请求已经成功处理，并将响应数据存入 store 中，应用的其他部分就可以访问这些数据。Redux 规范要求，将数据通过组合 reducer 的方式来存储，因此可以从 store 中获取相应的数据。
例如：
const mapStateToProps = (state) => ({
data: state.response.data,
})Redux API Middleware 的高级用法
除了最基本的用法之外， redux-api-middleware 还支持一些具有高级功能的特性，例如：错误回退，重试以及缓存等。
-- -------------------- ---- -------
------ - ----- --------- - ---- -----------------------
------ ----- --------- - -- -- --
------- -
--------- ------------
------- ------
------ -
----------
-
----- ----------
-------- -------- ------ ---- -- -
------ -------------------- -- -
------ - --------- ---- --
---
--
--
-
----- ----------
----- -------- ------ ---- -- -
-------------------- ------- ------ -----
------ - ------- ----------- ----------- -------------- --
--
-------- -------- ------ ---- -- -
------ -------------------- -- -
------ - --------- ---- --
---
--
--
--
--
---
-- -------------
------ - --------- - ---- -----------------------
------ ----- --------------- - -- -- ---- -- ------ -- -
-- ------------ --- ---------- -
----------------------- -------- --------
-
-------------
--这个示例包含了错误回退的机制。当请求失败时，该示例将 log 输出错误状态码。使用方法与基础用法相同，不同之处在于 'FAILURE' 类型的元数据将输出 log。
总结
Redux API Middleware 是一个优秀的 Redux 中间件包，可用于管理网络请求。在本文中，我们介绍了如何使用它来简化应用程序中的异步请求，以及高级用法。通过使用 Redux API Middleware，我们可以更加精确地管理我们应用中的异步操作。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587f81e8991b448d5c1e