Redux 是一个流行的 JavaScript 应用程序状态管理库。在 Redux 中，我们可以轻松地管理应用程序状态并在应用程序中共享状态。但是，当我们向第三方 API 发送请求并等待响应时，它可能会导致 Redux 中的状态变得复杂。在本文中，我们将探讨如何在 Redux 中优雅地处理第三方 API 返回的状态。
为什么需要处理第三方 API 返回的状态
在实际应用程序中，我们通常需要向第三方 API 发送请求以获取数据。但是，当我们等待响应时，我们的应用程序可能会处于不同的状态。例如，我们可能正在等待响应，或者我们可能已经收到了一个错误消息。在 Redux 中，我们需要将这些状态映射到应用程序状态中，以便我们可以在应用程序中使用它们。
处理第三方 API 返回状态的最佳实践
以下是在 Redux 中优雅地处理第三方 API 返回状态的最佳实践：
1. 将第三方 API 请求状态分离到单独的 reducer 中
我们可以将第三方 API 请求状态分离到单独的 reducer 中。例如，我们可以创建一个名为 api 的 reducer，它将处理所有第三方 API 请求的状态。我们可以使用以下方式来定义 api reducer：
-- -------------------- ---- -------
----- ------------ - -
---------- ------
------ -----
----- -----
--
-------- ---------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ - --------- ---------- ---- --
---- ---------------------
------ - --------- ---------- ------ ----- -------------- --
---- ---------------------
------ - --------- ---------- ------ ------ -------------- --
--------
------ ------
-
-在上面的代码中，我们定义了一个名为 apiReducer 的 reducer，它将处理所有第三方 API 请求的状态。我们使用 isLoading 属性来指示我们是否正在等待响应，error 属性来指示我们是否收到了错误消息，data 属性来存储我们从 API 中获取的数据。
2. 发送请求并更新状态
我们可以使用 Redux 中的 thunk 中间件来发送异步请求并更新状态。例如，我们可以定义一个名为 fetchData 的 thunk，它将发送一个异步请求并更新 api reducer 的状态。我们可以使用以下方式来定义 fetchData thunk：
-- -------------------- ---- -------
-------- ----------- -
------ ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- ------- -
---------- ----- --------------------- -------- ------------- ---
-
--
-在上面的代码中，我们定义了一个名为 fetchData 的 thunk，它将发送一个异步请求并更新 api reducer 的状态。我们使用 try...catch 语句来处理可能出现的错误，并在需要时更新 api reducer 的状态。
3. 使用 selector 来获取 API 返回的状态
我们可以使用 selector 来获取 API 返回的状态。例如，我们可以定义一个名为 getApiData 的 selector，它将返回 api reducer 中的 data 属性。我们可以使用以下方式来定义 getApiData selector：
function getApiData(state) {
return state.api.data;
}在上面的代码中，我们定义了一个名为 getApiData 的 selector，它将返回 api reducer 中的 data 属性。我们可以在组件中使用 getApiData selector 来获取 API 返回的数据。
示例代码
以下是一个使用 Redux 处理第三方 API 返回状态的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
------ - ---------- - ---- --------------
-------- ----- -
----- -------- - --------------
----- ---- - ------------------------
------------ -- -
----------------------
-- ------------
------ -
-----
----- - -
----
---------------- -- -
--- ------------------------------
---
-----
- - -
-----------------
--
------
--
-
------ ------- ----在上面的代码中，我们使用 useSelector hook 来获取 api reducer 中的 data 属性，并使用 useEffect hook 来发送异步请求。我们在组件中使用 data 属性来渲染获取的数据。
结论
在 Redux 中优雅地处理第三方 API 返回状态是一个常见的需求。我们可以将第三方 API 请求状态分离到单独的 reducer 中，并使用 Redux 中的 thunk 中间件来发送异步请求并更新状态。我们可以使用 selector 来获取 API 返回的状态，并在组件中使用它们来渲染数据。通过遵循这些最佳实践，我们可以在 Redux 中优雅地处理第三方 API 返回状态，使我们的应用程序更加健壮和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676289bb856ee0c1d4050938