前言
在现代 web 应用中，前端数据请求的复杂程度越来越高，因此数据管理也变得越来越重要。Redux 是一个流行的状态管理库，它的一大特点就是可以方便地管理异步 action，但是使用 Redux 进行数据请求的代码量和复杂度都比较高。为了简化 Redux 中的数据请求，我们就需要使用一个方便易用的中间件。
redux-fetch-elegant 就是一个用于简化 Redux 中数据请求的中间件，它支持多个请求同时进行、自动处理 loading 和 error 状态等常见场景，使用方便、易于维护。
安装使用
redux-fetch-elegant 可以通过 NPM 安装，使用如下指令：
npm install redux-fetch-elegant --save
安装之后，在 Redux store 的创建中，导入 reduxFetchElegant 中间件并加入 middleware 链中：
import { createStore, applyMiddleware } from 'redux';
import reduxFetchElegant from 'redux-fetch-elegant';
const store = createStore(
reducers,
applyMiddleware(reduxFetchElegant)
);之后在创建 action 时，使用 redux-fetch-elegant 提供的 createFetchAction 方法来创建带请求配置的 action 对象。
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------
-------- ----------- -
------ -------------------
---- ---------------
------- ------
------- -- -------- -- -- -
-- --------------
-- ----------- ----- ----- -- ------- --
---------- ----- -------------- -------- ---- ---
--
------ -- --------- -------- -- -- -
-- ------------
-- ----------- ----- ----- -
---------- ----- ------------- -------- ------------- ---
-- ---- -------
---------- ----- -------------- -------- ----- ---
--
------ -- ------ -------- -- -- -
-- ------------
-- ---------- ----- ----- -
---------- ----- --------------- -------- ------------- ---
-- ---- -------
---------- ----- -------------- -------- ----- ---
-
---
-上述的配置中，在 before、after 和 error 函数中，你可以自由地操作 Redux store 中的数据和触发其他 action。
示例代码
下面是一个简单的示例代码，演示如何使用 redux-fetch-elegant 处理一个请求：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------
-------- ----------- -
------ -------------------
---- ---------------
------- ------
------- -- -------- -- -- -
-- -------- ------- ---- ----
---------- ----- -------------- -------- ---- ---
--
------ -- --------- -------- -- -- -
-- -------------- ------- --
---------- ----- ------------- -------- ------------- ---
---------- ----- -------------- -------- ----- ---
--
------ -- ------ -------- -- -- -
-- ---------------- ------- --
---------- ----- --------------- -------- ------------- ---
---------- ----- -------------- -------- ----- ---
-
---
-
-------- ------------------------- -
------ ----- ---------- -- -
----- ------ - ------------
----- ------------ - ----- -----------------
-- -- ------------ - -----------------
-- -------------------- --- ----------- -
-- ----------
--------------------------------
-
--
-在上面的代码中，fetchData 返回的是一个 action 对象，它会在 dispatch 之后被 redux-fetch-elegant 处理。fetchDataAndHandleError 函数使用 async/await 对 action 进行 dispatch，并进行错误处理。
结语
通过使用 redux-fetch-elegant，我们可以在 Redux 中简化数据请求的处理，减少代码量，降低开发负担。如果你正在开发一个大型的 web 应用，并且有很多数据请求需要处理，那么你一定应该尝试使用 redux-fetch-elegant 这个库来简化你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cb6