在前端开发中，经常需要向后端服务器发起异步请求获取数据或者执行操作。而在 React 中，Redux 是应用最广泛的状态管理工具之一。Redux 的设计思想是数据的单向流动，即 Action -> Reducer -> Store，这样可以方便地对应用的状态进行中心化管理。但是，Redux 本身并不支持异步操作，所以我们需要使用 Redux 中间件来处理异步操作，其中最常用的就是 redux-thunk+axios。
什么是 redux-thunk 和 axios
首先需要了解一下 redux-thunk 和 axios 的概念。
redux-thunk
redux-thunk 是 Redux 的一种中间件，它允许 Action 可以返回函数而不是对象。这样可以方便地处理异步操作，因为异步操作本身是不会直接返回数据的，需要通过回调等方式进行处理。redux-thunk 的基本参数格式如下：
const thunk = ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};axios
axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中使用，支持请求取消、请求拦截、全局默认配置等功能。axios 的基本用法如下：
-- -------------------- ---- -------
---------------------------
-------------- ---------- -
-- ------ -------
----------------------
--
--------------- ------- -
-- ------ -----
-------------------
---有了以上基础知识，我们就可以开始讲解在 Redux 中如何使用 redux-thunk+axios 发送异步请求了。
Step 1：引入 redux-thunk 和 axios
在 Redux 中使用 redux-thunk，我们需要将其作为 applyMiddleware 方法的参数传入 createStore 方法中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);接着，我们需要引入 axios：
import axios from 'axios';
Step 2：定义异步 Action
在 Redux 中，异步操作一般使用 Action Creator 来发起，但是因为 Redux 本身不支持异步操作，所以我们需要使用 redux-thunk 来将异步操作转换成同步操作。以下是一个异步 Action Creator 的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---------------- - -- -- -
------ -
----- --------------------
--
--
------ ----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- -----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- -----
--
--
------ ----- ---------- - -- -- -
------ -------- ---------- -
-----------------------------
-------------------------------------------------------
-------------- -- -
----- ----- - --------------
----------------------------------
--
------------ -- -
----- ------------ - --------------
-----------------------------------------
---
--
--在上面的例子中，首先我们定义了三个 Action Creator，分别表示请求用户数据请求开始、请求成功和请求失败时发送的 Action。接着，我们定义了一个异步的 fetchUsers Action Creator，这个函数返回的是一个函数，而不是一个对象。在函数中，我们首先发送 FETCH_USER_REQUEST Action 表示用户数据请求开始，然后使用 axios 发起异步请求，并在请求成功和请求失败时分别发送 FETCH_USER_SUCCESS 和 FETCH_USER_FAILURE Action。
Step 3：给组件注入 Action Creator
在组件中使用这个异步 Action Creator 需要用到 React-Redux 提供的 connect 方法。我们需要将当前组件中需要用到的状态和发送 Action 的方法映射到该组件的 props 属性中。以下是一个组件中使用 connect 接收异步 Action Creator 的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------------------
----- ------------- - -- --------- ---------- -- -- -
------------ -- -
-------------
-- ----
------ ---------------- - -
-------------------
- - -------------- - -
-------------------------
- - -
-----
-------- ---------
-----
--------- --
-------------- --
------------------------- -- --------------------
------
------
--
--
----- --------------- - ------- -- -
------ -
--------- ----------
--
--
----- ------------------ - ---------- -- -
------ -
----------- -- -- ----------------------
--
--
------ ------- ------------------------ -----------------------------------在上面的例子中，我们使用两个函数将状态中的 users 对象和 fetchUsers Action Creator 映射到当前组件的 props 属性中。componentDidMount 生命周期钩子将触发 fetchUsers 方法，发起一个异步请求并将返回的数据保存到 Redux Store 中。在渲染时，我们简单地展示了用户列表信息。
总结
通过上面的学习，我们了解了 Redux 中使用 redux-thunk+axios 发送异步请求的方法。使用这种方法可以方便地获取数据或者执行操作，而通过将 Action 和 State 集中管理，可以省去手动处理数据状态的繁琐过程，提高代码效率。该方法也可以帮助我们避免 Redux 异步操作的一些问题，如在状态更新方面的异步和同步处理，以及处理数据请求失败的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f68869f6b2d6eab3f1d214