在前端开发中，使用 redux 来管理应用状态是很常见的做法。而当我们需要发起异步请求来更新这些状态时，我们常常需要自行编写一些 boilerplate 代码来处理请求的开始、成功和失败等不同情况下的状态转移和数据更新。这时，一个名为 redux-make-request 的 npm 包便能为我们提供很大的帮助。
简介
redux-make-request 是一个能够简化 redux 异步数据请求行为的 npm 包。它提供了一系列的 action 和 reducer，并自动处理异步请求的 loading 状态、success 状态和 error 状态，以及对应状态下的数据更新。使用该包，我们可以轻松地在 redux 应用中发起异步请求，减少繁琐的工作量，提高代码重用率和可读性。
安装
首先，在终端中切换到项目目录，运行以下命令：
npm install redux-make-request
或者
yarn add redux-make-request
使用方法
redux-make-request 由 action 和 reducer 组成，我们需要在 redux 应用中引入这两个部分。
Action
首先，让我们来看看 redux-make-request 中提供的 action。它们包括三个：
makeRequest：发起一个异步请求，该 action 应该在组件中被调用。processRequest：处理异步请求，该 action 应该由 reducer 调用。resetRequest：重置请求状态，将请求状态和数据清空。
在发起异步请求之前，我们需要定义一个对象，该对象包含了以下属性：
key：一个字符串，用来指示当前请求的某个数据是否已被请求。url：一个字符串，用来指示当前请求的接口地址。method：一个字符串，用来指示当前请求的 HTTP 方法，默认为 GET。body：一个对象，用来存储请求体数据。headers：一个对象，用来存储请求头。query：一个对象，用来存储查询参数。params：一个对象，用来存储 URL 参数。meta：一个对象，用来存储当前请求的元数据。
其中，key 是必须的属性。
下面是一个示例：
-- -------------------- ---- -------
-
---- --------
---- -------------
------- ------
-------- -
--------------- -------------------
--
------ -
----- --
--------- ---
--
------- -
--- ----
--
----- -
--------------- -------- ----------
--------------- ------ -----------
------------- ------- -- ---- --------
--
-在页面中，我们可以通过调用 dispatch() 方法来手动触发 makeRequest() action，从而发起请求。例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ----------- - ---- ---------------------
----- -------- - --------------
----- --------------- - -- -- -
----------------------
---- --------
---- -------------
----- -
--------------- -------- ----------
--------------- ------ -----------
------------- ------- -- ---- --------
--
----
--Reducer
在异步请求发起后，我们需要在 reducer 中监听 action，并处理异步请求的不同状态。redux-make-request 中包含了默认的 reducer，使用起来非常简单。
我们首先需要在项目中创建一个名为 reducers.js 的文件，将 redux-make-request 的 reducer 引入并加入到 rootReducer 中：
import { combineReducers } from 'redux';
import { makeRequestReducer } from 'redux-make-request';
const rootReducer = combineReducers({
makeRequest: makeRequestReducer,
});
export default rootReducer;在 reducer 中，我们仅需监听 processRequest action，并对不同请求状态对应的 state 进行处理即可。redux-make-request 中包含了三种请求状态：LOADING、SUCCESS 和 ERROR。其中，LOADING 表示正在加载，SUCCESS 表示获取数据成功，ERROR 表示获取数据失败。
下面是一个示例：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - -------------- - ---- ---------------------
----- ------------ - -
------ -
----- ---
----------- ------
------ -----
--
--
----- ------------ - ---------------
----------------- ------- - ------- -- -- --
---------
------ -
----- -------------
----------- ------
------ -----
--
---
-- --------------
------ ------- -------------示例代码
下面是一个完整的示例代码，它使用了 redux 和 redux-thunk 来进行异步请求，利用 redux-make-request 自动处理异步请求的 loading 状态、success 状态和 error 状态，以及对应状态下的数据更新。
-- -------------------- ---- -------
-- --------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------------
--
------ ------- ------
-- -----------
------ - --------------- - ---- --------
------ - ------------------ - ---- ---------------------
------ ------------ ---- -----------------
----- ----------- - -----------------
------------ -------------------
------ -------------
---
------ ------- ------------
-- ---------------
------ - ------------- - ---- ----------------
------ - -------------- - ---- ---------------------
----- ------------ - -
----- ---
----------- ------
------ -----
--
----- ------------ - ---------------
----------------- ------- - ------- -- -- --
---------
----- -------------
----------- ------
------ -----
---
-- --------------
------ ------- -------------
-- -----------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----------- - ---- ---------------------
----- -------- - -- -- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
------------------ -- -
----------------------
---- --------
---- -------------
----- -
--------------- -------- ----------
--------------- ------ -----------
------------- ------- -- ---- --------
--
----
-- ------------
----- ----------- - -- -- -
------ --------------------- -- -
---- --------------
---------------------
-------------------------
------
---
--
------ -
--
----------------- -- ----------------------
------------ -- ----------- ----------------------------
--------------------------
---
--
--
------ ------- ---------总结
redux-make-request 是一个简化 redux 异步数据请求流程的 npm 包，它可以帮助我们减少繁琐的工作量，提高代码重用率和可读性。在使用 redux-make-request 时，我们需要引入 action 和 reducer，其中，action 提供了发起、处理和重置异步请求的功能，而 reducer 负责处理异步请求的不同状态，以及对应的数据更新。通过使用 redux-make-request，我们可以轻松地在 redux 应用中发起异步请求，并处理请求的不同状态，让开发变得更加简单和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8aff