8. How do you handle API errors inside a thunk?

Question

Accepted Answer

In Redux Toolkit, you can handle API errors inside a thunk by using try/catch blocks within the async function of createAsyncThunk. The createAsyncThunk function automatically catches errors thrown inside the payload creator and dispatches a rejected action, allowing you to handle them in the slice’s extraReducers. **1. Use try/catch Inside Thunk:** Wrap your async API logic in a try/catch block to catch errors. **2. Throw or return rejectWithValue:** Use rejectWithValue to return a custom error payload to reducers. **3. Handle Rejected Case in Slice:** In extraReducers, handle the rejected state to update error messages or status. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      const data = await response.json();
      return data;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

8. How do you handle API errors inside a thunk?

Handling API Errors in Redux Toolkit Thunks

8. How do you handle API errors inside a thunk?

Handling API Errors in Redux Toolkit Thunks

Scenario Questions

Follow-up Questions