在前端开发中，经常需要进行异步数据处理。Redux 是一个非常流行的状态管理库，它提供了一种优雅的方式来处理 JavaScript 应用程序中的状态。Redux 通过单一数据源和无副作用的纯函数来管理应用程序的状态，从而使应用程序更容易理解、测试和维护。而当我们需要进行异步处理时，如何在 Redux 中实现异步请求呢？
中间件
在 Redux 中，中间件就是一个函数，它重新定义了 Redux 的 dispatch 函数。当一个 Action 被发送到 Redux 时，中间件将截获 Action 并可以在 Action 到达 reducer 之前执行自己的代码。常见的 Redux 中间件包括： thunk、saga 和 promise。
在 Redux 中使用中间件可以帮助我们处理异步操作，并将异步操作的结果以同步操作的方式传递给 reducer，使得 reducer 可以根据相应的 Action 更新应用程序中的状态。
Redux-thunk
Redux-thunk 是一个比较流行的 Redux 中间件，它允许我们在 Redux 应用程序中发送异步 Action。使用 Redux-thunk 可以在 Action 中触发异步操作，并在异步操作完成后分发另一个 Action 更新应用程序的状态。
下面是一个使用 Redux-thunk 处理异步的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
---------- ------
----- -----
------ ----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- ---------- ---- --
---- ---------------------
------ - --------- ---------- ------ ----- -------------- --
---- ---------------------
------ - --------- ---------- ------ ------ -------------- --
--------
------ ------
-
--
----- --------- - -- -- -
------ ---------- -- -
---------- ----- -------------------- ---
---------------------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- -------- ------------- ---
---
--
--
----- ----- - -------------------- ----------------------------------
----------------------------在上面的代码中，首先定义了一个 initialState 和一个 reducer，用于在应用程序中管理状态。其中 isLoading 表示是否正在加载数据，data 表示获取到的数据，error 表示发生的错误。
然后定义了一个 fetchData 函数，它返回一个函数作为 middleware，该函数接受一个 dispatch 参数，并在异步数据请求的不同状态分别分发不同的 Action 更新应用程序的状态。
最后，使用 createStore 函数和 applyMiddleware 函数创建一个 Redux store，并在 store 中分发 fetchData 函数，即触发异步操作。
通过上面的示例代码，我们可以看到 Redux-thunk 的处理异步的方式。在 Redux-thunk 中，我们可以发送一个函数而不是一个普通的 Action 对象。这个函数可以异步地获取数据，并触发其他的 Action 更新应用程序的状态。
结论
通过本文的介绍，我们了解了 Redux 的异步结构，学习了 Redux-thunk 中间件的使用方法。当我们需要进行异步数据处理时，使用 Redux-thunk 中间件是一个非常便捷的方式。Redux-thunk 允许我们使用简单的方式发送异步请求，并在异步请求完成后触发其他的 Action 更新应用程序的状态，从而实现状态管理的统一和规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fa64ae884a3e30f2f5a87