12. How do you use thunks in combination with RTK Query?

Question

Accepted Answer

In Redux Toolkit, you can combine thunks and RTK Query to handle complex application logic that requires both side effects (via thunks) and efficient data fetching (via RTK Query). Thunks are ideal for procedural workflows, while RTK Query manages server-state caching, re-fetching, and normalization. **1. Dispatch RTK Query Endpoints Inside a Thunk:** You can programmatically trigger a query or mutation from within a thunk using `dispatch(api.endpoints.endpointName.initiate(args))`. **2. Use RTK Query Data to Drive Thunk Logic:** Use `getState()` inside the thunk to check for cached data from RTK Query before making further API or business logic calls. **3. Chain Thunks and RTK Query:** Run a thunk after a query succeeds or use a thunk to perform side effects after RTK Query updates data. import { createAsyncThunk } from '@reduxjs/toolkit';
import { api } from './apiSlice';

// RTK Query setup
export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchUser: builder.query({ query: (id) => `/users/${id}` }),
    updateUser: builder.mutation({
      query: (user) => ({ url: `/users/${user.id}`, method: 'PUT', body: user }),
    }),
  }),
});

// Thunk that uses RTK Query endpoint
export const updateUserData = createAsyncThunk(
  'user/updateUserData',
  async (userId, { dispatch, getState }) => {
    // Fetch current user data from RTK Query
    const userResponse = await dispatch(api.endpoints.fetchUser.initiate(userId));

if (userResponse.data) {
      const updatedUser = { ...userResponse.data, active: true };
      // Call RTK Query mutation
      await dispatch(api.endpoints.updateUser.initiate(updatedUser));
    }
  }
); By combining thunks with RTK Query, you can perform advanced workflows—such as conditional updates, chained API operations, or triggering mutations after data fetches—while still benefiting from RTK Query’s caching and lifecycle management.

12. How do you use thunks in combination with RTK Query?

Using Thunks in Combination with RTK Query

12. How do you use thunks in combination with RTK Query?

Using Thunks in Combination with RTK Query

Scenario Questions

Follow-up Questions