This is the action that i send and check the last line return rejectWithValue(error.message);

  "AdminAuthorMentorAuth/login",
  async ({ email, password }: LoginI, { rejectWithValue }) => {
    try {
      const user = await api.post(
        "auth/login",
        {
          email,
          password,
        },
        { withCredentials: true }
      );
      if (user.data.check) {
        return { loggedState: true, email: user.data.user.email };
      } else {
        setAxiosToken(user.data.token);
        saveToken(user.data.getToken);
        console.log(user);
        return user.data.user;
      }
    } catch (error: any) {
      console.log(error);
      if (error.response.data) {
        return rejectWithValue(error.response.data.fallbackMessage);
      } else {
        console.log("Error", error);
        return rejectWithValue(error.message);
      }
    }
  }
);

  try {
    setCurrentStatus(status.loading);
    const res = await dispatch(
      login({ email, password: password.value })
    ).unwrap();
    if (res.loggedState) {
      setCurrentStatus(status.askConfirmation);
      setRequestEmail(res.email);
    }
    if (!res.loggedState) navigate("/");
  } catch (error: any) {
    console.log("error", error);
    setCurrentStatus(status.failed);
    setRequestError(error);
  }
}

I am dispatching this action from one component. using axios for netwwork request

So, my question is when i change the return rejectWithValue(error.message); in the action to return error, this doesnot end in the catch block of my handlebuttonclick function in my component rather it ends inside the try block. I want to know why its happening?

CodePudding user response：

How would createAsyncThunk know that something you return should be handled as an error without you being explicit about it?

The distinction is:

• you throw it: an error
• you return rejectWithValue(...): an error
• you return fulfillWithValue(...): normal return
• you return ...: normal return