在 React 中处理异步操作，Redux-Saga 是一个很好的选择。它提供了一种优雅的方式来管理应用程序中的 side-effect，如异步网络请求和访问浏览器缓存。
什么是 Redux-Saga？
Redux-Saga 是一个 Redux 中间件，它用于处理异步操作。它的主要概念是 Generators，这是一种将函数分成多个可中断部分的方法。将这些可中断的部分公开为调用和恢复方法，可以控制异步操作的流程和状态。
Redux-Saga 解决了什么问题？
Redux-Saga 解决了在 Redux 应用程序中处理异步操作的问题。Redux 的默认选择是使用 Thunk，但 Thunk 在复杂的异步流程中变得难以维护。Saga 提供了一种更简洁、可扩展的解决方案，可以简化异步代码的编写和维护。
Redux-Saga 的主要概念
Redux-Saga 的主要概念是 Generators。Generators 是 JavaScript 函数的一种特殊类型，它可以在函数内部永久暂停和恢复执行。这使得它们非常适合处理异步操作。
以下是一个简单的 Saga，它等待一个异步请求并将响应存储在 Redux Store 中：
------ - ----- ---- --------- - ---- --------------------
------ - ------------------ ----------------- - ---- -----------
------ - --- - ---- -------
--------- ------------ -
--- -
----- --- - ----- --------------------
----- --------------------------------
- ----- ----- -
----- ---------------------------
-
-
------ ------- --------- ---------- -
----- -------------------------------- -----------
-fetchUsers 函数是一个 Generator 函数，它使用 yield 命令（而不是 await）来暂停执行，直到一个 Promises resolve 或 reject。这个 Saga 等待一个叫做 FETCH_USERS_REQUEST 的 Action，并在处理它时执行 fetchUsers 函数。
Redux-Saga 的优点
易于测试
由于 Saga 代码可以完全控制异步操作的流程，因此测试 Saga 代码变得异常容易。可以使用 Jest 或其他测试库来模拟异步操作、验证 Saga 状态以及检查 Action 是否被派发。
处理异步操作非常方便
通过编写 Generator 函数和使用 Redux-Saga 提供的 API，就可以处理 asynchronous calls（例如网络请求）和其他的 side-effects，让代码看起来更加简单和可维护。
支持取消操作
Redux-Saga 强大的一个特性是它可以取消异步操作。取消操作是通过调用 Saga 的 cancel 方法实现的，它会中断正在运行的生成器代码，并恢复 Saga 状态以支持其他操作。
Redux-Saga 的不足
学习曲线
Redux-Saga 的核心概念可能不容易理解，因此学习 Saga 需要花费更多的时间。不过，掌握了 Redux-Saga 后，它可以极大地提高应用程序代码的可维护性和可扩展性。
复杂性
对于简单的应用程序，可能不需要使用 Redux-Saga。这个库的强大功能在处理相当复杂的应用程序和异步操作时才会显现。
Redux-Saga 示例代码
以下是一个完整的 React 组件和 Redux-Saga Saga 的示例代码，它使用 Bootstrap 接口来获取数据：
------ ------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ----------------- - ---- -----------
-------- ---------- -
----- -------- - -------------
------------ -- -
-----------------------------
-- ---
----- - ---------- ------ ----- - - ----------------- -- ------------
-- ----------- -
------ ---------------------
-
-- ------- -
------ ----------- ---------------------
-
------ -
---- ----------------------
-------- ---------
------ ---------------- ---------------
-------
----
-----------
-------------
--------------
-----
--------
-------
--------------- -- -
--- --------------
------------------
--------------------
---------------------
-----
---
--------
--------
------
-
-
------ ------- -------------- - ----- ---- --------- - ---- --------------------
------ - ------------------ ----------------- - ---- -----------
------ - --- - ---- -------
--------- ------------ -
--- -
----- --- - ----- --------------------
----- --------------------------------
- ----- ----- -
----- ---------------------------
-
-
------ ------- --------- ---------- -
----- -------------------------------- -----------
-结论
Redux-Saga 是管理 React 应用程序中异步操作的一种可靠方式。它提供了一种简单且可扩展的方式来处理异步行为，并允许在应用程序中撤销异步操作。无论是处理异步操作还是采用 Saga，都要删除副作用。使用 Redux-Saga 可以让我们可以专注于业务逻辑，并让复杂的异步操作和副作用码井井有条。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67208bc92e7021665e02bf41