React-Redux 和 Redux-Thunk 是两个非常实用的前端开发工具，搭配起来可以帮助我们更方便地管理应用程序的状态，并实现异步请求功能。下面我们将详细介绍如何使用这两个工具来实现异步请求。
理解 Redux 原理
在我们开始讲解 React-Redux 和 Redux-Thunk 的使用方法之前，我们需要先了解 Redux 的基本原理。
Redux 是一个状态管理库，它提供了一个简单的数据流来管理应用中的所有状态。Redux 应用程序中的状态被存储在一个单一的对象中，这个对象我们称之为 Store。在 Redux 里，Store 中的数据是不可直接修改的，而只能通过发起 Action 来修改其数据。
因此，Redux 应用程序主要由三个部分组成：Store、Action 和 Reducer。
- Store：存储应用程序的状态。
- Action：Describes 是如何改变应用程序状态的对象。
- Reducer：纯函数，用于将 Action 传递到 Store 中。当 Store 接收到新的 Action 时，Reducer 会计算出新的 State 并返回给 Store，从而更新应用程序的状态。
使用 React-Redux
React-Redux 是一个库，它将 Redux 和 React 框架的两个核心思想（组件和单向数据流）结合起来，提供了一个简单方便的方式来管理应用程序的状态。
使用 React-Redux 时，我们需要首先安装该库，并创建一个 Store，然后在 React 组件中使用该 Store 来管理应用程序的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
--- --- ----- ---
-----------
--
-
------ ------- ----在这个例子中，我们创建了一个名为 store 的 Store，然后使用 Provider 包装整个应用程序，使其能够访问该 Store。现在，我们就可以在组件中使用 Store 了。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- --------- ------ --------- -- -
------ -
--
----------------
------- ---------------------------------
---
--
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ -----------------------------在这个例子中，我们创建了一个计数器组件，它会显示一个数字和一个按钮。我们使用 connect 函数将该组件与 Store 进行连接，并通过 mapStateToProps 和 mapDispatchToProps 函数将 count 属性和 increment 属性注入该组件中。这样，我们就可以在组件中使用 Store 中的数据和更新函数了。
使用 Redux-Thunk
现在，我们已经可以使用 React-Redux 来管理应用程序的状态了。但是，有时候我们需要发送异步请求来获取数据，并将其存储在 Store 中。此时，就需要使用 Redux-Thunk。
Redux-Thunk 是 Redux 开发中常用的中间件，它允许我们来发送异步请求并在完成后更新 Store。
让我们假设我们有一个应用程序，该程序需要从服务器上获取数据。我们可以通过下面的方式来实现异步请求：
function getData() {
return dispatch => {
fetch('http://example.com/data.json')
.then(response => response.json())
.then(data => dispatch({ type: 'SET_DATA', payload: data }))
.catch(error => console.log(error));
};
}在这个例子中，我们首先创建了一个名为 getData 的函数，它返回了一个函数。这个返回函数接收一个名为 dispatch 的参数，用于将 Action 发送到 Store 中。
在返回的函数中，我们使用 fetch 函数来发送异步请求，并在请求完成后使用 dispatch 函数向 Store 中发送 Action。在 Action 的 payload 中，我们将从服务器上获取到的数据存储起来。
现在，我们可以在 React 组件中引入 getData 函数，并将其作为 mapDispatchToProps 函数的一部分进行注入。这样，在组件中我们就可以调用该函数来发送异步请求了。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
-------- ----- ----- ------- -- -
------------ -- -
----------
-- ----
------ -
-----
----
-------------- -- -
--- -------------------------------
---
-----
------
--
-
----- --------------- - ----- -- --
----- ----------
---
----- ------------------ - -------- -- --
-------- -- -- -------------------
---
------ ------- ------------------------ -------------------------在这个例子中，我们通过 useEffect 钩子在组件加载完成后发送请求。然后，使用 map 函数将从 Store 中获取到的数据渲染到界面上。
总结
学会如何使用 React-Redux 和 Redux-Thunk 进行状态管理和异步请求对于前端开发人员来说非常重要。通过使用这两个工具，我们可以更方便地管理应用程序的状态，并能够轻松地发送异步请求。希望本篇文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a4ccc48841e989472c824