How do you handle async actions (e.g., thunks) inside a slice using extraReducers?

Q: How do you handle async actions (e.g., thunks) inside a slice using extraReducers?

The `extraReducers` field in `createSlice()` lets a slice respond to actions that weren’t defined inside its own `reducers`. It’s commonly used to handle actions generated by async thunks or actions from other slices. To handle actions from `createAsyncThunk()` (like pending, fulfilled, and rejected). To respond to actions defined in other slices. To keep reducers modular while still reacting to shared global actions. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; // Async thunk example export const fetchUser = createAsyncThunk('user/fetchUser', async () => { const res = await fetch('/api/user'); return res.json(); }); const userSlice = createSlice({ name: 'user', initialState: { data: null, status: 'idle' }, reducers: {}, extraReducers: (builder) => { builder .addCase(fetchUser.pending, (state) => { state.status = 'loading'; }) .addCase(fetchUser.fulfilled, (state, action) => { state.status = 'succeeded'; state.data = action.payload; }) .addCase(fetchUser.rejected, (state) => { state.status = 'failed'; }); } }); export default userSlice.reducer;

Difficulty: 5/10

extraReducers, createAsyncThunk, error handling

The extraReducers field in createSlice() lets a slice respond to actions that weren’t defined inside its own reducers. It’s commonly used to handle actions generated by async thunks or actions from other slices.

When to Use extraReducers

1
To handle actions from createAsyncThunk() (like pending, fulfilled, and rejected).
2
To respond to actions defined in other slices.
3
To keep reducers modular while still reacting to shared global actions.

Example: Using extraReducers with createAsyncThunk

Scenario Questions

0-2 years experience

Follow-up Questions