Redux tool-kit error handling in axios request

Question

In Thunk function I'm doing post http request, and in case of error I want to handle it => show messsage from server to user, like email already exist or else. But how do I properly define type of error in try{}catch{} syntax. With following code I have error in terminal

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from "axios";
import { FormSignUp } from '../../types/FormSignUP';

export const signupUser = createAsyncThunk('user/signupUser', async (user: FormSignUp) => {
  try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err: Error) {
    console.log(err.response.data)
  }
});

I understand that proper type of err in axios request is AxiosError. But with next code is another error.

import axios, { AxiosError } from "axios";

export const signupUser = createAsyncThunk('user/signupUser', async (user: FormSignUp) => {
  try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err: AxiosError) {
    console.log(err.response.data)
  }
});

and here is an error

Edited: So, this kind of works.

try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err) {
    if (axios.isAxiosError(err) && err.response) {
      console.log( err.response.data);
    }
  }

Barnando Akbarto Hidayatullah · Accepted Answer · 2022-10-15 20:00:21Z

2

Typescript 4.0 added the ability to specify unknown and any on-catch variables (Issue) it can not do typecasting inside catch.

With this flag, the following is now possible:

Reference this

instead of this:

try {
    const response = await axios.post(API_URL, user);
    return response.data
} catch (err) {
    if (axios.isAxiosError(err) && err.response) {
      console.log( err.response.data);
  }
}

You can do this

try {
    const response = await axios.post(API_URL, user);
    return response.data
} catch (_err) {
   let err = (_err as AxiosError)
   // and you now got the error type
}

edited Oct 15, 2022 at 20:00

answered Oct 15, 2022 at 19:42

Barnando Akbarto Hidayatullah

1641 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux tool-kit error handling in axios request

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related