What are builder callbacks used for in extraReducers?

Question

Accepted Answer

In Redux Toolkit, builder callbacks are used inside the `extraReducers` field of `createSlice()` to handle actions that are not defined within the slice’s own `reducers`. They provide a clear and type-safe way to add cases for external actions, such as thunks created with `createAsyncThunk`. They let you respond to actions generated outside the slice, like async thunks or actions from other slices. They improve type safety and readability compared to using an object-based `extraReducers` syntax. They provide methods such as `addCase`, `addMatcher`, and `addDefaultCase` for flexible action handling. They are ideal for handling loading, success, and error states of asynchronous actions. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async (id) => {
  const response = await fetch(`/api/user/${id}`);
  return response.json();
});

export default userSlice.reducer; Builder callbacks make `extraReducers` more powerful and expressive, enabling clean and scalable handling of async logic and cross-slice interactions.

What are builder callbacks used for in extraReducers?

Understanding Builder Callbacks in Redux Toolkit extraReducers

What are builder callbacks used for in extraReducers?

Understanding Builder Callbacks in Redux Toolkit extraReducers

Scenario Questions

Follow-up Questions