前言
React-Redux 是在 React 应用中使用 Redux 的官方库，它能让我们更方便的管理和更新应用程序中的状态。Redux-Thunk 则是一个 Redux 中间件，它允许我们在 Redux 中进行异步操作，从而让我们更灵活地处理数据请求、响应、错误等。
本文将介绍如何在 React-Redux 中集成 Redux-Thunk，并讲解一些常见问题解决方式，同时提供示例代码以便读者更好的理解。
安装和配置
在安装 Redux 和 React-Redux 后，我们需要再次安装 Redux-Thunk。
npm install redux-thunk
安装完成后，在 Redux 中使用 Redux-Thunk 核心代码为：
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);在这段代码中，我们引入了 Redux-Thunk，并使用 applyMiddleware 函数将其作为 applyMiddleware 的参数传递给 createStore 函数。因此，在 Redux 应用中，我们就能够使用 Redux-Thunk 来处理异步操作。
示例代码
下面是一个简单的示例代码，说明如何在Redux中使用 Redux-Thunk：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ ----- ---- --------
------ ----- ------- - -------------------------
------ ----- --------- - -- -- -
------ ----- ---------- --------- -- -
--- -
----- -------- - ----- ----------------------------------------------------------
---------------------------------
- ----- ------- -
-------------------
-
--
--在这个代码片段中，我们已经通过 createAction 创建了一个简单的 Redux Action。然后，fetchData 函数也是一个 Action Creators。它将使用 axios 库发出一个 HTTP 请求，获取数据，并将请求结果传递给 getData action。同时我们还使用了 try... catch ，保证代码运行过程中出错时不会崩溃。
接下来，在 React-Redux 中使用 fetchData 方法获取数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- --- ------- --------------- -
------------------- -
-----------------------
-
-------- -
----- - ---- - - -----------
------ ----------------------------------
-
-
----- --------------- - ----- -- -
------ -
----- ----------
--
--
------ ------- ------------------------ - --------- --------在这段代码中，我们将 fetchData action 封装为 props，然后将它传递给了 connect 函数，再将 fetchData 函数作为部分属性传递给 App。
常见问题
如何访问 Redux-Thunk 的 dispatch 函数？
通常情况下，我们可以使用 dispatch 函数将数据传递给 store 中的 reducer。然而，在使用 Redux-Thunk 的场景下，我们还需要使用 dispatch 函数进行异步操作。因此，我们需要使用 redux-thunk 提供的 dispatch 函数。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ ----- ---- --------
------ ----- ------- - -------------------------
------ ----- --------- - -- -- -
------ ----- ---------- --------- -- -
--- -
----- -------- - ----- ----------------------------------------------------------
---------------------------------
- ----- ------- -
----------
----- ----------------------
-------- ------
------ ----
---
-
--
--在这个代码片段中，我们首先通过导入 createAction 创建了一个简单的 redux action，然后实现了异步获取数据的 fetchData 函数。注意，在此函数中，我们使用的是 redux-thunk 中间件提供的 dispatch 函数。
什么时候使用 Redux-Thunk？
通常情况下，我们在处理异步操作时使用 Redux-Thunk。例如获取数据、调用 API 请求等场景都适用。
Redux-Thunk 与 Redux-Saga 有何不同？
Redux-Thunk 和 Redux-Saga 都是 Redux 的中间件，但有不同的用途和实现方式。Redux-Saga 基于 ES6 的 Generator 和 Channel 实现，它提供了更强大的异步操作处理能力。而 Redux-Thunk 则是一个更简单的异步操作处理库。
Redux-Thunk 影响 Redux 性能吗？
Redux-Thunk 会让 Redux 性能下降吗？实际上，Redux-Thunk 并不会显著影响 Redux 应用的性能。Redux 本身是一个非常快的状态管理库，Redux-Thunk 只是其中一个中间件而已。因此，与使用其他中间件相比，Redux-Thunk 不会显著影响 Redux 的性能表现。
结论
Redux-Thunk 是一个强大的 Redux 中间件，能够让我们在 Redux 中进行异步操作。在 React 应用中，我们可以使用 Redux-Thunk 完成获取数据、响应和错误处理等任务。
本文主要介绍了如何在 React-Redux 中集成 Redux-Thunk，并向读者展示了一些示例代码，同时解答了常见问题。我们希望，这篇文章能对读者在使用 Redux-Thunk 中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c10bb14b275ea6fe25d8a