1. What is a thunk in Redux?
Understanding Thunks in Redux Toolkit
A thunk in Redux is a function that allows you to write asynchronous logic that interacts with the Redux store. Instead of returning a plain action object, a thunk returns a function that can perform side effects like API calls, delays, or conditional dispatches before dispatching regular actions.
- 1
1. Async Logic: Thunks handle asynchronous operations such as fetching data from an API.
- 2
2. Conditional Dispatch: You can dispatch different actions based on certain conditions.
- 3
3. Side Effects: Thunks can trigger side effects before updating the Redux state.
- 4
4. Integration with Middleware: Redux Thunk middleware enables this pattern by interpreting functions returned from action creators.
Here, the thunk fetchUser dispatches multiple actions depending on the outcome of the asynchronous API call.
createAsyncThunk simplifies thunk creation by handling action types (pending, fulfilled, rejected) automatically.
- 1
- When fetching data from an API before updating the store.
- 2
- When performing complex synchronous logic before dispatching actions.
- 3
- When chaining multiple dispatches based on async results.
In summary, thunks are middleware-powered functions that let Redux handle asynchronous workflows cleanly, and Redux Toolkit’s createAsyncThunk makes them easier to use and maintain.
Scenario Questions
0-2 years experience
- 1How would you fetch a list of users from an API using Redux Toolkit? Walk me through where you'd place the thunk and what the flow looks like.
- 2If you dispatch a thunk that returns a promise, what happens to the Redux state while the request is pending and after it resolves?
- 3Which function from @reduxjs/toolkit do you use to create a thunk, and how do you connect it to a slice?
2-5 years experience
- 1We need to load data from two endpoints sequentially. How would you structure a thunk so the second request only runs after the first succeeds, and how would you handle errors?
- 2During a code review you see a thunk that both dispatches actions and directly mutates state. What issues could this cause and how would you refactor it?
- 3Our app started making duplicate network calls when a component re‑mounts. How would you debug whether the thunk or the component is responsible?
5-8 years experience
- 1With dozens of async thunks in a large codebase, what strategies would you use to standardize loading, error handling, and cancellation?
- 2Compare using createAsyncThunk with writing a custom thunk middleware that adds retry and exponential back‑off. What trade‑offs do you see?
- 3How would you design a thunk to work with Next.js server‑side rendering so the store hydrates correctly without leaking data between requests?
8+ years experience
- 1Our legacy codebase uses hand‑rolled thunks. What migration plan would you propose to move to Redux Toolkit while minimizing risk and keeping feature parity?
- 2Multiple teams share a common data‑fetching library built on thunks. How do you enforce API contracts, versioning, and testing to avoid breaking changes across teams?
- 3A thunk triggers a long‑running background job that may outlive a user's session. How would you architect cancellation, idempotency, and observability for this scenario?
Follow-up Questions
- Can you show a minimal code snippet of a thunk you wrote?
- What are the pros and cons of using createAsyncThunk versus a hand‑rolled thunk?
- How would you test the thunk's behavior?