介绍
Redux 是一种流行的 JavaScript 应用程序状态管理工具，它可以帮助我们管理应用程序中的状态。Redux-thunk 是一个 Redux 的中间件，它允许我们在 Redux 中编写异步操作。
在本文中，我们将讨论如何在 React 项目中使用 Redux-thunk 中间件。
安装
首先，我们需要安装 Redux 和 Redux-thunk：
npm install redux redux-thunk
配置
接下来，我们需要在 Redux 中应用 Redux-thunk 中间件。
我们可以使用 Redux 的 createStore 函数来创建 store，同时使用 applyMiddleware 函数来应用中间件。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);编写异步操作
现在，我们已经成功地将 Redux-thunk 中间件添加到 Redux 中。接下来，我们将编写一些异步操作。
Redux-thunk 允许我们编写返回函数的 action creator，而不是普通的对象。
例如，我们可以编写一个 action creator 来获取用户信息：
-- -------------------- ---- -------
------ ----- ----------- - -- -- -
------ -------- -- -
---------- ----- ------------------------- ---
-----------------------
--------- -- -----------
---------- -- -
----------
----- --------------------------
-------- ----
---
--
------------ -- -
----------
----- ------------------------
-------- -----
---
---
--
--在上面的代码中，我们首先分发了一个 FETCH_USER_INFO_REQUEST 的 action，用于显示加载状态。然后，我们使用 fetch 函数来获取用户信息，并在获取成功后分发 FETCH_USER_INFO_SUCCESS 的 action，将结果存储到 state 中。如果获取过程中发生错误，我们将分发 FETCH_USER_INFO_ERROR 的 action，将错误信息存储到 state 中。
使用异步操作
现在，我们已经编写了异步操作，接下来我们需要在组件中使用它。
我们可以使用 Redux 的 connect 函数来连接组件和 Redux store，并将 action creator 作为组件的 props 传递给组件。
例如，我们可以将 getUserInfo action creator 传递给组件：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------- - ---- -------------------------
----- ---- ------- --------- -
------------------- -
-------------------------
-
-------- -
----- - -------- ------ -------- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
------------------------
-----------------------
------
--
-
-
----- --------------- - ----- -- --
-------- -------------------
------ -----------------
--------- ---------------
---
------ ------- --------
----------------
- ----------- -
--------在上面的代码中，我们通过 connect 函数将 getUserInfo action creator 传递给组件，并将 loading、error 和 userInfo 作为 props 传递给组件。
在 componentDidMount 生命周期方法中，我们调用 getUserInfo action creator，从而触发异步操作，并将结果存储到 state 中。在 render 方法中，我们检查 loading 和 error 状态，并显示相应的信息。
结论
在本文中，我们讨论了如何在 React 项目中使用 Redux-thunk 中间件。我们首先安装了 Redux 和 Redux-thunk，然后在 Redux 中应用了 Redux-thunk 中间件。接下来，我们编写了一些异步操作，并在组件中使用了它们。
Redux-thunk 中间件是 Redux 的一个强大工具，它允许我们编写异步操作，并将它们与 Redux store 集成在一起。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753a9cc8bd460d3ada6a0e9