如何优雅地处理 Redux 中异步与同步数据
在前端开发中，Redux 作为一种预测性和统一的 JavaScript 状态容器，已经变得越来越流行。Redux 允许您管理应用程序的所有状态，并将它们存储在单个位置，以便您可以在整个应用程序中轻松访问它们。但是，由于在 Redux 中，数据都是同步的。可在使用 Redux 时，您可能还需要处理异步数据，例如通过 API 调用或其他网络请求获取的数据。在这篇文章中，我们将探讨如何优雅地处理 Redux 中的异步数据。
Redux 中的中间件
Redux 中间件表示一个函数，它可以访问当前的 Redux 状态，它可以采取行动（例如发出异步调用），并最终通过 chain 或派发器返回新的状态。Redux 提供了一些内置的中间件，例如 redux-thunk 和 redux-saga，这些中间件可以让您处理异步数据。这两个中间件都不同，下面我们将详细了解它们的不同。
使用 redux-thunk
redux-thunk 是 Redux 的默认中间件之一。它允许您像通常在 Redux 中派发普通同步函数一样派发异步函数。redux-thunk 的基本思想是使您的 Redux 操作更加可扩展。
在redux-thunk中，派发器的参数是一个函数，这个函数本身可以接收 dispatch 和 getState 函数作为参数，它可以根据需要使用这些参数来处理异步操作。例如：
-- -------------------- ---- -------
----- ----------------- - ---- -- -------- -- -
---------- ----- -------------------- ---
------ ---------------------------- -
------- -------
----- --------------------
--
---------- -- ------------
------------ -- -
---------- ----- ----------------------- ----- ------ ---
--
---------- -- -
---------- ----- --------------------- ------ ----------- ---
---
--在这个 action 创建函数中，我们首先 dispatch 一个名为“START_ASYNC_ACTION”的同步操作。接着，我们使用 fetch API 发起一个 POST 请求，将数据作为 JSON 格式的字符串发送到服务器。并在成功或出错的情况下，dispatch 不同的 action。请注意，使用异步操作必须返回一个新函数，这个新函数使用 dispatch 和 getState 这两个 Redux 的可用函数。这是使用 redux-thunk 处理异步操作的基本方法。
使用 async/await 和 redux-thunk
redux-thunk 支持使用 async/await，您可以使用 async/await 做到更易读的异步操作。在派发器函数的内部，您可以执行所有异步操作，然后使用 dispatch 函数返回同步操作以触发状态更新。如下所示：
-- -------------------- ---- -------
----- ----------------- - ---- -- ----- -------- -- -
---------- ----- -------------------- ---
--- -
----- ---- - ----- ---------------------------- -
------- -------
----- --------------------
---
----- ------ - ----- ------------
---------- ----- ----------------------- ----- ------ ---
- ----- ----- -
---------- ----- --------------------- ------ ----------- ---
-
--在使用 async/await 的情况下，我们可以使用 try...catch 语句轻松处理错误。我们也可以根据需要使用 await 等待异步操作完成。下面我们将介绍另一个中间件——redux-saga，它使用了一些不同的概念，称为生成器函数，来处理异步数据。
使用 redux-saga
redux-saga 是一个另一个用于处理异步操作的流行 Redux 中间件。这个中间件使用 redux-saga/effects 库和生成器函数（Generator Function）来实现非阻塞和可测试的异步操作。如果您习惯于使用 Python 或其他编程语言中的生成器函数，则使用 redux-saga 可能比使用 redux-thunk 更加有用。
在使用 redux-sage 时，您需要将派发器替换为生成器函数，并通过调用类似 takeLatest、takeEvery、takeLatest 等类型的 saga 函数，来处理异步操作。这些函数的工作是监听一个特定的操作，当操作被触发时，它会在生成器函数中运行，这使得在存储的状态中更新数据变得非常简单。
例如，以下是一个简单的 redux-saga 用例，它在点击按钮时获取 GitHub 用户的数据，然后将数据添加到 Redux 状态中：
-- -------------------- ---- -------
------ - ---- ----- ---------- - ---- ---------------------
--------- --------------------- -
--- -
----- -------- - ----- ----------- --------------------------------------------------
----- ----- ----- ------------------------ -------- -------- ---
- ----- --- -
----- ----- ----- ----------------------- -------- --------- ---
-
-
------ --------- -------------------- -
----- --------------------------- ---------------
-在这个用例中，watchFetchUserData() 函数负责设置监听器，它监听名为“GET_USER_DATA”的操作，并将其转发到 fetchUserData() 生成器函数。用户数据是使用 redux-saga/effects 库中的 call 方法获取的。因为这是一个异步调用，所以我们 require call 方法来处理。最后，使用 put 方法将用户数据添加到 Redux 状态中。
结论
在 Redux 中处理异步操作时，您有两个选项：使用 redux-thunk 或 redux-saga 库。在使用 redux-thunk 时，您只需像在 Redux 中派发同步操作一样派发异步操作。而在使用 redux-saga 时，您需要创建一个派发器生成器函数来处理异步操作。无论您选择哪种方法，您可以使用 Redux 状态容器优雅地处理异步数据，使您的应用程序更加可伸缩和可维护。最后复习一些用例的代码，相信这篇文章可以给大家带来一定的启示。
参考链接:
https://redux.js.org/tutorials/fundamentals/part-6-async-logic https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html https://redux-saga.js.org/docs/api/ https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://redux.js.org/api/store#dispatch-action
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677322b86d66e0f9aae0137f