前言
在现代的前端开发中，我们经常需要与后端进行数据交互。对于复杂的应用，为了提高效率，我们通常会采用 Redux 来管理数据流。在 Redux 中，我们可以利用 Middleware 来拦截以及处理 dispatch 的 action。这篇文章将会向您介绍一个非常有用的 NPM 包 -- redux-data-fetch-middleware。这个中间件可以帮助我们发送网络请求，并将请求的结果回传给 Reducer。
什么是 Redux Data Fetch Middleware
Redux Data Fetch Middleware 是一个中间件，它可以帮助我们简化网络请求流程。当我们在发送网络请求时，通常需要经过以下步骤:
- 发送请求。
- 等待响应。
- 处理响应数据。
- 将数据传递给 Reducer。
redux-data-fetch-middleware 通过拓展 Middleware 来自动化这个过程，并将结果回传给 Reducer。这个中间件的主要功能是将 API 请求转化为 action，并触发 dispatch，同时可以在 API 请求生命周期的不同时刻，发送 dispatch 消息，以及触发对应的 action。
安装
我们可以使用 NPM 来安装并添加 Redux Data Fetch Middleware。
npm install redux-data-fetch-middleware --save
使用方式
我们可以将需要发送网络请求的 API 请求转换成 action，并使用 Redux Data Fetch Middleware 来发送请求并将返回的响应结果回传给 Reducer。
我们需要在 Redux store 中使用 applyMiddleware 方法添加 Middleware，并将 redux-data-fetch-middleware 作为其中一个参数传入。
import { createStore, applyMiddleware } from 'redux';
import { dataFetchMiddleware } from 'redux-data-fetch-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(dataFetchMiddleware)
);接下来，我们可以在 Redux action 中使用数据捕获器，在请求完成时捕获请求结果，然后将请求结果传递给 Reducer。
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ----- ------------- - ---------------- ----- ------------- - ---------------- ----- ------------ - ---------------------------- -- -- ------------ --------------------------- ----- ---------- - -- -- ----- ---------- -- - ---------- ----- ------------- --- ----- -------- - ----- ---------------- ----- ---- - ----- ---------------- ----------------------------- -- ------ - ---------- --
处理 API 请求生命周期中的事件
当我们在发送请求时，我们可能需要在 API 请求的生命周期中的不同时间点触发 dispatch，并将不同的请求状态和数据作为参数传递给 Reducer。例如，在请求过程中，我们可能需要在发送请求之前触发一个“开始”action，在请求成功时触发“完成”action，在请求失败时触发“失败”action。
也就是说，我们需要一个事件监听机制，来监听 API 请求的各个生命周期阶段。
我们可以在发送请求时，通过 API 请求的生命周期事件来触发对应的 action。例如，在发送请求之前，我们可以通过将 beforeFetch 选项传递给 redux-data-fetch-middleware 来触发 action。
-- -------------------- ---- -------
----- ---------- - -- -- -
------ -
---- ---------
-------- -
------- ------
--
------------ -- -- -- ----- ------------------- ---
--
--
-----------------------------同时，可以在请求成功或失败时触发 action。
-- -------------------- ---- -------
----- ---------- - -- -- -
------ -
---- ---------
-------- -
------- ------
--
---------- ------ -- -- ----- ---------------------- -------- ---- ---
---------- ------- -- -- ----- ---------------------- -------- ----- ---
--
--
-----------------------------简单的例子
一个简单的例子，使用 redux-data-fetch-middleware 请求 Github 用户数据，并将结果回传给 Reducer。
首先，让我们先来编写 action，以及使用 redux-data-fetch-middleware 发送请求并将结果回传给 Reducer。同时，根据请求状态来触发不同的 action。
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ----- ------------- - ---------------- ----- ------------- - ---------------- ----- ------------ - ---------------------------- ----- ------------ - ---------------------------- -- -- ------------ --------------------------- ----- ---------- - -- -- ----- ---------- -- - ------------------------- ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ----------------------------- -- ------ - ---------- --
接下来，我们需要将 Middleware 添加到 Redux store 中。注意在 applyMiddleware 中，我们需要使用 dataFetchMiddleware 而不是 dataFetchMiddleware()。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- ------------------------------ ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ------------------------------------ -- ------ - ----- --
最后，在 Reducer 中，我们接收到 RECEIVE_USERS 时更新状态。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------
------ - -------------- ------------- - ---- ------------------------------
----- --------- - -
------ ---
----------- ------
--
----- ------------- - --------------
-
---------------- ------- -- -- --------- ----------- ---- ---
---------------- ------- ------- -- --
---------
------ ---------------
----------- ------
---
--
---------
--
------ ------- --------------好了，这就是 redux-data-fetch-middleware 的一个简单教程。现在，我们已经了解了如何使用这个 NPM 包，同时在我们的应用程序中发送网络请求，获取响应然后将响应的数据回传给 Reducer。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b03