前言：
随着前端开发的不断发展，功能的复杂化，我们需要更为高效的异步流控制，Redux-Saga 便是一种非常好用的工具。本篇文章将详细介绍什么是 Redux-Saga，以及如何使用 Saga 实现异步流控制。本文适用于具有一定 React 和 Redux 基础的开发者，并需要了解一些 ES6 和 Generator 的语法。
什么是 Redux-Saga？
Redux-Saga 是一个用于管理 Redux 应用程序的副作用（如异步数据流和访问浏览器缓存等）的库。 它使用了 ES6 Generator 函数让异步流更加容易管理，同时让异步流代码具有更好的可测试性、可复用性、可读性。
Saga 允许您通过 “generators” 创建更好的前端应用程序，并使异步流作为一等公民的概念更容易处理。 它提供了一个方法来对异步流进行建模，允许您考虑应用程序的 control flow，而不是如何编写令人困惑的回调式代码。
Redux-Saga 与其他同类库如 Redux-Thunk 相比的优势在于，使用 redux-saga 更容易管理副作用代码，这些代码更易于测试、调试和重构。
Redux-Saga 核心概念
Effect
Effect 是计算 Saga 逻辑的指令。当 Saga Middleware 执行 Generator 函数时，它会暂停在 yield 表达式上。 这时，中间件会在 Effect 上启动解释器，并执行相应的操作，直到下一个 yield 表达式或 Generator 结束。
在 Saga model 中，Effect 是用于描述 Redux 状态及 API 调用的普通 Javascript 对象。每个 Effect 都包含一个指令（如 put、call、select 等）和相关的信息。
下面是几个常用的 Effect：
- put：dispatch action 到 store
- call：以同步调用的方式运行函数
- take：暂停 Generator，等待 dispatch 匹配指定 action
- select：从 store 取出 state
- fork：以非阻塞的方式执行一个 Generator
- cancel：取消某个 fork
Saga
Saga 是基于 generator 的定义了一种执行序列的方式，表示 Saga 本身实际上是一个 Generator 函数。
与普通 Generator 不同的是，当我们运行 Saga Generator 函数时，它不仅可以调用所有异步函数，还可以和 store 进行交互并发送 action。Saga 会自动重启，并根据先前的 Generator 内部状态继续。
Worker
Worker 是 Saga Generator 中的普通函数，用于处理某一类动作的逻辑。Worker 的执行永远是同步的，但是可以调用异步代码。Worker 的执行不会影响 Saga Generator 本身的执行。
在 Saga Generator 中，worker 由 takeEvery 和 takeLatest 函数调用，但是也可以使用其他 Saga API 来调用。
Watcher
Watcher 是指使用 take* 函数来监听某一指定 action，该 action 触发后，会派发任务到 worker 中执行。Watcher 是 Generator 的入口点。当某个 action 被发起时，watcher 可以通过 take 当前 action，并启动执行 worker。
如何使用 Redux-Saga
下面通过一个简单的例子来介绍如何使用 Redux-Saga。
安装 Redux-Saga
首先，我们需要安装 Redux-Saga：
--- ------- ----------
实现 Saga
接下来，我们需要实现一个简单的 Saga，这里假设我们要调用 REST API 来获取用户数据。
首先，我们定义一个 worker 函数，它将负责使用 Axios 来获取用户列表。如果发生错误，它将使用 dispatch 发送一个错误 action。
------ ----- ---- --------
------ - ----- --- - ---- --------------------
------ - --------- - ---- --------------------
--------- --------------------- -
--- -
----- -------- - ----- --------------- ----------------------------------------------
----- ----- ----- -------------------------- --------- ------------- ---
- ----- --- -
----- ----- ----- ----------------------- -------- --------- ---
-
-然后，我们定义一个 watcher 函数，它将监听一个 FETCH_USER_LIST action，并在 action 被触发时调用 fetchUserList worker 函数。
--------- -------------------- - ----- ---------------------------- --------------- -
最后，我们将在主 Saga 上启动 watchFetchUserList。
------ ------- --------- ---------- -
----- -----
---------------------
---
-现在，我们的 Saga 已经完成了，当在组件中 dispatch 一个 FETCH_USER_LIST action 时，将触发 fetchUserList 函数。
使用 Saga
在我们的组件中使用 Saga 的方式与 Redux-Thunk 类似：
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- ------------
-------- ---------- -
----- -------- - --------------
----- -------- - ----------------- -- ----------------
------------ -- -
--------------------------
-- ----
------ ----
-这里，我们会在组件渲染时触发 fetchUserList action，Saga 将监听该 action 并在收到后调用 fetchUserList 函数。
总结
Redux-Saga 提供了一种方便的方式来处理应用程序中的异步操作和副作用。它不仅提供了一种优雅的代码组织方式，而且还有助于测试、调试和重构代码。在你的下一个项目中尝试使用 Redux-Saga，您会感谢自己。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6542d8ba7d4982a6ebc7dcbd