02 / 18

2. What is the difference between redux-thunk and createAsyncThunk?

Difficulty: 5/10
middleware, async actions, RTK

Difference Between redux-thunk and createAsyncThunk in Redux Toolkit

redux-thunk and createAsyncThunk both handle asynchronous logic in Redux, but they differ in abstraction, boilerplate, and ease of use. redux-thunk is a middleware that allows you to manually write async logic, while createAsyncThunk is a Redux Toolkit utility that automates the async action lifecycle.

Key Differences
  1. 1

    1. Level of Abstraction: redux-thunk is a low-level middleware requiring manual setup for async actions. createAsyncThunk abstracts that setup by generating pending, fulfilled, and rejected action types automatically.

  2. 2

    2. Boilerplate: With redux-thunk, you manually dispatch multiple actions for loading, success, and failure. createAsyncThunk eliminates that boilerplate.

  3. 3

    3. Integration with createSlice: createAsyncThunk integrates seamlessly with Redux Toolkit slices via extraReducers, while redux-thunk requires custom reducers.

  4. 4

    4. Error Handling: createAsyncThunk includes built-in error propagation via the rejected action payload, while redux-thunk requires custom try-catch handling.

Example: Using redux-thunk
Example: Using createAsyncThunk
When to Use Each
  1. 1

    Use redux-thunk: When you need full control over async logic or want to handle multiple dispatches manually.

  2. 2

    Use createAsyncThunk: When you prefer concise, structured async logic with built-in action handling and reduced boilerplate.

In summary, redux-thunk gives flexibility and control for custom async handling, while createAsyncThunk provides a cleaner, declarative way to manage async workflows in Redux Toolkit.

Scenario Questions

0-2 years experience

  1. 1If you need to fetch a user's profile when a component mounts, walk me through how you'd write that using redux‑thunk versus using createAsyncThunk. What steps differ?
  2. 2What happens if you forget to return the promise from a thunk created with redux‑thunk? How does that compare to the promise handling that createAsyncThunk gives you out of the box?

2-5 years experience

  1. 1We have a feature where several components share loading and error state for the same API call, and the UI flickers when using a hand‑written thunk. How would you refactor it with createAsyncThunk, and why might that solve the flicker?
  2. 2During a code review you see a thunk that manually dispatches pending, fulfilled, and rejected actions. What are the pros and cons of replacing it with createAsyncThunk?
  3. 3Our logging middleware prints every dispatched action. After switching a thunk to createAsyncThunk, you notice extra pending/fulfilled/rejected actions in the logs. Explain why and how you'd adjust the middleware if needed.

5-8 years experience

  1. 1We need to cancel in‑flight requests when a user navigates away. Compare how you'd implement cancellation with redux‑thunk versus createAsyncThunk, considering abort controllers and RTK's built‑in abort handling.
  2. 2Our codebase contains dozens of hand‑written thunks that all follow the same try/catch pattern. Discuss the impact on bundle size, testability, and consistency if we migrate them to createAsyncThunk, and outline a migration plan.
  3. 3When scaling to many concurrent API calls, we observed that createAsyncThunk generates separate pending/fulfilled/rejected action types per call. Talk about any performance or memory implications versus a single generic redux‑thunk, and how you would mitigate them.

8+ years experience

  1. 1Our organization is moving from a legacy Redux store with custom thunk middleware to RTK Query and createAsyncThunk across multiple teams. How would you evaluate the trade‑offs of keeping some hand‑written thunks for complex business logic versus fully adopting createAsyncThunk or RTK Query, considering maintainability and cross‑team contracts?
  2. 2A long‑running background sync process must survive page reloads and coordinate with other async actions. Design an architecture using createAsyncThunk's lifecycle actions versus a custom redux‑thunk, and discuss implications for state consistency, error handling, and platform‑wide observability.

Follow-up Questions

  • How does each approach affect unit testing of async logic?
  • What are the implications for error handling and cancellation?
  • Can you think of scenarios where you would still prefer a hand‑written thunk?
Share

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