简介
Redux 是一种用于 JavaScript 应用程序的可预测状态容器。它是一个独立的库，可以与 React、Angular、Vue 等前端框架一起使用，用于管理应用程序的状态。
在实际应用中，前端需要与后端进行数据交互。Redux 中可以通过中间件来实现与后端 API 的交互，其中最常用的是 Redux Thunk 中间件。
本文将详细介绍如何在 Redux 中使用 Redux Thunk 中间件与后端 API 进行交互，并通过示例代码进行演示。
Redux Thunk 中间件
Redux Thunk 中间件允许我们在 Redux 中编写异步代码。它可以让我们在 Redux action 中返回一个函数，而不是一个普通的对象。
例如，我们可以在 action 中发起一个 AJAX 请求，然后在请求完成后再分发一个新的 action 来更新应用程序的状态。
在 Redux Thunk 中间件的作用下，action 可以返回以下两种形式的内容：
- 一个普通的对象，例如
{type: 'FETCH_DATA_SUCCESS', payload: {id: 1, name: 'Alice'}}。 - 一个函数，这个函数接收
dispatch、getState这两个函数作为参数，例如dispatch => {fetchData().then(data => dispatch({type: 'FETCH_DATA_SUCCESS', payload: data}))}。
那么，我们需要在 Redux 应用程序中集成 Redux Thunk 中间件。
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(thunk)
)示例代码
现在来看一个使用了 Redux Thunk 中间件的示例，它可以向后端 API 发送一个简单的 GET 请求，并将请求结果存储到 Redux store 中。
首先，我们需要定义一个 action 方法，这个方法返回一个函数。
-- -------------------- ---- -------
------ -------- ----------- -
------ -------- -- -
--------------- ----------------------
------ ------------------
-------------- -- ----------------
---------- -- -
--------------- --------------------- -------- ------
--
------------ -- -
--------------- --------------------- ------ ---------------
--
-
-这个方法返回了一个函数，这个函数接收一个 dispatch 函数作为参数，它会在请求开始前先分发一个 FETCH_DATA_REQUEST action。
然后，它调用 fetch 方法来发起一个 GET 请求，并将结果转换成 JSON 格式返回。
这个函数的最终目的是将数据存储到 Redux store 中。它会通过分发一个 FETCH_DATA_SUCCESS action 来完成这个任务。如果请求出错，则它会分发一个 FETCH_DATA_FAILURE action。
现在，我们需要在组件中使用这个 action。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
------ - --------- - ---- ------------
----- ---------------- ------- --------- -
------------------- -
----------------------
-
-------- -
----- - ----------- ----- ----- - - ----------
-- ------------ -
------ ---------------------
-
-- ------- -
------ ----------- -------------
-
------ ---------- ----------------------------
-
-
----- --------------- - ----- -- -
------ -
----------- -----------------
----- -----------
------ -----------
-
-
------ ------- ------------------------ - --------- --------------------在这个组件中，我们首先使用 React 的 componentDidMount 方法来发起数据请求。
然后，我们在 props 中使用 isFetching、data、error 三个变量来渲染组件。如果 isFetching 为 true，则显示 Loading，如果请求出错，则显示错误信息，否则显示数据。
最后，我们使用 connect 函数将组件和 Redux store 进行连接。
总结
本文介绍了如何在 Redux 中使用 Redux Thunk 中间件与后端 API 进行交互。
通过使用 Redux Thunk 中间件，我们可以在 Redux action 中返回函数。这个函数可以进行异步操作，例如发起一个 AJAX 请求，然后在请求完成后再分发新的 action 以更新应用程序的状态。
在实际应用中，我们需要使用 fetch 或其他 AJAX 库来发起请求，并将请求结果转换成 JSON 格式。
最后，我们演示了如何在组件中使用这个 action，并将数据存储到 Redux store 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654ee8d07d4982a6eb7f9a4b