如何使用Redux createAsyncThunk访问后端错误
Redux是一个用于JavaScript应用程序的可预测状态容器。它可以帮助管理应用程序的状态，并使状态的变化可追踪和可调试。createAsyncThunk是Redux Toolkit提供的一个工具函数，用于处理异步操作。
使用Redux createAsyncThunk访问后端错误的步骤如下：
- 首先，确保你已经安装了Redux和Redux Toolkit，并在应用程序中进行了配置。
- 在Redux的slice文件中，使用createAsyncThunk创建一个异步的thunk action。这个thunk action将处理与后端的通信，并返回一个Promise。
- 在Redux的slice文件中，使用createAsyncThunk创建一个异步的thunk action。这个thunk action将处理与后端的通信，并返回一个Promise。
- 在上面的代码中，fetchBackendData是一个异步的thunk action，它使用fetch函数从后端获取数据。如果发生错误，它将抛出一个错误。
- 在Redux的slice文件中，定义一个reducer来处理fetchBackendData的状态变化。
- 在Redux的slice文件中，定义一个reducer来处理fetchBackendData的状态变化。
- 在上面的代码中，extraReducers定义了fetchBackendData的状态变化。pending表示异步操作正在进行中，fulfilled表示异步操作成功完成，rejected表示异步操作失败。
- 在组件中使用fetchBackendData异步thunk action。
- 在组件中使用fetchBackendData异步thunk action。
- 在上面的代码中，使用useDispatch和useSelector来分发fetchBackendData异步thunk action并获取状态。根据loading、error和data的值，展示不同的UI。
这样，当点击"Fetch Data"按钮时，将触发fetchBackendData异步thunk action，从后端获取数据。在获取数据的过程中，可以展示loading状态，如果发生错误，可以展示错误信息，如果成功获取数据，可以展示数据。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网通信（IoT Hub）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯会议：https://cloud.tencent.com/product/tmeeting
相关·内容
我不确定当POST请求被发送到后端时，我应该如何获取来自后端的错误。如果我使用普通的axios调用，我可以简单地用以下命令从catch块中的响应对象中获取错误： error.response.data.errors 但是当使用Redux和使用createAsyncThunk方法时，在来自服务器的400状态码上，被拒绝的操作被分派，并且我得到的错误对象是如下所示的通用对象： {
message:
浏览 67提问于2021-06-26得票数 0
我和Redux有前端的问题。后端API与Postman一起正常工作，因此我知道问题并不存在，而且由于某种原因，我无法在Redux存储中填充数据。这是我的第一个createAsyncThunk，将userId传递给后端，所以我知道问题与此有关。我的后端API中有一个console.log，每当访问日志时都会打印它，这样我就可以看到它没有被访问。在Redux商店，我收到了一条被拒绝的消息，所以我认为这与此有关。
有人能在我的行动中看到任何
浏览 21提问于2021-04-05得票数 1
回答已采纳
如何在React组件之外访问redux-toolkit store变量？在React组件中，我可以使用它访问它。import { useSelector } from 'react-redux'; );
因为useSelector是不允许访问</e
浏览 3提问于2021-02-03得票数 0
回答已采纳
我正在尝试从rails后端API获取数据到redux商店。当我在中间件(console.log，createAsyncThunk)中使用数据时，我可以看到数据。但是，我不能把它放进redux商店。src/redux/doctorsSliceimport API from/api&
浏览 1提问于2021-07-19得票数 0
回答已采纳
1回答
我试图使用redux工具包从快速服务器访问错误消息。如果没有找到用户，那么我们发送错误信息与状态code.Everything是好的，当我使用邮递员，我得到错误的反应。但是当我试图在客户端访问它时，当我得到error.In网络选项卡时，axios响应是未定义的--我仍然会得到错误。这导致redux工具箱还原器不拒绝，而我无法获得错误消息。user = await findUser({
浏览 13提问于2022-07-04得票数 0
1回答
我最近发现了redux工具包，并对如何使用它处理操作和还原器分离提出了一些问题。在redux工具箱之前，我为还原器和操作提供了单独的文件夹和文件，但是在redux工具包教程中的所有示例中，它们都将它们的操作/块与它们的还原器/切片保存在同一个文件中。我需要使用axios和createAsyncThunk (我假设)来访问我的API。还是最好在单独的文件夹/文件中将操作和还原器分开？只使用creat
浏览 6提问于2020-05-29得票数 1
我成功地使用createSlice编写了还原器，但操作似乎很混乱。getPeople:action.payload } }}const listPeopleReducer = createSlice({
浏览 6提问于2021-08-04得票数 2
我正在尝试Redux-Toolkit，我真的很喜欢它的简洁性，但我不知道如何读取服务器响应状态码，并根据它来调度不同的操作。例如，我正在向API发送一个注册请求 export const registerRequest = createAsyncThunk( asyncfirstname, email, }) }
) 我可能会收到
浏览 22提问于2020-07-21得票数 3
回答已采纳
1回答
：无法访问从服务器发送的错误消息
、、、、
在后端，在路由处理程序函数中，我抛出一个错误&向客户端发送自定义错误消息(“未授权”)。
在客户端，我希望显示我从服务器发送的自定义错误消息。但是，当我console.log操作对象时，错误消息是：‘状态代码为500的请求失败’。
如何访问从服务器发送回来的错误消息？
我对createAsyncThunk中的错误处理做了一些研究。根据文档，我可以用rejectWithValue.But来处理<em
浏览 3提问于2021-03-02得票数 2
回答已采纳
使用Redux-Toolkit时，我试图在createAsyncThunk中使用ThunkAPI & dispatch，但由于类型错误而被拒绝。不确定如何解决此问题。reducer: rootReducer, }); 我的操作： export const tester = createAsyncThunk
浏览 19提问于2020-07-07得票数 1
回答已采纳
在componentMount主页上，需要使用Axios、redux-thunk、从后端API中获取数据。到目前一切尚好。我需要就以下各点提出意见和作出澄清：
每当用户刷新页面时，(尽管存储中已经有数据可用)，redux-/red
浏览 3提问于2021-03-01得票数 0
我创建了一个新的react redux工具包应用程序，只是在尝试从createAsyncThunk调用内部调用调度时遇到了问题。export const fetchBoardAsync = createAsyncThunk( async (boardId: string, thunkApi所以我现在把这个调用注释掉了：
//thunkApi.dispatch({ type: 'board/setBoard', p
浏览 3提问于2021-11-23得票数 0
1回答
我正在构建一个redux工具包网站，在那里我将有一个网格。因此，为了使用这个网格，我使用异步thunk从后端获取数据，然后将其发送到我的redux切片。我已经将默认导出更改为公共export default test = { ... }，然后将错误更改为“初始化前无法访问测试”。export const gridActions = gridSlice.actions;我的泰克：
import { AsyncThunk
浏览 2提问于2021-11-26得票数 0
回答已采纳
这里我对redux工具包不熟悉，我每次都要通过创建自己的自定义useFetch文件来获取数据，以处理加载、成功和错误状态，我使用了与redux工具箱相同的方法，创建了createSlice方法来访问减速器和操作这是成功的工作，并从这种方式获得数据通过消除操作和还原剂，但我没有使用createAsyncThunk从redux工具包
我的困惑是是从自定义useFetch获取数据的currect方式，还是应该使用createAsyn
浏览 9提问于2022-05-16得票数 0
pure JS (tested in Chromium DevTools) }}export const resetPassword = createAsyncThunk() => { } }, 1000); }更新1
实际的错误消息是
浏览 3提问于2021-06-16得票数 1
回答已采纳
1回答
我的Redux商店遇到了问题，当我通过一个Thunk操作来传递参数的时候。在没有参数的情况下，我的存储是正确填充的。我以前有一个实例，其中数组列表在后端被错误地命名，但是这次不是这样。
export const requireUserDiveLogData = createAsyncThunk(
'users/requireData', // action name/api&#x
浏览 8提问于2021-05-21得票数 1
回答已采纳
我试图在redux工具箱中访问useNavigate hooke在createAsyncThunk中，如下所示：
export const onHandleBookmark = createAsyncThunk
浏览 12提问于2022-03-14得票数 1
回答已采纳
2回答
我已经成功地获得了React / Redux应用程序来从REST后端检索数据。我正在使用Redux的特性，它自动设置在HTTP承诺解决成功或失败时调用的还原器。对于这个特定端点，我希望Redux存储在遇到HTTP 404 Not时反映错误。目前，这种情况并没有发生。下面显示的组件总是返回“已加载成功”。如何让它显示“错误”呢？我不明白的是，在下面的代码中，在哪里或如何做到这一点。我很难理解异步/等待概念，是
浏览 5提问于2020-08-02得票数 4
1回答
嗨，我是Redux的新手，我正在研究如何处理错误，使用axios和thunk一起发送一个帖子。我正在试图捕捉来自额外减速器的任何错误。我暂时使用了一个console.log错误。任何反馈都会很棒！下面是我的代码片段： 'info/postInfo'
async (infoObject: InfoRequest
浏览 7提问于2022-02-10得票数 1
回答已采纳
我正在使用reduxjs工具包、redux持久化和鸭子体系结构。所以我创建了商店。将我的App组件封装到Provider和PersistGate中，然后得到以下错误：ReferenceError: Cannot access 'rootReducer' before initializationstore.ts：import storage from '
浏览 11提问于2022-03-22得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
