前言
在前端开发过程中，异步事件的处理是一个极其常见的需求。然而，这些异步事件往往涉及到复杂的逻辑，例如 API 调用成功后需要触发其他事件，需要在调用过程中处理异常，等等。针对这些问题，Redux-Saga 库提供了一种优雅且强大的异步管理方案。
本篇文章将介绍 Redux-Saga 中关键的概念和 API，并通过示例代码演示如何使用Redux-Saga处理复杂的异步逻辑。
Redux-Saga 概述
Redux-Saga 是一个用于管理应用程序的 side effects 和异步逻辑的库。Redux-Saga 实际上是一个独立的模块，没有与 Redux 相关的依赖关系，同时也不要求使用 React。
以 Redux-Saga 为中心的 Side-Effect 管理器，可以轻松处理异步事件。将这些事件从组件中解耦并用更易于测试的方式组合它们是 Redux 中不可或缺的一部分。
在 Redux-Saga 中，我们使用 Generator functions 模拟异步逻辑。在异步事件中触发不同的 action 可以更灵活地控制我们的应用程序状态。
Redux-Saga 常用概念
在学习 Redux-Saga 之前，需要先了解一些常用的概念。
Generator Functions
Generators 是 ES6 中的新特性，是一个返回 Generator 对象的函数。Generator functions 通过执行一次暂停在 yield 语句后，能够像迭代器一样可控制地生成多个值。以下是一个生成器函数的例子：
--------- ------------------- - ----- -- ----- -- ----- -- -
在 Redux-Saga 中，我们将使用这样的生成器函数来封装异步操作。
Effect
Effect 是 Redux-Saga 中的一个对象，表示了在 generator function 中执行任务的指令。这些指令可以执行异步请求、更改 Redux store，将 generator function 分派到 Redux-Saga，等等。一些常用的 effect 如下：
takeEvery： 在不断的循环中拦截指定的 action，并启动处理它们的 Sagas。takeLatest：仅运行来自最新的事件的 saga调用。call：用于调用函数，包括异步函数，并挂起执行直到 Promise 解析。put：用于在 Redux 中分派 action。select：用于选择 Redux store 中的数据。
Saga
Saga 指的是包含了 Generator 的生成器函数，当yield 语句观察到某个 effect 类型时，该生成器会将控制器传递给 Redux-Saga 中的运行时，并在观察到某个 action 类型时将控制器恢复并开始执行其他任务。对于 Redux-Saga，我们常常用 Saga 来描述处理异步任务的过程。
根 Saga
Redux-Saga 通过将 Sagas 处理成一棵树来组织流。我们可以通过创建一个根 Saga 将多个 Sagas 组合起来。如果我们想启动 Saga 的处理，根 Saga 是必须的
Middleware
Redux-Saga 是基于 Redux Middleware 实现的功能性库。为了使用 Redux-Saga，我们需要将 SagaMiddleware 创建为我们的 Redux 中间件。
下面我们通过简单的示例来演示如何使用Redux-Saga处理异步逻辑：
------ - ----- ---- ---------- --- - ---- --------------------
-- ------ ----- --- ------ ---------
--------- ----------------- -
--- -
-- ---- --- ------ - ---- ------- -------------------
----- ---- - ----- ----------- ----------------------------------------------------------------
-- ------ ------- --- ----- -----
----- ---------- --------------------- ----- -------
- ----- --- -
-- ------ ------- ----- --- ----- -----
----- ---------- -------------------- -------- ------------
-
-
-- ---------------------
--------- ---------- -
----- ------------------------------- -----------
-
-- ----------
----- -------------- - -----------------------
------ ----- ----- - ------------
------------
----------------
--------------
-
--
-- -------
-----------------------------上面的代码展示了如何使用 Redux-Saga 处理异步请求。如下是上文中使用到的概念：
call：此 effect 用于调用函数，包括异步函数。此调用将挂起执行直到 Promise 解析。put：将一个新 action 发布到 Redux store，以更新应用程序状态。takeEvery：在不断的循环中拦截指定的 action，并启动处理它们的 Sagas。try / catch：用于处理任何可能出现的异常。
我们将 Worker Saga 与包含 effect 定义的 Root Sage 组合在一起。通过 call 和 put effect 来调用 API，更新应用程序状态以及错误处理。
结论
Redux-Saga 提供了一种强大的、面向 Action 的模式来管理应用程序中的 Side-Effect。然而，Redux-Saga 支持 Generator 和 Effect 的抽象，因此使用 Redux-Saga 可以让我们轻松地处理异步事件，更好地控制我们的应用程序状态。
在此篇文章中，我们演示了 Redux-Saga 的核心概念及其代码示例，你现在应该有能力在你的应用程序中使用这些 API 管理和组合异步逻辑。
希望通过本篇文章能够对你对 Redux-Saga 有更深的了解，同时希望这篇文章能够在日常开发中为大家提供实际的帮助。如果还有任何问题，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719de809b4aadf9e0064fcc