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?