Redux 是一种流行的 JavaScript 应用程序状态管理工具，它可以处理复杂的应用程序状态和异步请求。Redux 通过统一应用的数据和编写可预测的代码来管理应用程序状态。
在实际应用中，经常需要封装 API 请求，以便在 Redux 中进行调用。本文将介绍如何封装 Redux 的 API 请求。
使用 Redux-thunk
Redux-thunk 是一个 Redux 插件，可以帮助开发人员处理异步 Action。Redux-thunk 使开发人员能够在 Redux Store 上调度异步操作，而无需使用其他中间件或库。
在 Redux-thunk 中，Action 可以返回一个函数，函数会在 Action 被处理时被执行。这个函数会接收 Store 的 dispatch 和 getState 方法，以便在 Action 返回结果之前修改 Store 的状态。
以下是使用 Redux-thunk 的示例代码：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);封装 API 请求
我们可以封装适用于 Redux 的通用 API 请求函数并返回一个函数，然后将其用作 Redux Action。
以下是一个封装 API 请求的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- -------------- -
------ -------- ---------- -
------ --------------
-------------- -- -
----------
----- ----------------
-------- -------------
---
--
------------ -- -
----------
----- ----------------
-------- -----
---
---
-
-在这个示例中，我们使用 axios 库来处理 API 请求。fetchData 函数返回了一个函数，这个函数会在调用 fetchData Action 时被Redux-thunk 中间件执行。
当请求成功时，返回的数据将被分发到 Redux Store 中，并将调用类型为 FETCH_SUCCESS 的 Action。如果请求失败，则将调用类型为 FETCH_FAILURE 的 Action，其中 Payload 是错误对象。
优化封装 API 请求
以上示例中，我们仅仅封装了一个通用的 API 请求函数，这样还不够优雅。我们可以将其进一步封装，使其更加通用化和可维护。
以下是一个优化后的封装 API 请求的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- --------------- --------- ------- ---- ---- -- -
------ -------
---- ----
------- -------
----- ----
------------------ -- -
----------
----- ------------------
-------- -------------
---
---------------- -- -
----------
----- ------------------
-------- -----
---
---
-
------ -------- -------------- -
------ ---------- -- --------------- --------- ------- ------ --- ---
-
------ -------- ------------- ----- -
------ ---------- -- --------------- --------- ------- ------- ---- ---- ---
-在这个示例中，我们将通用 API 请求函数 createRequest 抽象出来，以便进行更加通用化和可维护的封装。fetchData 和 postData 函数现在只是调用 createRequest 函数以获取所需的参数。
总结
在 Redux 中封装 API 请求可以提高代码的可维护性和清晰度。使用 Redux-thunk 来处理异步请求，可以让应用程序更容易管理。通过封装通用 API 请求函数，可以减少重复代码，并提高代码可读性和可维护性。
在实践中，还有很多其他技术和方法可以帮助优化封装 API 请求功能。需要根据具体应用情况来选择使用哪种方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e3c27968c7c53b009eef4