如果你使用 React 和 Redux 来构建前端应用程序，你可能会经常遇到异步操作的情况。虽然 Redux 提供了一种适合许多情况的同步操作解决方案，但是对于复杂的异步操作，你可能需要一些帮助来保持你的代码简洁和可扩展性。而 Redux-Async-Thunk 就是针对这些需求打造的一个好选择。
简介
Redux-Async-Thunk 是一个 Redux 的中间件，提供了一种方便的方式来处理异步操作。相对于其他中间件，它的优势主要在于两点：
- 可以通过简单的封装从 Redux 中调用异步操作；
- 可以与 Redux Toolkit 集成使用。
如果你已经熟悉 Redux，那么使用 Redux-Async-Thunk 工具将帮助你更加顺畅地处理异步操作。
安装
使用 Npm 来安装 Reduc-Async-Thunk：
npm install @reduxjs/toolkit
安装完成之后，就可以在你的项目中使用这个工具来处理异步操作。
使用教程
下面是一个使用 Redux-Async-Thunk 加载用户数据的代码示例：
-- -------------------- ---- -------
------ - ----------------- ----------- - ---- -------------------
------ ----- ---- --------
------ ----- --------- - -----------------
-----------------
----- -- -- -
----- -------- - ----- -----------------------
------ --------------
-
--
----- --------- - -------------
----- -------
------------- - ----- --- ------- ------- ------ ---- --
--------- ---
-------------- --------- -- -
-------
--------------------------- ------- -- -
------------ - ----------
--
----------------------------- ------- ------- -- -
------------ - ------------
---------- - ---------------
--
---------------------------- ------- ------- -- -
------------ - ---------
----------- - ---------------------
---
-
---
------ ------- ------------------在这个示例中，我们首先使用 createAsyncThunk 工具来创建一个用于异步请求用户数据的 ‘fetchUser’ 的 action。定义了一个返回 Axios 对象响应内容的异步函数，创建中间件时需要。随后，我们在 slice 中定义了一个名为 ‘user’ 的 reducer
接下来，我们在 extraReducers 方法中定义了一些额外的 reducer。这里我们将 reducers 属性设置为空，因为我们会使用 extraReducers 属性来定义我们的 action 针对不同状态下的行为。这些方法包括：
- 当异步操作开始时，将状态设置为“加载中”；
- 当异步操作成功时，将状态设置为“成功”，同时更新数据；
- 当异步操作失败时，将状态设置为“失败”，同时设置错误信息。
从 Redux-Async-Thunk 文档中了解了更多的 action 可创建方式，和额外参数的使用方式等。
这就是 Redux-Async-Thunk 的核心代码。通过这个例子，你可以了解到如何将 Redux-Async-Thunk 整合到你的 Redux 应用中，来优化异步操作。
总结
Redux-Async-Thunk 可以让你更简单地处理异步操作，将引入异步操作到 Redux 数据流中，同时避免了代码冗余。同时，这个工具还与 Redux Toolkit 集成非常友好，可以更加快速的使用上手。如果你在 Redux 中面临一些复杂的异步问题，那么 Redux-Async-Thunk 很可能就是你需要的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547e81e8991b448d1c30