redux-fetch 是一个适用于 React 应用程序的 NPM 包，它提供了一种简单的方式来处理 Web 请求，并将响应数据发送到 redux store。该包是基于 Redux 架构开发的，可以轻松地与 React 和 Redux 应用程序进行整合，同时提供了对 Express 和 Koa 等服务器端框架的支持。
安装
首先，在你的 React 和 Redux 应用程序中安装 redux-fetch。
npm install --save redux-fetch
使用
创建 Redux Store
创建 Redux store 并将 redux-fetch middleware 添加到中间件集合中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ - --------------------- - ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ----- ---------- - ---------------- ---------------- --------------- -- ----- ----- - ------------ ------------ ---------- -- ------ ------- ------
注意：确保创建 store 时将 redux-fetch middleware 添加到中间件集合中，并将此 middleware 放在 thunk middleware 前面。
发送请求
在 Redux action creators 中使用 fetchAction 函数向服务器请求数据。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- ---------- -
------ -------- -- -
----------------------
--------- ------------
------- ------
------ --------------------- -------------------- --------------------
----
--
-
------ -
---------
--fetchAction 接受一个对象作为参数，该对象包含以下属性：
endpoint：请求的 API 地址。method：HTTP 请求方法（如 “GET”、“POST” 或 “DELETE” 等）。types：Redux action types 数组，分别表示请求开始、请求成功和请求失败。
{
endpoint: '/api/data',
method: 'GET',
types: ['LOAD_DATA_REQUEST', 'LOAD_DATA_SUCCESS', 'LOAD_DATA_FAILURE']
}处理响应
定义一个 reducer 函数来处理成功或失败的响应。
-- -------------------- ---- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- --------------------
------ -
---------
----- --------------
--
---- --------------------
------ -
---------
------ --------------
--
--------
------ ------
-
-
------ ------- ------------当请求成功时，redux-fetch 会自动向 redux store 分发一个类型为 ‘LOAD_DATA_SUCCESS’ 的 action，其中包含从服务器返回的响应数据。当请求失败时，redux-fetch 会向 redux store 分发一个类型为 ‘LOAD_DATA_FAILURE’ 的 action，其中包含响应中的错误信息。
在组件中使用
在 React 组件中使用 connect 函数连接 Redux store，并调用 action creators 来发起请求。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -------------
----- --- ------- --------- -
------------------- -
----------------------
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -
------------------
--
-
-- ------- -
------ -
------------ -------------
--
-
------ -
-----------------
--
-
-
----- --------------- - ------- -- -
------ -
----- -----------
------ -----------
--
--
------ ------- ------------------------ - -------- --------注意：首先，在 component mount 时发出请求（通过调用 this.props.loadData()）。当需要在组件中使用 Action Creator 时，请使用 mapDispatchToProps 对象而不是函数。
完整示例
以下是一个使用带有 Redux 的 fetch 的完整示例。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -------------
----- --- ------- --------- -
------------------- -
----------------------
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -
------------------
--
-
-- ------- -
------ -
------------ -------------
--
-
------ -
-----------------
--
-
-
----- --------------- - ------- -- -
------ -
----- -----------
------ -----------
--
--
------ ------- ------------------------ - -------- ---------- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- ---------- -
------ -------- -- -
----------------------
--------- ------------
------- ------
------ --------------------- -------------------- --------------------
----
--
-
------ -
---------
---- -------------------- ---- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- --------------------
------ -
---------
----- --------------
--
---- --------------------
------ -
---------
------ --------------
--
--------
------ ------
-
-
------ ------- -------------- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------- ---- -------------- ------ - --------------------- - ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ----- ---------- - ---------------- ---------------- --------------- -- ----- ----- - ------------ ------------ ---------- -- ------ ------- ------
以上就是 redux-fetch 包的详细使用教程，现在你就可以开始通过 Redux 易受攻击的加拿大的 fetch 来更好地控制您的 Web 请求了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ca3