在使用 React 及其对应的 Redux 状态管理框架时，你可能会遇到异步请求的数据渲染问题。比如在组件渲染前还没有得到异步请求的数据，这时 redux store 中的数据就无法及时更新，导致组件无法及时渲染对应的数据。本文将介绍一个解决这类问题的方法，通过 redux-thunk 中间件来处理异步数据请求，该方法能够解决 React 中 Redux 显示异步问题。
redux-thunk
redux-thunk 中间件允许我们在 Redux 流程中进行异步操作，此外它可以让 action 在需要时返回一个函数而不是一个对象。这就允许我们在 action 中进行异步操作，等异步操作完成后在 dispatch action。
实现异步操作
假设有一个简单的异步请求发送到服务器，系统需要在请求发送之前清空组件的所有旧数据，并在请求返回后将新数据存储到 Redux store 中。这种实现
首先，我们定义一个 Redux action，用于在异步请求前和请求后分别清空数据和更新数据，代码如下所示：
------ ----- ------------ - ---------------
------ ----- ------------ - ---------------
------ ----- ----------- - -- -- --
----- -------------
---
------ ----- ----------- - ------ -- --
----- -------------
-------- -----
---
------ ----- --------- - ----- -- ---------- -- -
------------------------
------ ----------
---------------- -- ----------------
------------ -- -----------------------------
--在上面的代码中，requestData() action 简单地返回一个类型为 REQUEST_DATA 的对象。而 receiveData(data) action 返回一个类型为 RECEIVE_DATA 的对象以及数据对象作为 payload 。fetchData(url) action 返回一个函数，该函数被调用时 dispatch requestData() action，然后发送异步请求并在请求后将响应数据 dispatch 到 receiveData() action。
接下来，我们使用 React 组件来消费这些 Redux action。我们使用 mapStateToProps 函数将 Redux store 中的状态转换为 props，这里我们提供了一个当数据被请求和数据被接收时渲染的组件示例：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- --- - -- ----------- ----- ------------- --------- -- -- -
------------ -- -
--------------------------------------------------------
-- ----
-- ------------ -
------ ------------ ----------
-
-- ----- --- ----- -
------ --------------------------
-
------ -
-------
-------
----
-------------
---------------
----------------
-----
--------
-------
---------------- -- -
--- --------------
--------------------
---------------------
-----------------------
-----
---
--------
--------
--
--
----- --------------- - -- ----------- ----- ------------ -- -- --
-----------
-----
-------------
---
------ ------- ------------------------ - --------- --------在 App 组件中，我们定义了状态转换函数 mapStateToProps ，将 Redux store 中的状态解构到组件的 props 中，并使用 Connect 高阶组件将 fetchData() 方法注入到 props。
在 useEffect 钩子中，我们初始化组件，并在 fetchData('https://jsonplaceholder.typicode.com/users') 调用中完成异步请求。此外，我们还检查 isFetching 和 data 的值，以在加载数据时显示 Loading... 或者在数据为空时显示错误消息。
结论
Redux-thunk 中间件是一种处理异步请求的优秀解决方案，它允许我们封装异步请求并将异步请求结果更新到 Redux store 中，这解决了在 React 框架中 Redux 显示异步问题。在本文中，我们展示了如何使用 redux-thunk 中间件来处理异步操作，可以帮助您优化代码，提高 React 应用程序的性能和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671da5fa9babaf620fb7640c