在前端开发中，状态管理是必不可少的。Redux 是一个流行的状态管理库，可以帮助开发者更好地管理应用程序的状态，并提供了一个可预测的状态变化过程。
redux-thunk-promise 是一个 Redux 中间件，它提供了一种简单的方式来在 Redux 中处理异步操作。它允许我们在 Redux 的 action 处理函数中，通过 dispatch 其他的 action，并让这些 action 在异步操作完成后再次被 dispatch。在本篇文章中，我们将详细介绍如何使用 redux-thunk-promise 实现异步操作。
安装
我们可以使用 npm 来安装 redux-thunk-promise：
npm install redux-thunk-promise
使用
在 Redux 应用程序中，我们可以定义一个 action 处理函数，该函数将接收 dispatch 和 getState 作为参数。我们可以在该函数中执行异步操作，并在异步操作完成后 dispatch 让应用程序呈现不同状态的 action。
在下面的示例中，我们将使用 redux-thunk-promise 异步获取数据。我们首先定义一个 action 类型：
export const FETCH_DATA = 'FETCH_DATA'
然后，我们定义一个 action 创建器，该创建器为我们的异步操作返回一个 thunk 函数：
-- -------------------- ---- -------
------ ----- ---- -------
------ ----- --------- - -- -- -------- -- -
---------- ----- ---------- --
------ ----------------------------------------
-------------- -- -
---------- ----- ------------------- -------- ------------- --
------ -------------
--
------------ -- -
---------- ----- ------------------- -------- ----- --
----- -----
--
-在上面的代码中，我们首先 dispatch 一个 FETCH_DATA action，以便告诉 UI 我们正在获取数据。然后，我们使用 axios 来发出异步 GET 请求，并根据响应 dispatch 不同的 action。如果请求失败，我们将使用 THROW_ERROR action 抛出错误，以便 UI 可以显示错误消息。
在上面的代码中，我们将返回一个 promise，以便在异步操作完成后可以在 Redux-thunk-promise 中 dispatch 一个 action。当这个 promise 完成时，我们将 dispatch FETCH_DATA_SUCCESS action，并将响应数据作为负载传递。如果返回 promise 是失败的，我们将 dispatch FETCH_DATA_FAILURE action 并抛出一个错误，以便应用程序可以捕获并显示错误消息。
为了使用该 action 创建器，我们只需要在组件中 dispatch fetchData action 即可：
-- -------------------- ---- -------
------ - --------- - ---- -----------
----- ----------- ------- --------------- -
------------------- -
--------------------------------
-
-------- -
-- ---
-
-
------ ------- ----------------------在上面的示例中，我们使用 React Redux 的 connect 函数将 fetchData action 与 MyComponent 组件连接起来。当组件挂载时，我们将 dispatch fetchData action 来异步获取数据。
总结
在本文中，我们看到了如何使用 redux-thunk-promise 在 Redux 应用程序中实现异步操作。通过使用 redux-thunk-promise，我们可以更轻松地管理异步操作，并使我们的应用程序变得更加可预测。如果你正在使用 Redux，并且需要实现异步操作，请务必考虑使用 redux-thunk-promise 这个中间件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8cf9