3. How do you integrate RTK Query and createAsyncThunk in the same app?
Integrating RTK Query and createAsyncThunk in the Same Application
You can use both RTK Query and createAsyncThunk together in the same Redux Toolkit application. RTK Query excels at managing server state (data fetched from APIs), while createAsyncThunk is ideal for managing client-side async workflows such as authentication, file uploads, or complex business logic that doesn’t directly fit into RTK Query endpoints.
- 1
Use RTK Query: For CRUD operations, automatic caching, re-fetching, and synchronization with server data.
- 2
Use createAsyncThunk: For one-off async logic such as login flows, chained async operations, or updating local state based on multiple API responses.
- 1
1. Create API Slice with RTK Query: Use
createApito define endpoints for fetching and mutating data. - 2
2. Define Async Logic with createAsyncThunk: Use thunks for side effects or complex async operations not suitable for RTK Query.
- 3
3. Combine Reducers and Middleware: Add both the RTK Query reducer and middleware in
configureStore. - 4
4. Use Auto-Generated Hooks and Thunks Together: You can dispatch thunks and use RTK Query hooks in the same component when needed.
This hybrid approach lets you benefit from RTK Query’s automatic caching for server data and the flexibility of thunks for complex, custom async logic. They coexist seamlessly in a single Redux store.
Scenario Questions
0-2 years experience
- 1How would you fetch a list of products using RTK Query while also needing to perform a side‑effect that updates another slice after the fetch completes?
- 2If you already have a createAsyncThunk that loads user profile data, how would you refactor the component to use RTK Query for the same endpoint without breaking existing logic?
2-5 years experience
- 1You notice that a component using both an RTK Query hook and a createAsyncThunk dispatch is causing duplicate network requests. Walk me through how you would diagnose and resolve the issue.
- 2When integrating RTK Query with a createAsyncThunk that needs to invalidate a cache entry after a successful mutation, what steps would you take and why?
- 3Suppose the server returns a 401 error on a query, and you need to trigger a refresh‑token flow using createAsyncThunk before retrying. How would you orchestrate that?
5-8 years experience
- 1Design a pattern for a large codebase where some features rely on RTK Query and others on createAsyncThunk, ensuring consistent error handling, caching, and loading states across the app.
- 2At scale, how would you handle cache invalidation for entities that are updated via createAsyncThunk mutations while also being read via RTK Query, to avoid stale data?
- 3Discuss the performance implications of mixing RTK Query and createAsyncThunk in a high‑traffic dashboard, and how you would monitor and mitigate any bottlenecks.
8+ years experience
- 1Your organization is migrating a legacy Redux codebase that heavily uses createAsyncThunk to a new architecture centered on RTK Query. What migration strategy would you propose to minimize risk and maintain feature parity?
- 2How would you set up a shared data‑layer library that abstracts over RTK Query and createAsyncThunk so that multiple teams can choose the appropriate tool without duplicating logic?
Follow-up Questions
- What trade‑offs did you consider when choosing between a query hook and a thunk for this operation?
- How would you test the interaction between the query cache and the thunk‑driven mutation?
- Can you describe a scenario where this integration could cause a subtle bug, and how you'd catch it?