在 React 应用中，Redux 是最常用的数据管理库之一。为了解决 Redux 异步请求的处理问题，Redux-Saga 和 Redux-Thunk 库被开发了出来。本文将比较这两个库的优缺点并讨论在什么场景下使用，以便于选择更适合的解决方案。
Redux-Saga
工作原理
Redux-Saga 是一个中间件，它通过在 Redux 中间件中使用 Generator 函数来简化异步操作的管理。这意味着使用 Generator 函数来执行异步操作，从而使得异步操作的代码更加干净和易于维护。Redux-Saga 可以监听 Redux 中的 action，并可以使用 Effect（比如 call，put等）来执行异步操作并带有一定的延迟和自定义处理。
优点
Redux-Saga 有以下优点：
- 更好的抽象异步逻辑，使代码更易于维护和测试。
- 使用 Generator 函数的概念，使异步操作的处理更加优雅。
- 可以更好的处理复杂的并发场景，比如说需要等待多个异步任务完成之后再执行其他步骤。
缺点
Redux-Saga 有以下缺点：
- 学习成本较高，需要对 Generator 函数和 Redux 概念有较强的理解。
- 增加了额外的复杂性，尤其是在处理简单异步请求时。
适用场景
对于需要复杂的异步逻辑和处理多个异步任务情况下，Redux-Saga 是一个很好的选择。例如：
- 处理 WebSocket 连接。
- 异步请求依赖于其他请求的结果。
- 定时等待。
示例代码：
-- -------------------- ---- -------
------ - ----------- ----- --- - ---- ---------------------
------ - -------------------- ----------------- - ---- ---------------------
------ - --------------------- - ---- -----------------------
------ - ------------ - ---- -----------------
--------- ------------------------ -
--- -
----- ---- - ----- ------------------ ---------------------
----- -------------------------------
- ----- ------- -
----- ------------------------------
-
-
--------- ------------- -
----- --------------------------------- ------------------
-
------ ------- ------------Redux-Thunk
工作原理
Redux-Thunk 是一个中间件，它通过允许 action 创建函数返回一个函数而简化了异步请求的管理。这个返回的函数可以接收 dispatch 方法作为参数，并且可以延迟 dispatch 同步 action。一个常见的用法是在请求数据之前 dispatch 请求动作，在数据请求时 dispatch 成功、失败的 action。
优点
Redux-Thunk 有以下优点：
- 学习成本低，使用起来容易。
- 对于简单的异步请求非常有用，不需要额外的代码。
缺点
Redux-Thunk 有以下缺点：
- 不够优雅，代码可能会比较混乱。
- 不适合处理复杂并发场景。
适用场景
对于简单的异步请求场景，Redux-Thunk 是一个不错的选择，例如：
- 调用 API 并获取数据。
- 请求登录等简单异步场景。
- 简单地异步加载图片或其他资源。
示例代码：
-- -------------------- ---- -------
------ - -------------------- ----------------- - ---- ---------------------
------ - --------------------- - ---- -----------------------
------ - ------------ - ---- -----------------
------ ----- ---------------- - ------ -- -
------ ---------- -- -
---------- ----- --------------------- ---
------------------
------------ -- ------------------------------------
-------------- -- ------------------------------------
--
--总结
在选择 Redux-Saga 或 Redux-Thunk 库时需考虑场景需求以及项目的整体复杂性。通常而言，Redux-Saga 对于复杂的异步请求场景是一个不错的选择，而 Redux-Thunk 则更适用于简单的异步操作场景。我们应该选择最适合特定场景的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bafb60add4f0e0ff3912fe