🧩 Day 31 — Combining Redux with RTK Query

Redux Toolkit (RTK) Query simplifies data fetching and caching in Redux-based apps. It automatically manages loading states, caching, and data synchronization with minimal boilerplate.

🔹 What is RTK Query?

RTK Query is built on top of Redux Toolkit. It provides an efficient way to fetch, cache, and update server data. Instead of manually writing reducers, actions, and thunks, you define endpoints and let RTK Query handle the rest.

📘 Example: Fetching Users

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

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

export const { useGetUsersQuery } = usersApi;
  

The createApi() method defines your API, and useGetUsersQuery() gives you a hook to access the data directly in React.

💻 Using the Hook in a Component

import React from "react";
import { useGetUsersQuery } from "./services/usersApi";

function UserList() {
  const { data, error, isLoading } = useGetUsersQuery();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading users</p>;

  return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

export default UserList;
  

RTK Query automatically caches responses and reuses data efficiently, reducing redundant API calls.

← Prev Next →