Proper error handling using Redux Toolkit

Question

Say for example when a login function calls an API and it returns an error because of something like invalid credentials. I have noticed that it still goes through the fulfilled case in the extra reducers part. Should I add an if statement to check if response code is 200 or is there a way for the thunk to go through the rejected case?

extraReducers: builder => {
    builder.addCase(login.pending, (state, action) => {
      state.fetchingError = null;
      state.fetchingUser = true;
    });
    builder.addCase(login.fulfilled, (state, {payload}) => {
      console.log(payload, 'hello?');
      state.user = payload.data.user;
    });
    builder.addCase(login.rejected, (state, action) => {
      state.fetchingUser = false;
      state.fetchingError = action.error;
    });
  },

Erfan · Accepted Answer · 2021-09-10 09:06:39Z

2

You can use rejectWithValue in createAsyncThunk to customize the reject action.

It also takes an argument which will be "action.payload" in the reject action.

In createAsyncThunk:

    const updateUser = createAsyncThunk(
  'users/update',
  async (userData, { rejectWithValue }) => {
    const { id, ...fields } = userData
    try {
      const response = await userAPI.updateById(id, fields)
      return response.data.user
    } catch (err) {
      // Use `err.response.data` as `action.payload` for a `rejected` action,
      // by explicitly returning it using the `rejectWithValue()` utility
      return rejectWithValue(err.response.data)
    }
  }
)

https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-errors

answered Sep 10, 2021 at 9:06

Erfan

1,8121 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Proper error handling using Redux Toolkit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related