引言
现代 Web 开发已逐渐从传统的服务器渲染模式转向了前后端分离、异步交互的模式。在前端领域，单页应用已成为了主流，而数据管理则随之而来。Redux 很好的解决了应用状态管理的问题，但处理异步数据请求还需要使用类库。redux-effects-fetch 是一款针对 Redux 与 fetch 搭配使用的中间件，它可以方便管理 Redux 中的异步数据请求，简化了我们的代码。
本文将为大家介绍 npm 包 redux-effects-fetch 的使用教程，包括它的安装、基本使用、高级使用等方面。
安装
在使用 redux-effects-fetch 之前，需要确保你的项目中已经安装好了 Redux，同时在扩展其功能的方面也要使用到 redux-thunk 或 redux-saga。
如果你采用 npm 进行包管理，可以直接在项目中安装：
--- ------- ------ -------------------
基本使用
redux-effects-fetch 通过创建 Effect 构造函数，并使用后返回一个 action，将其传递给 dispatched。当 Redux 向 reducer 发送 action 时，redux-effects-fetch 可以拦截特定的 action 并执行异步操作，最终在异步完成后将结果写入 store 更新应用状态。
以下是 redux-effects-fetch 中间件的基本用法：
------ - ------ - ---- --------
------ - ----- - ---- ----------------------
------ - ------------ - ---- ----------------
--------- ---- -
--- -------
----- -------
---------- --------
-
----- ---------- - --------------------------- -- -- ---------------------
-------- ------------ ------- ------- ------- -
------ ------------- -
---- -----------------------
-- -- ------- --
------ ------
---- -----------------------
-- ------ -----
------ ---------------
---- ---------------------
-- ----
------ ------
--------
------ ------
-
-在上述代码中，fetch('/api/todos') 返回的是一个 Effect 实例，其包含了 URL、HTTP 方法、请求头和请求体等数据。当 fetchTodos 被调用时，redux-effects-fetch 会拦截 action，发送异步请求，最终 dispatch { type: 'FETCH_TODOS__SUCCESS', payload: response }，将请求结果写入 store 更新应用状态。
高级用法
在应用程序开发过程中，通常会遇到多种不同的异步数据请求的处理。除了基本使用中的例子，redux-effects-fetch 还可以支持更高级的用法。
可取消的异步请求
redux-effects-fetch 允许我们创建可取消的异步数据请求，如果请求被取消，redux-effects-fetch 可以将请求函数返回的 Promise 取消。以下是一个示例：
------ - ------ - ---- --------
------ - ----- - ---- ----------------------
------ - ------------ - ---- ----------------
--------- ---- -
--- -------
----- -------
---------- --------
-
----- ---------- - --------------------------- -- --
------------------- - ------- --- ------------------------ --
--------- -- -----------
--
-------- ------------ ------- ------- ------- -
------ ------------- -
---- -----------------------
-- -- ------- --
------ ------
---- -----------------------
-- ------ -----
------ ---------------
---- ---------------------
-- ----
------ ------
--------
------ ------
-
-在上面的示例中，我们使用了 AbortController 构造函数来创建一个控制器。将信号对象作为参数传递到 fetch 函数中，将其传递给 options 对象的 signal 字段，即可创建可取消的请求。
异步请求的并发处理
通常，在我们的应用中会有多个异步请求并发处理，每个请求都会处理不同的数据。我们可以使用 redux-effects-fetch 提供的 all 函数来同时处理多个异步请求，使用方式与 jQuery 的 $.ajax() 的 $.when() 相同。
以下是一个实例：
------ - ------ - ---- --------
------ - ------ --- - ---- ----------------------
------ - ------------ - ---- ----------------
--------- ---- -
--- -------
----- -------
---------- --------
-
----- ---------- - --------------------------- -- --
-----
------------------- - ------- ----- ---
------------------- - ------- ------ ---
--
--
-------- ------------ ------- ------- ------- -
------ ------------- -
---- -----------------------
-- -- ------- --
------ ------
---- -----------------------
-- ------ -----
------ ---------------
---- ---------------------
-- ----
------ ------
--------
------ ------
-
-在上述示例中，我们使用 all 函数同时处理两个异步请求，fetchTodos 在调用后异步请求全部完成后返回的 Promise，其 resolve 的结果是一个响应数据数组。
总结
redux-effects-fetch 是一款高度灵活的 Redux 中间件，可以有效地管理异步数据请求，简化了我们的代码。在使用时，我们需要注意以下几点：
- 在使用 redux-effects-fetch 搭配 Redux 前，确保安装了 redux-thunk 或 redux-saga 。
- 了解 Effect 的基本用法，dispatch 一个 Effect 返回的 action，redux-effects-fetch 可以拦截特定的 action 并执行异步操作。
- 学习 redux-effects-fetch 的高级用法，比如可取消的异步请求和异步请求的并发处理。
以上是本文对 redux-effects-fetch 的使用教程，如果你对此感兴趣可以在你的项目中使用并自行根据实际需求进行相关修改。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8c03