React 中如何使用 Redux Thunk 中间件
在 React 应用中， Redux 是一个非常强大的状态管理工具。然而，有时候我们需要在 Redux 中处理异步操作，这时就需要使用 Redux Thunk 中间件。本文将介绍如何在 React 中使用 Redux Thunk 中间件，并提供示例代码。
什么是 Redux Thunk 中间件？
Redux Thunk 是 Redux 的一个中间件，它允许 action 创建函数返回一个函数而不是一个对象。这个返回的函数可以接收 dispatch 方法和 getState 方法作为参数，可以在内部进行异步操作，然后再 dispatch 一个普通的 action。
如何在 React 中使用 Redux Thunk 中间件？
首先，需要在 Redux Store 中引入 Redux Thunk 中间件。可以使用 redux-thunk 库来实现。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------------------ ------------------------ ------ ------- ------
在上面的代码中，我们通过 applyMiddleware 方法将 Redux Thunk 中间件添加到 store 中。
接下来，我们可以创建一个 action 创建函数，这个函数返回一个函数，这个函数可以在内部进行异步操作，然后再 dispatch 一个普通的 action。
------ ----- --------- - -- -- -
------ -------- -- -
-----------------------------
-------------------------------------------------------
-------------- -- -
----- ---- - --------------
---------------------------------
--
------------ -- -
----- ------------ - --------------
-----------------------------------------
---
--
--在上面的代码中，我们首先 dispatch 了一个 fetchDataRequest 的 action，表示正在获取数据。然后使用 axios 库发起异步请求，请求成功后 dispatch 了一个 fetchDataSuccess 的 action，表示获取数据成功。如果请求失败，则 dispatch 了一个 fetchDataFailure 的 action，表示获取数据失败。
最后，我们需要在组件中使用这个 action 创建函数。
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
----- --- - -- -- -
----- -------- - --------------
----- ---- - ----------------- -- ------------
------------ -- -
----------------------
-- ------------
------ -
-----
------------- - ------------------- - -----
----------- - --------------------- - -----
----
-------------------- -- -
--- -------------------------------
---
-----
------
--
--
------ ------- ----在上面的代码中，我们使用了 useSelector 钩子来从 Redux Store 中获取数据，使用了 useEffect 钩子来在组件挂载时发起异步请求。如果数据正在加载中，显示一个 Loading... 的提示；如果数据获取失败，显示错误信息；如果数据获取成功，显示数据列表。
总结
本文介绍了如何在 React 中使用 Redux Thunk 中间件来处理异步操作。通过使用 Redux Thunk 中间件，我们可以更加方便地进行异步操作，并且可以将异步操作和普通的 action 统一管理，使代码更加清晰易懂。希望本文能够对大家学习 Redux 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66149a72d10417a2224d48ee