在现代 Web 应用程序中，异步操作和数据流处理变得越来越普遍。在 React 和 Redux 中，您通常会使用中间件来处理任何异步数据请求。Redux-thunk 和 Redux-observable 都是 Redux 的中间件，它们可以处理复杂的异步流程。但是，哪种更好？在本文中，我们将深入探讨这两个中间件，比较其优缺点，以及哪种更适合您的项目。
Redux-thunk
Redux-thunk 是一种非常流行的 Redux 中间件，用于处理异步操作。它的工作方式是使用一个函数来包装 Redux action，这个函数被称为 thunk。当 action 被调用时，thunk 会在其中执行异步操作，并在异步操作完成后触发 action。它的用法非常简单，非常适合处理简单的异步操作，如发送 API 请求或调用 setTimeout。
以下是 Redux-thunk 的示例代码：
-- -------------------- ---- -------
----- --------- - -- -- -
------ ---------- -- -
---------- ----- -------------------- ---
------ -------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- -------- ----- ---
---
-
-在上面的代码中，我们将 API 请求的结果存储在 Redux store 中。Redux-thunk 使我们能够在异步操作之前或之后派发 Redux actions，这些 actions 可以更改应用程序的状态，触发 UI 更新。但是，使用 Redux-thunk 处理复杂的异步流程可能会变得非常混乱和难以维护。
Redux-observable
Redux-observable 是一个基于 RxJS 的 Redux 中间件，它可以更好地处理复杂的异步流程。当我们需要处理多个异步操作和连续的异步操作时，Redux-observable 就可以发挥它的作用。它的原理是你先创建一个 Observable，这个 Observable 发出的事件会被监听并作为 Redux action。然后，您可以使用 RxJS 操作符来处理此事件流。
以下是 Redux-observable 的示例代码：
-- -------------------- ---- -------
----- ------------- - ------- --
-------------
---------------------
--------------- --
-------------------------------------------------
----------------- -- -----------------------
-------- -- -- ----- --------------------- -------- ---- ----
---------------- -- ---- ----- --------------------- -------- ----- ---
-
-
--在上例中，我们使用 ofType 操作符来将发出的 action 限定为 FETCH_DATA 类型，然后我们发出一个 API 请求并将其转换为 Observable 流。然后，我们使用 mergeMap 来将 Observable 流打平，以便我们可以处理 API 响应。最后，我们使用 map 操作符来创建表示成功操作和 catchError 操作符的对象，以显示和处理错误信息。
当然，Redux-observable 比 Redux-thunk 更复杂。在使用 Redux-observable 时，您需要理解响应式编程的概念，以及如何使用 RxJS 操作符来操作流。在简单的项目中，可能并不需要使用 Redux-observable，但它非常适用于处理复杂的异步流程。
哪种更好？
Redux-thunk 和 Redux-observable 都是很好的中间件，但它们的用途不同。如果您只需要处理简单的异步操作，那么 Redux-thunk 就可以胜任。但是，如果您需要处理复杂的异步流程或多个连续的异步操作，则应使用 Redux-observable。
在实践中，您可以根据项目的需求来选择最适合您的中间件。如果您正在处理简单的异步流程，您可以选择 Redux-thunk。如果您想要更强大的异步处理能力，并且您已经熟悉了 RxJS 和响应式编程，则应尝试使用 Redux-observable。
结论
在本文中，我们介绍了 Redux-thunk 和 Redux-observable 两种流行的 Redux 中间件，它们都是用于处理异步操作的。我们比较了它们的差异，且给出了使用示例。最后，我们知道在选择中间件时应该根据项目需求来选择合适的中间件。
把掌握 Redux-thunk 和 Redux-observable 完全掌握可以让我们更好地书写现代 Web 应用程序，并且可以更好地处理它们复杂的异步流程。如果您正在学习并使用 React 或 Redux，应该尝试使用其中的一个中间件，并将其纳入架构中，以获取更好的程序性能和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fa655644713626014c0563