I have a weird problem with the Redux Toolkit MERN

Question

I have a problem with the redux toolkit when I make an axios request. This is my call:

export const register = createAsyncThunk(
  'auth/register',
  async (user, thunkAPI) => {
    try {
      return await authService.register(user);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

My authService is:

const register = async userData => {
  const config = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const { data } = await axios.post('/api/v1/auth/register', userData, config);
  return data;
};

It's nothing special, just separate the API calls into a separate file.

This is my authSlice:

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    reset: state => {
      state.isLoading = false;
      state.isError = false;
      state.isSuccess = false;
      state.message = '';
    },
  },
  extraReducers: {
    [register.pending]: state => {
      state.isLoading = true;
    },
    [register.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.isSuccess = true;
      state.user = action.payload;
    },
    [register.rejected]: (state, action) => {
      state.isLoading = false;
      state.isError = true;
      state.message = action.payload;
      state.user = null;
    },
  },
});

Everything works great, I can register a user and it all works well. But when, for example, I do not enter username, email, etc. to me it's just auth / register / pending, I want it to switch to auth / register / rejected to put the error in the state and display it on the front. The error is reported to me in the server console, something like this:

(node:7012) UnhandledPromiseRejectionWarning: Error: Please provide all values      
    at register (file:///C:/Users/Uros/Desktop/sn-mern-full/controllers/authController.js:19:11)

And thats okay, i set this error message (Please provide all values)..How do I get the register.rejected to pass the error to state.message?

Answer 1

You are not catching the error for the axios.post endpoint call:

const register = async userData => {
try {
  const config = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
  const { data } = await axios.post('/api/v1/auth/register', userData, config);
  return data;
} catch(error) {
   Promise.reject(error);
}};

Like this you will get the result of the server in the catch block of your register action, dispatch the register.rejected action there with the error message you received from the server as payload.

Or simpler, return only axios call (it returns a promise in itself) and then you dont need a try/catch around it, you can handle the error in the action only:

const register = userData => {
  const config = {
    headers: {
      'Content-Type': 'application/json',
    },
  };
  return axios.post('/api/v1/auth/register', userData, config);
}