什么是 Redux Saga？
Redux Saga 是一个中间件，用于管理 Redux 应用程序中的副作用（异步操作）。它是一个基于 Generators 的库，可以让副作用和相关代码可被测试、可维护和易于理解。
Redux Saga 的优点
与其他副作用管理库相比，它的主要优点是：
- 易于测试副作用
- 代码易于维护和理解
- 支持取消异步操作
Redux Saga 的基础知识
在使用 Redux Saga 之前，您需要了解以下概念：
Effect 树
在 Redux Saga 中，一个 Effect 是一个纯 JavaScript 对象，它描述了如何执行异步操作，包括向服务器发送请求或接收服务器响应，或者等待用户事件。Effect 对象包含要执行的命令以及执行命令所需的参数。
Generator 函数
Generator 函数是由 function* 关键字定义的函数，它返回一个迭代器对象。Generator 函数允许我们在函数中暂停和恢复代码执行，这种行为常常用于异步编程。
监听器
在 Redux Saga 中，监听器是一个 Generator 函数，它在与某个操作相关的条件满足时被触发。例如，当您想要要求服务器返回数据时，您可以启动一个监听器，在收到数据后，该监听器可以解析响应并将结果存储在应用程序状态中。
阻塞和非阻塞 Effect
非阻塞 Effect 是一个 Effect，它不暂停正在执行的 Generator 函数。相反，它启动新的线程或进程来执行操作，并在操作完成时返回一个结果。 阻塞 Effect 停止执行 Generator 函数并等待某些条件解决后再继续执行。所有的阻塞 Effect 都与非阻塞 Effect 一起使用，以便在不阻塞整个应用程序的情况下执行异步操作。
用 Redux Saga 实现一个简单 Task List 应用程序
安装 Redux Saga
- --- ------- ------ ---------- - -- - ---- --- ----------
创建一个增删任务的 Redux 应用程序
首先，我们需要安装 Redux 和 React，然后创建一个新的 React 组件，并在该组件中创建一个 Redux store：
------ ----- ---- -------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ ------- ---- ------------
----- ----- - --------------------
------ ------- -------- ----- -
------ -
--------- --------------
-----
-------- ---------
------
-----------
-
-然后，我们需要定义一些行为，用于处理列表中任务的添加和删除：
------ ----- -------- - ---------- ------ ----- ----------- - ------------- ------ -------- ------------- - ------ - ----- --------- ---- - - ------ -------- ------------------ - ------ - ----- ------------ ------ - -
接下来，我们创建一个 reducer，用于更新任务列表的状态：
------ - --------- ----------- - ---- ------------
----- ------------ - --
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
-
--- --------------
------ ------------
--
-
---- ------------
------ ----------------- -- ------- --- --------------
--------
------ -----
-
-现在，我们可以使用 Redux 来处理 Task List 应用程序的状态了：
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------- ---------- - ---- -----------
-------- --------------- -
------ -
-----
------
-----------
---------------------
--------------- -- ----------------------------------------
--
------- ----------- -- ------------------------------------------
----
--------------------- -- -
--- --------------
-------------------------
------- ----------- -- ------------------------------------------
-----
---
-----
------
-
-
-------- ---------------------- -
------ - ------ ----- -
-
-------- ---------------------------- -
------ -
-------------- -
------------------------
--
-------------- -
------------------------
--
-
-
------ ------- --------
----------------
------------------
-----------上面的代码用到了 React-Redux 库来实现 Redux store 和 React 组件之间的连接。
使用 Redux Saga 处理异步操作
使用 Redux Saga 处理异步操作的方式通常是将操作放入一个 Effects 函数中。这里的 Effects 函数是一个 Generator 函数，它包含一系列的 Effect 对象，每个 Effect 对象描述一个我们想要执行的异步操作。例如，如果我们想要与服务器进行通信，则需要一个 Effect 函数。下面就是一个例子：
------ - ---- ----------- --- - ---- --------------------
--------- ------------------- -
----- --------------------------------
-
--------- ---------------------- -
----- -------------------------------------
-
--------- ---------- -
----- -----
-------------------- -------------
----------------------- ----------------
--
-
------ ------- --------在上面的代码中，我们定义了两个 Effects 函数，一个用于添加任务，另一个用于删除任务。这些 Effects 函数使用 put 函数来将执行结果存储在 Redux store 中。put 函数是一个非阻塞 Effect，它启动一个新线程，并在线程完成后返回一个结果。
需要注意的是，Effects 函数通常包含一系列 Effects 对象。在上面的代码中，我们将 ADD_TASK 和 DELETE_TASK 操作都传递给 takeLatest 函数，以确保重复执行这些操作时，只有最新的执行结果被存储在 Redux store 中。
最后，我们需要将这些 Effects 函数链接到我们的 Redux store 中：
------ - ------------ --------------- - ---- ------- ------ -------------------- ---- ------------ ------ - ------------------- - ---- -------------------------- ------ ------- ---- ------------ ------ -------- ---- --------- ----- -------------- - ---------------------- ----- ----- - ------------ -------- ---------------------------------------------------- - ---------------------------- ------ ------- -----
在上面的代码中，我们创建了一个 Saga 中间件，并将其链接到 Redux store 中。我们还使用 applyMiddleWare 函数将 Saga 中间件作为参数传递给 Redux createStore 函数，以确保 Redux store 能够使用 sagas 处理异步操作。最后，我们使用 run 函数将 Effects 函数连接到 Saga 中间件中。
最佳实践
- 应该在 Effects 函数中使用 yield 关键字。这会让 Sagas 变得特别有吸引力，因为它们非常容易测试。
- 一定要处理所有的错误。否则就会让小问题变成大问题，并且对整个应用程序的可用性产生负面影响。
- 确保所有的操作都被处理，即使执行过程很长。绝对不要使 Saga 函数无限制等待。
- 如果你发现某个操作被多个 Saga 函数引用，请将同样的代码封装到单个 Effect 函数中。
结论
Redux Saga 是处理异步操作的一种非常强大的机制。当它与 Redux 配合使用时，您可以很容易地构建出高质量、易于测试和易于扩展的应用程序。通过仔细编写代码并使用最佳实践，您可以将 Redux Saga 发挥到最大效用，并为您的用户提供最佳体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6736a7da0bc820c5825594b2