Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

Error Handling

Definition

The process of catching, serializing, and storing API errors or logic errors inside the Redux state so the UI can accurately render error states to the user.

Explain Like I'm New

When an API call fails, you need to tell the user WHY it failed. Was it a 404? Was the password wrong? You catch the error in the Thunk, store the error message in the Redux state (e.g., `state.error = 'Wrong Password'`), and display that string in the UI.

Real World Example

If `fetchBaseQuery` in RTK Query receives a 401 Unauthorized status, it stores that error. The UI reads the error, sees the 401, and forces a redirect to the `/login` page.

Common Use Cases

  • •Form validation
  • •Network resilience

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • Which state of `createAsyncThunk` is used for handling errors?

intermediate

  • What does the `rejectWithValue` function do in an Async Thunk?

Flash Cards

Question

Which state?

Click to reveal answer
Answer

The `rejected` state.

Question

rejectWithValue?

Click to reveal answer
Answer

If an API returns a specific error object (like `{ error: 'Email taken' }`), `rejectWithValue` allows you to extract that exact object and pass it into the `rejected` action payload, rather than relying on generic JavaScript error messages.