Redux-saga 是 Redux 框架的一个中间件，它允许您以更可读、更可测试和更可维护的方式处理应用程序中的副作用。Redux-saga 模式与传统的使用 Redux-thunk 中间件处理副作用的方法有很大的不同。
在这篇文章中，我们将探讨 Redux-saga 模式的特点以及如何使用它来处理应用程序中的副作用。我们还将提供示例代码来说明如何使用 Redux-saga 实现异步处理和请求取消。
什么是 Redux-saga 模式？
在 Redux 的世界中，副作用通常包括发起网络请求、处理浏览器存储和时间处理等。在传统的 Redux 应用程序中，开发人员通常使用 Redux-thunk 中间件处理这些副作用。但是，这种处理方式通常会导致代码逻辑混乱和难以维护。
Redux-saga 模式通过将副作用分离出您的应用程序状态，然后将其处理过程分离到 redux-saga 任务（Saga）中，从而解决了这个问题。使用 Saga，您可以将副作用的处理过程视为普通的 JavaScript 代码，并将其与应用程序状态的其余部分隔离开来，使代码逻辑更清晰，更易于维护和测试。
Redux-saga 主要基于两个概念：
- Saga：代表副作用的处理过程。它们是 generator 函数，可以通过模板语法的方式来处理异步动作。
- Effect：代表副作用本身。Effect 是一个包含指令和参数的对象，用于描述要在 saga 中处理的异步操作。
Redux-saga 模式的特点
与 Redux-thunk 中间件不同，Redux-saga 模式具有以下优点：
更易于测试
Saga 中的任何副作用都可以通过 Effect 对象来描述。这使得测试 Saga 的代码变得更加容易。您可以选择执行 Saga 来测试 Effect 对象是否按预期调用了副作用。
处理复杂场景
使用 Redux-saga 模式，您可以更轻松地处理复杂的应用程序场景。Saga 提供的模板函数可以处理各种副作用，帮助您在应用程序中更好地组织代码。
轻松处理取消
Redux-saga 模式还是取消异步事件的首选方式。通过 cancel effect，您可以高效地取消副作用，而无需在 Saga 中手动构建取消逻辑。
使用 Redux-saga 处理异步请求和取消请求
在接下来的例子中，我们将使用 Redux-saga 模式处理异步请求和取消请求。我们将使用一个用于搜索 GitHub 上的用户的例子来说明。
在我们的例子中，我们将创建一个搜索表单，当用户提交表单时，我们将在 GitHub 上搜索相关用户并显示结果。用户还可以通过单击"取消"按钮来随时取消搜索。
安装 Redux-saga
首先，您需要在项目中安装 Redux-saga。您可以使用以下命令完成此操作：
npm install --save redux-saga
创建 Saga
我们编写一个名为 searchUser 的 Saga。我们使用 takeLatest 函数来处理 Search User 动作。takeLatest 函数将始终触发新的任务，因此我们不必担心在单击“搜索”按钮时发生多次提交。
-- -------------------- ---- -------
------ - ----------- ----- ---- ------ - ---- ---------------------
------ - ------------------ --------------- - ---- -------------
------ - ---------- - ---- ---------
------ --------- ---------------- ------- -- -
----- - ----- ----------- - - --------
--- -
----- -------- - ----- ---------------- ------
-- -------------------- -
----- --------------------------------------------
-
- ----- ------- -
-- -------------------- -
----- ------------------------------------
-
-
-
------ --------- ----------------- -
----- ------------------------- ----------------
-在这个 Saga 中，我们使用 call effect 来调用 searchUser API，并且使用 put effect 来表示 API 响应成功或失败。cancelToken 是使用 axios 时传递的一个特殊的 token，通过它，我们可以轻松地取消请求。
给组件添加 Saga 的连接
我们需要在组件中连接到 Saga 以处理 Search User 动作。我们可以使用以下代码：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ ------ ---- -----------------------
------ - ----------- ---------------- - ---- -------------
------ - --------------- - ---- -----------
----- --------------- - ------- -- -
----- - ---------- ------ ----- - - ------------------------
------ - ---------- ------ ----- --
--
----- ------------------ - ---------- --
-------------------
- ----------- ---------------- --
--------
--
------ ------- --------
----------------
------------------
---------------------------现在，我们已经可以在组件中发出 Search User 动作，同时也可以在组件卸载时取消搜索。下面是组件中代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------
------ - ------ ------- ---- - ---- -------
------ - -------------- - ---- --------------------
----- ------ - --
----------
------
------
-----------
-----------------
-- -- -
----- ------ -------- - -------------
----- ------------ - ------- -- -
-----------------------
-------------------
----- ----------- - - ------- ------ ------ ---- --
----------------- - --- --------------------- -- -
------------------ - --
---
---------------- -------------
--
------ -
----- ------------------------
------
-----------
------------------ - ------ -----
------------
----------------- -- ----------------------------
--
---------- -- ----- ---
------------- - - -- -
----
----------------- -- -
--- -------------------------------
---
-----
--
------ -- ---------------
------- -------------- ----------------- -----------------
--------------- --
------
---------
------- -------------- ---------------------------
------
---------
-------
--
--
---------------- - -
---------- ---------------
------ -----------------------------------
--- -----------------
------ -----------------
----
------ -----------------
----------- --------------------------
----------------- --------------------------
--
------ ------- -------在该组件中，我们使用 CancelToken 和 axios 库来创建 cancelToken 对象。我们使用该对象来取消请求，并且还可以在组件卸载时取消搜索。
结论
Redux-saga 模式是处理 Redux 应用程序中副作用的首选方式。使用 Saga，您可以将副作用处理过程从应用程序状态中分离出来，并使代码逻辑更清晰、更易于维护和测试。在本文中，我们提供了一个示例来说明如何使用 Redux-saga 处理异步请求和取消请求。如果您想在应用程序中更好地组织副作用代码，那么 Redux-saga 模式一定是您不可错过的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb697544713626015c8c46