时间戳

首页 > 解决方案 > 如何使用 Redux createAsyncThunk 访问后端错误

redux - 如何使用 Redux createAsyncThunk 访问后端错误

问题描述

我不确定当 POST 请求发送到后端时，我应该如何获取来自后端的错误。如果我使用普通的 axios 调用，我可以简单地从 catch 块中的响应对象中获取错误：

error.response.data.errors

但是，当使用 Redux 并使用 createAsyncThunk 方法时，在来自服务器的 400 状态代码上，调度了一个被拒绝的操作，并且我得到的错误对象是一个通用的对象，如下所示：

{
  message: "Request failed with status code 400"
  name: "Error"
  stack: "Error: Request failed with status code 400\n...."
}

我怎样才能得到服务器错误，就像使用 axios 一样？

标签： reduxreact-reduxredux-toolkit

解决方案

您可以使用 redux-toolkit 中的rejectWithValue函数将服务器错误作为被拒绝操作的有效负载属性包含在内。

它会是这样的（未经测试的代码，因为我在我的手机上）

const myAction = createAsyncThunk(
  ‘actionName’,
  async ( arg, {rejectWithValue} ) => {
    try {
      const res = await axios.post(…);
      return res.data;
    } catch (error) {
       return rejectWithValue( error.response.data.errors );
    }
});

推荐阅读