10 / 14

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

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. 1

    To handle actions from createAsyncThunk() (like pending, fulfilled, and rejected).

  2. 2

    To respond to actions defined in other slices.

  3. 3

    To keep reducers modular while still reacting to shared global actions.

Example: Using extraReducers with createAsyncThunk

Scenario Questions

0-2 years experience

  1. 1You need to fetch a list of products from an API and store it in Redux state using RTK. Walk me through how you'd set up a thunk and connect it to a slice with extraReducers.
  2. 2If the thunk you wrote dispatches a rejected action, what will the state look like given the extraReducers you defined? How would you show an error message in the UI?
  3. 3Suppose you accidentally placed the async logic inside reducers instead of extraReducers. What would happen at runtime?

2-5 years experience

  1. 1During a recent feature, the UI stopped updating after a successful API call. The thunk resolves, but the slice's state never changes. How would you debug the extraReducers configuration?
  2. 2You have two thunks that both need to update the same piece of state, but with different loading flags. How would you structure extraReducers to avoid state clashes and keep the UI responsive?
  3. 3Explain the trade‑offs between handling the pending/rejected/fulfilled cases inside a single extraReducers object versus using builder callbacks. Which do you prefer and why?

5-8 years experience

  1. 1Our app now has dozens of slices each handling their own async thunks. We're seeing a lot of duplicated loading/error state handling. How would you refactor the extraReducers pattern to reduce boilerplate while keeping type safety?
  2. 2When a thunk dispatches a fulfilled action, you need to optimistically update a list and also invalidate a cached query in another slice. Describe how you'd coordinate these updates across slices using extraReducers or other RTK mechanisms.
  3. 3In a high‑traffic scenario, many thunks may be pending simultaneously. What performance considerations arise with extraReducers, and how would you mitigate potential state churn or unnecessary re‑renders?

8+ years experience

  1. 1Looking ahead, we plan to migrate several legacy reducers to RTK Toolkit across multiple teams. How would you design a shared convention for handling async thunks with extraReducers to ensure consistency, testability, and easy onboarding?
  2. 2Our organization wants to introduce a global error handling strategy for all async actions, including logging, user notifications, and retry policies. How would you architect this using RTK's extraReducers, middleware, or other patterns without tightly coupling business slices?
  3. 3Consider a micro‑frontend architecture where each micro‑app has its own store but needs to share async action status (e.g., auth loading). How would you design a cross‑store solution that leverages extraReducers while keeping stores isolated?

Follow-up Questions

  • What would you do if you needed to cancel an in‑flight thunk?
  • How do you ensure type safety when accessing the action payload in extraReducers?
  • Can you describe how you’d test the slice’s async behavior?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.