react toolkit centralize error handling for numerous createAsyncThunks

Viewed 119

user-slice.ts

export const login = createAsyncThunk(
    'user/auth-login',
    async(loginData: UserLogin, { rejectWithValue }) => {
        try {
            const res: any = await axios.post(POST_LOGIN, { 
                email: loginData.email, password: loginData.password });
            return res.data;
        }

        catch(err: any) {
            popup(err.response.data['err'], 'err');
        }
    }
)

export const save = createAsyncThunk(
    'users/save-changes',
    async(updatedUser: FormData, { rejectWithValue }) => {
        try {
            const res: any = await axios.post(POST_SAVE, updatedUser, {
                headers: { ...constructHeaders(true, true) }
            }) 
        }

        catch(err: any) {
            popup(err.response.data['err'], 'err');
        }
    }
)

export const signUp = createAsyncThunk(
    'user/auth-signup',
    async(newUserData: FormData, { rejectWithValue }) => {
        try {
            const res: any = await axios.post(POST_SIGNUP, newUserData, {
                headers: { ...HEADERS_FILE }
            })
            
            return res.data;
        }


        catch(err: any) {
            popup(err.response.data['err'], 'err');
            return rejectWithValue(err.response.data['err']);
        }
    }
) 

Let's say I have these, instead of putting try/catch blocks for every single one of them, I want to centralize it to reduce code and just display a popup for the user, is it possible with just a class or does rtk have something specifically for this?

0 Answers
Related