Redux toolkit not checking the rejected case - reactjs

Question

I am new to redux toolkit, My objective is to not let the dashboard to render if the user who is trying to login is not a registered member. I am sending a 500 error from the backend if the username or password is invalid which works fine. The extraReducers is not going to rejected case even if the api response is 500 instead it goes to the fulfilled case.My expectation was that if the api gives an error, it will go to the rejected case. Below is my slice,
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
import axios from "axios";
export const currentUser = localStorage.getItem("userInfo");
const initialState = {
currentUser: currentUser
? currentUser
: {
email: "",
password: "",
name: "",
pic: "",
confirmPassword: "",
},
status: null,
isLoggedIn: currentUser ? true : false,
userInfoFromStorage: "",
};
//login action
export const authUser = createAsyncThunk("users/authUser", async (data) => {
const res = await axios.post("http://localhost:3010/api/users/login", data);
return res.data;
});
//register action
export const registerUser = createAsyncThunk(
"users/registerUser",
async (data) => {
try {
const res = await axios.post("http://localhost:3010/api/users", data);
console.log(res);
return res.data;
} catch (error) {
console.log(error);
}
}
);
const userReducer = createSlice({
name: "user", //to identify the slice
initialState,
reducers: {
logoutUser: (state, action) => {
state.isLoggedIn = false;
localStorage.removeItem("userInfo");
},
},
extraReducers: (builder) => {
builder.addCase(authUser.pending, (state) => {
console.log("pending");
state.status = "pending";
});
builder.addCase(authUser.fulfilled, (state, action) => {
state.status = "success";
state.isLoggedIn = true;
state.currentUser = action.payload;
state.userInfoFromStorage = localStorage.setItem(
"userInfo",
JSON.stringify(action.payload)
);
});
builder.addCase(authUser.rejected, (state) => {
console.log("failed")
state.status = "failed";
state.isLoggedIn = false;
});
},
});
// Action creators are generated for each case reducer function
export const { logoutUser } = userReducer.actions;
export default userReducer.reducer;
dispatching action below from loginPage
const submitHandler = async (e) => {
e.preventDefault();
dispatch(authUser({ email: email, password: password }));
// history.push("/myNotes");
};

Answer 1

In your thunk, you are manually handling the error. There is no way that any other code after that could know that something went wrong.
You have three options here:
do not try..catch in your createAsyncThunk call. The error will be cleaned up from non-standard fields and end up in action.error of the rejected action
manually throw something. The error will be cleaned up from non-standard fields and end up in action.error of the rejected action
manually return thunkApi.rejectWithValue(yourError). The error will not be cleaned up and land in action.payload of the rejected action.
What you are doing now (handling the error and returning nothing) is essentially equal to doing return undefined in your function - which will end up as a fulfilled action with undefined as payload.