什么是 redux-api-middleware
redux-api-middleware 是一个基于 Redux 的中间件，用于处理异步 API 请求。由于 Redux 本身只支持同步操作，因此需要中间件来处理异步请求。而原生 Redux 中间件处理异步需要写大量冗余且不易维护的代码，因此出现了 redux-api-middleware，可以大大简化异步请求的处理。npm 包 @edy/redux-api-middleware 则是 redux-api-middleware 的一个轻量实现。
@edy/redux-api-middleware 使用教程
安装
首先需要安装 @edy/redux-api-middleware：
npm install @edy/redux-api-middleware --save
初始化
然后，在创建 redux store 时加入中间件：
import { createStore, applyMiddleware } from 'redux';
import apiMiddleware from '@edy/redux-api-middleware';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(apiMiddleware));使用
在使用前，首先需要定义一个 API 请求的 action 类型，例如：
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST'; const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS'; const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';
然后，在 action 中使用 @edy/redux-api-middleware 提供的 createAction 函数来创建 action：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------------
------ ----- ---------- - -- -- -
------ --------------
--------- --------------------------------
------ -
--------------------
--------------------
--------------------
--
------- ------
---
--其中，endpoint 表示 API 路径，types 表示请求的三个阶段的 action 类型，method 表示请求的 HTTP 方法。
在 reducer 中，可以根据 action 类型来处理相应的 action：
-- -------------------- ---- -------
------ -
--------------------
--------------------
--------------------
- ---- ------------
----- ------------ - -
------ ---
-------- ------
------ -----
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- -----
--
---- --------------------
------ -
---------
-------- ------
------ -----
------ ---------------
--
---- --------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--在组件中，通过 dispatch 发送 action：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- ------------
----- ----- - -- -- -
----- -------- - --------------
----- - -------- ------ ----- - - ----------------- -- --------------------
------------ -- -
-----------------------
-- ------------
------ -
-----
-------- -- ----------------------
------ -- -------------------
--------------- -- -
---- -------------------------------
---
------
--
--
------ ------- ------以上就是使用 @edy/redux-api-middleware 的基本流程。需要注意的是，如果 API 请求需要带参数，则可以在 createAction 中使用 payload 属性传入参数，例如：
-- -------------------- ---- -------
------ ----- ---------- - -------- -- -
------ --------------
--------- --------------------------------
------ -
--------------------
--------------------
--------------------
--
------- ------
-------- - ------ --
---
--同时，@edy/redux-api-middleware 还提供了很多其他的配置项，例如 headers、body 等，可以根据需求自行查看文档进行配置。
总结
@edy/redux-api-middleware 是处理异步请求的好工具，能够大大简化异步请求的处理过程，同时也非常易于维护和拓展。在实际开发中，我们可以根据需要自行选择相应的操作，灵活运用该工具，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fa681e8991b448dcf99