createAsyncThunk redux toolkit with typescript rejecWithValue and Payload types error

Question

I'm trynig to implement authentifiaction slice in redux toolkit with typescript, but typescript is complaining about rejectWithValue error type and the action payload, please note that i'm using Axios and that i'm following the documentation but still complaining this my code

import { createAsyncThunk } from '@reduxjs/toolkit';
import { axiosClient } from 'src/network/api-client';
import {AxiosError} from 'axios'

type RegisterPayload = {
  login: string;
  password: string;
  client: string;
  first_name: string;
  last_name: string;
  patronymic: string;
  date_of_birth: string;
};
export type User = {
  token: string;
  refresh_token: string;
};
type KnownError = {
  errorMessage : string;
}
export const registerUser = createAsyncThunk<
{ token: string },
RegisterPayload,
{ rejectValue: KnownError }
>(
  'users/register',
  async (
    {
      login,
      password,
      client,
      first_name,
      last_name,
      patronymic,
      date_of_birth,
    }, // these are the lines that triggers the first error
    {rejectWithValue}
  ) => {
    try {
      const response = await axiosClient.post<User>('registration', {
        login,
        password,
        client,
        first_name,
        last_name,
        patronymic,
        date_of_birth,
      });
      if (response.status === 201) {
        localStorage.setItem('refresh', response.data.refresh_token);

        return {
          ...response,
          token: response.data.token,
        };
      }
    } catch (err) {
      const error: AxiosError<KnownError> = err;  // this os the lines 
                        that triggers the second error 'error' is underlined 
      if (!error.response) {
        throw err;
      }
      return rejectWithValue(error.response.data);
    }
);

and i'm having these errors

Answer 1

I had the same problem, I think the following method will solve your problem:

import axios, { AxiosResponse } from 'axios';
import { createAsyncThunk } from '@reduxjs/toolkit';

export interface CharacterSuccessResponse {
    info: Pagination,
    results: Character[]
}

export interface CharacterFailedResponse {
    error: string
}

export interface Character {
    id: number;
    name: string;
    status: string;
    species: string;
    type: string;
    gender: string;
    origin: Origin;
    location: Location;
    image: string;
    episode: string[];
    url: string;
    created: Date;
}

export interface Location {
    name: string;
    url: string;
}

export interface Origin {
    name: string;
    url: string;
}

export interface Pagination {
    count?: number;
    pages?: number;
    next?: string | null;
    prev?: string | null;
}

export const getCharactersAsync = createAsyncThunk<CharacterSuccessResponse, void, { rejectValue: CharacterFailedResponse }>('character/getCharactersAsync', async (_, thunkApi) => {
    try {
        const response = await axios.get('https://rickandmortyapi.com/api/characters')
        return response?.data
    } catch (error: any) {
        return thunkApi.rejectWithValue(error.response?.data)
    }
})

I hope this resource is useful