在前端开发中，管理应用程序状态的重要性不可忽视。Redux 是应用程序状态管理的一种流行方式，但它有时需要处理异步操作。这时，我们需要使用 redux-thunks。
Redux Thunks 是一个 npm 包，它帮助您简化复杂的异步操作，并使您的代码更易于测试和维护。本教程将介绍如何使用 redux-thunks 管理 Redux 应用程序的异步状态。
第一步：安装 redux-thunks
您可以使用 npm 进行安装，并添加到您的项目中：
npm install redux-thunk --save
第二步：使用 redux-thunks
在创建 Redux 的 store 时，为了支持 Redux Thunks，需要在 applyMiddleware() 中添加 redux-thunk middleware。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ -------- ---- ------------- ----- ----- - ------------ --------- ---------------------- -- ------ ------- ------
接下来，您可以在 Redux action creator 中使用 redux-thunk。当您需要处理异步操作时，可以将一个函数作为 action creator 的返回值，而不是直接返回一个 action 对象。
-- -------------------- ---- -------
------ -------- ------------- -
------ ------------------ -
-----------------------------
------ ------------------------------- -- -
------------------------------------------
-------------- -- -
------------------------------------------
---
--
-
-------- ------------------ -
------ - ----- -------------------- --
-
-------- ---------------------- -
------ - ----- --------------------- -------- ---- --
-
-------- ----------------------- -
------ - ----- --------------------- -------- ----- --
-在上面的示例中，fetchUser() 函数返回了一个函数，而不是一个对象。这个函数可以访问 dispatch() 方法和 getState() 方法。它首先 dispatch 一个 action，通知应用程序正在进行异步操作。然后，它调用一个异步操作（例如从服务器获取数据），然后 dispatch 成功或失败的 action。
第三步：结合 react-redux
您可以使用 connect() 函数将 redux-thunks 和 react-redux 连接起来，并在您的 React 组件中调用 action creator。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- ------------- ------- --------- -
------------------- -
--------------------------
-
-------- -
----- - ---- - - -----------
------ -
-----
------------- -- ----------------------
----------- -- ----------- -------------------
---------- -- ----------------------------
------
--
-
-
----- --------------- - ----- -- --
----- ----------
---
------ ------- ------------------------ - --------- ------------------在上面的示例中，我们在组件的 componentDidMount() 方法中调用 fetchUser() action creator。然后，我们使用 mapStateToProps() 函数将 Redux store 中的 user 状态映射到 UserContainer 组件的 props 上。在组件的 render() 方法中，我们根据用户状态显示适当的 UI。
总结
本教程介绍了如何使用 redux-thunks 管理您的 Redux 应用程序的异步状态。通过了解如何在 action creator 中返回一个函数，使用 redux-thunk 中间件，以及在 React 组件中使用 action creator，您可以更轻松地管理复杂的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725881e8991b448e8757