18. How can you refactor thunk-based APIs to RTK Query-based APIs?

Question

Accepted Answer

RTK Query simplifies data fetching and caching compared to manually managing async thunks. When refactoring from thunk-based APIs, you can move API logic from slices and thunks into `createApi` endpoints, which automatically generate hooks and handle caching, re-fetching, and status management. **1. Identify Thunk Logic:** Locate existing `createAsyncThunk` calls that perform API requests and return fetched data. **2. Create an API Slice:** Replace thunk logic with `createApi` and define endpoints using `builder.query()` or `builder.mutation()`. **3. Remove Manual Status Handling:** Eliminate `pending`, `fulfilled`, and `rejected` reducers—RTK Query automatically manages loading and error states. **4. Use Auto-Generated Hooks:** Replace manual dispatch and selectors with RTK Query hooks like `useGetUsersQuery()` or `useAddUserMutation()`. **5. Delete Redundant Slice Code:** Remove async reducers and state properties that are now managed by RTK Query. export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const res = await fetch('/api/users');
  return await res.json();
});

export const usersApi = createApi({
  reducerPath: 'usersApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: builder.query({ query: () => '/users' }),
  }),
});

export const { useGetUsersQuery } = usersApi; By migrating from thunks to RTK Query, you reduce boilerplate, simplify async logic, and gain built-in caching, invalidation, and automatic re-fetching for a more efficient and maintainable Redux architecture.

18. How can you refactor thunk-based APIs to RTK Query-based APIs?

Refactoring Thunk-Based APIs to RTK Query in Redux Toolkit

18. How can you refactor thunk-based APIs to RTK Query-based APIs?

Refactoring Thunk-Based APIs to RTK Query in Redux Toolkit

Scenario Questions

Follow-up Questions