随着 Web 应用的不断发展，与服务器进行数据的交互越来越成为 Web 前端开发中不可或缺的一部分。而我们通常使用的方法是通过发送 Ajax 请求获取数据。但是，如果仅仅是使用 Ajax，代码的复杂度和可维护性都比较差。因此，Redux 结合 axios 被许多前端开发人员所推崇，它们的结合能够为我们提供一种更加统一、简化的方式来管理数据请求。
什么是 Redux？
Redux 是一个专门用于 JavaScript 应用程序的状态容器，它基于 Flux 设计。Redux 可以用于管理应用程序的状态，使我们可以轻松地共享状态并通过预测性的数据流来处理状态的变化。
什么是 Axios？
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于客户端和服务器端。它可以让我们轻松地发送 HTTP 请求，同时支持拦截器、取消请求等功能。
基础实现
我们首先通过 npm 安装 Redux 和 axios：
npm install redux axios --save
然后，在我们的项目中创建一个 Redux store。我们需要使用 redux-thunk 中间件来支持异步数据请求：
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
const appReducer = (state = {}, action) => {
// ... 做一些状态管理
};
export const store = createStore(appReducer, applyMiddleware(thunkMiddleware));使用中间件之后，我们可以创建一个 Redux action，用于发送异步请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---------------- - -------------------
------ ----- ---------------- - -------------------
------ ----- ---------------- - -------------------
------ ----- -------------- - -- -- --
----- -----------------
---
------ ----- -------------- - ------ -- --
----- -----------------
-------- -----
---
------ ----- -------------- - ------- -- --
----- -----------------
-------- ------
---
------ ----- ------- - -- -- -
------ ---------- -- -
---------------------------
------ -------------------------------------------------------
-------------- -- -
----- ---- - --------------
-------------------------------
--
------------ -- -
----- -------- - --------------
-----------------------------------
---
--
--在这个 Redux action 中，我们首先发送一个 GET 请求，并通过 dispatch 发送一个请求的初始状态（GET_DATA_REQUEST）。当请求成功时，我们会通过 dispatch 发送一个请求成功的状态（GET_DATA_SUCCESS），同时将请求返回的数据存在 action.payload 中。当请求失败时，我们会通过 dispatch 发送一个请求失败的状态（GET_DATA_FAILURE），同时将请求失败的信息存在 action.payload 中。
在 reducer 中，我们需要处理这些状态：
-- -------------------- ---- -------
------ - ----------------- ----------------- ---------------- - ---- ------------
----- ------------ - -
----- ---
---------- ------
--------- ---
--
------ ----- ---------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ - --------- ---------- ---- --
---- -----------------
------ - --------- ---------- ------ ----- -------------- --
---- -----------------
------ - --------- ---------- ------ --------- -------------- --
--------
------ ------
-
--当我们在组件中使用这个 action 的时候：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------- - ---- ------------
------ ----- --- - -- -- -
----- ---- - ----------------- -- -----------------------
----- --------- - ----------------- -- ----------------------------
----- -------- - ----------------- -- ---------------------------
----- -------- - --------------
------------ -- -
--------------------
-- ------------
-- ----------- -
------ ----------------------
-
------ -
-----
---------------- -- -
---- --------------------------------
---
--------- -- ----------------------
------
--
--其中，我们使用 useSelector 和 useDispatch 来从 Redux store 中获取数据，并 dispatch 相应的 action。在组件中，我们首先判断是否正在加载数据，如果正在加载数据，我们会显示一个 “Loading...” 的信息。当数据加载完成后，我们将数据渲染到页面上。如果出现错误信息，我们会显示一个错误信息。
总结
在这篇文章中，我们了解了 Redux 和 axios，并展示了如何使用它们来实现 API 请求。通过使用 Redux 和 axios，我们可以更加方便地管理数据请求，同时也使代码更加简洁易懂。如果您正在构建一个需要获取数据的 Web 应用，Redux 和 axios 可能是您需要使用的最佳方案之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f718e968c7c53b0176ff8