useNavigate won't work after removing JWT from localstorage - reactjs

Question

The goal is to basically "logout", which means removing the JWT that's currently stored in local storage.
Ideally, what I want is that the logout button is clicked, the logout function is dispatched which is essentially just removing the JWT from local storage, the reset function is dispatched which means that the state is reverted back to the initial state, and finally, it will navigate onto the login page via the useNavigate hook.
The problem is, it can't seem to work. Oddly enough, I tried testing out if it's reading anything on the selector
Here is the code for the dashboard, which checks if there's an existing user in local storage, and if null, redirects to the login page:
const navigate = useNavigate();
const dispatch = useDispatch();
const { user } = useSelector((state) => state.auth);
const { posts, isLoading, isError, message } = useSelector(
(state) => state.post
);
useEffect(() => {
if (isError) {
console.log(message);
}
if (!user) {
navigate("/login");
}
dispatch(getPosts());
return () => {
dispatch(reset());
};
}, [user, message, isError, navigate, dispatch]);
if (isLoading) {
return <Spinner />;
}
here's the logout function from the slice as well as the slice containing the reset:
export const logout = createAsyncThunk("auth/logout", async () => {
await authService.logout();
});
export const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
reset: (state) => {
state.isLoading = false;
state.isSuccess = false;
state.isError = false;
state.message = "";
},
},
extraReducers: (builder) => {
builder
.addCase(register.pending, (state) => {
state.isLoading = true;
})
.addCase(register.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.user = action.payload;
})
.addCase(register.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
state.user = null;
})
.addCase(login.pending, (state) => {
state.isLoading = true;
})
.addCase(login.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.user = action.payload;
})
.addCase(login.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
state.user = null;
})
.addCase(logout.fulfilled, (state) => {
state.user = null;
});
},
});
Here's the function that handles the logout button click event:
const handleLogout = () => {
dispatch(logout());
dispatch(reset());
navigate("/");
};
Edit:
The returned callback function in the first set of codes is basically the same all throughout, it just reverts the state into the default state (null values).

Answer 1

The logout action is asynchronous, and the logout.fulfilled action is what clears the state.user back to null. The handleLogout function doesn't wait for the Promise to resolve though, it just dispatches the two actions and immediately navigates to "/". It's likely the case that the logout logic hasn't completed and reset the user state when the UI is checking the user state on the dashboard.
It seems that handleLogout should wait for the logout action to resolve, then issue the other action dispatch and navigate.
export const logout = createAsyncThunk("auth/logout", async () => {
return await authService.logout(); // <-- return Promise
});
const handleLogout = async () => {
await dispatch(logout()); // <-- await Promise to resolve
dispatch(reset());
navigate("/");
};