在 React 应用程序的开发中，Redux 一直是最受欢迎的状态管理库之一。然而，随着 React 应用程序变得越来越复杂，Redux 开发者们不断在寻找一些改进这个流程的方案。另外，Redux 本身也在不断地发展以应对越来越复杂的应用程序。
Redux-thunk、saga 和 observables 都是 Redux 开发者们使用的一些解决方案。本文将对其中的 saga 和 observables 进行比较和对比。
Redux-thunk
Redux-thunk 是 Redux 官方推荐的一种方案，可以让 Redux 的 action creators 返回函数而不是对象。
----- ---------- - -- -- -
------ ---------- -- -
------------------------------
-------------------
--------- -- -
----- ----- - ---------
-----------------------------------
--
---------- -- -
----- ----- - ------------
-----------------------------------
---
--
--由此我们可以看到一个完整的 Redux-thunk，其中函数接受 dispatch 方法作为参数，可以在函数内部执行异步操作并根据其结果分发相应的动作。
Saga
Saga 是一个基于 generator 函数的解决方案。使用 Saga，我们可以更加优雅地编写可读性强的异步操作。基本用法如下所示：
------ - ---- ---------- ---- ---- - ---- ---------------------
------ ----- ---- --------
-- ------ ----
--------- ------------ -
--- -
----- ----- ----- --------------------- ---
----- --- - ----- --------------- ----------
----- ----- - ---------
----- ----- ----- ---------------------- -------- ----- ---
- ----- ----- -
----- ----- ----- ---------------------- -------- ----------- ---
-
-
-- ------- ----
--------- ----------------- -
----- ------------------------ ------------
-
-- ---- ----
------ ------- --------- ---------- -
----- -----
------------------
-- ----- --------
---
-Saga 采用了一个叫做 转发（fork） 的控制流管理方式，从而使得多个异步操作创造出的请求也能够被 Saga 监视。此外，Saga 还可以使用 put 进行 action 的分发，以执行引起状态更改的操作。
Observables
Observables 是一种用于处理异步数据流的库。这意味着我们可以将 Observables 用于任何具有交互性的前端应用程序，例如基于 React 的应用程序、桌面应用程序，甚至原生应用程序。
Observables 和 saga 有点类似，但也有许多不同之处。像 Redux-saga 一样，RxJS 勇闯天涯，它的主要函数是可及对象（Observable），其在值集合之间提供了同步和异步的生产者-消费者的响应式流，它可以使我们更好地处理异步请求的预测性问题。以下是 Observables 的一个示例：
------ - ---- - ---- -------
------ - ---- - ---- ------------
------ - ---- ---------- - ---- -----------------
----- ---------- - -- -- -
------ ---------- -- -
------------------------------
------ -----
--------------
------
------- -- ---------------------------------
---------------- -- -------------------------
-
-
----------------- -- ------------------
--
--在上面的示例中，我们使用 RxJS Observable 来执行异步操作，并使用 RxJS 操作符来处理异步操作的结果。最终，我们使用 subscribe 来订阅我们的 Observable 并向 Redux 发送相应的 action。
Saga 和 Observables 的区别
虽然这两种库都可以使异步流程更简单和优雅，但 Saga 和 Observables 之间还是有很大区别的。
整体结构不同：Saga 采用了控制流方式实现异步操作，而 Observables 则是采用响应式方式。
范围不同：Saga 可以用于所有 Redux 的操作，例如执行一些副作用、生成 action 和 更改 Store 等。Observables 则可以作为一个独立于库、可以运用到很多应用上的解决方案。
代码复杂度：在方案中使用 Observables，有时候会将一些决策延迟到未来，甚至未来是由 Observable 自己控制。这会使得代码变得比使用 Saga 更加复杂和难以处理，也更难排查和调试其错误。
结论
Saga 和 Observables 都是很好的解决方案，在不同的场景下有着独特的优势。使用 Redux-saga，可以统一所有的副作用为相同的控制流，从而使代码更具有可读性和可扩展性。Observables 让我们可以使用一个可以在任何地方重用的库，并具有对响应式、可组合式和异步代码的支持。
然而，在使用这两种方案的时候，我们必须始终记住其特定的用途和问题。在深入理解 Saga 和 Observables 的差异之后，我们可以根据我们的应用程序的具体用途进行选择，以达到更好的开发效果和更高的程序性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fa6dcc44713626014c413a