Can not catch errors with React/Redux-CodePudding

I have a login error handling with redux which looks likes this:

export const login = (params: any) => async (dispatch: Dispatch) => {
  try {
    const authData = await API.post("login", params);
    sessionStorage.setItem("access_token", authData?.data?.access_token);
    dispatch(ActionCreators.getTokens(authData?.data?.access_token));
  } catch (error) {
    throw error;
  }
};

Then in my component, I am trying to catch the error with try/catch again, but I do not have an access to response. Guess because of try/catch scope.

  const submitHandler = async (e: SyntheticEvent) => {
    e.preventDefault();
    try {
      var res: any = await dispatch(
        login({
          email,
          password,
          token,
        })
      );

      router.push("/dashboard");
    } catch (error) {
      setError(res?.response.data.message);
    }
  };

Any idea how to fix that? Thank you.

CodePudding user response：

I had hit same problem and was also catching error in both of my react component and redux component file. The compiler does not work like this, i removed the catch block from my component file and it was worked. Please try it, thanks

CodePudding user response：

It is unnecessary to throw the error in catch block of redux action. Removing it works. Catch block in your component file is enough to handle error.