在 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