RTK Query: Your Redux Data Fetching Layer

WHY IT EXISTS Web apps constantly fetch server data, track loading states, avoid duplicate requests, and keep the client cache in sync. The core Redux library is minimal and doesn't provide this logic out of the box, forcing developers to write repetitive boilerplate for every API call, even with helpers like createAsyncThunk.

THE MENTAL MODEL Think of RTK Query as a specialized cache for your server state, separate from your client-side UI state. It's inspired by tools like React Query and SWR but built on top of Redux. You declare your API endpoints once, and RTK Query manages the entire lifecycle of fetching, caching, and invalidating that data automatically.

HOW IT WORKS You use the createApi function to define a single "API slice" for a base URL. Inside, you define endpoints for queries (reading data) and mutations (writing data). RTK Query then automatically generates React hooks (like useGetPostsQuery) for each endpoint. These hooks return the data, isLoading status, and more, re-rendering your component as the request state changes. It uses fetchBaseQuery, a lightweight wrapper around fetch, to handle the actual requests.

WHEN TO USE IT Use RTK Query whenever you're fetching, caching, or updating data from a server in a Redux application. It's designed to replace hand-written data fetching logic, including manual useEffect hooks, createAsyncThunk calls, and the reducers needed to manage loading and error states. It excels at managing cache lifetimes as components mount and unmount.

WHEN NOT TO USE IT RTK Query is for managing asynchronous server state, not global client state. For state that doesn't come from a server—like UI theme, form inputs, or notification visibility—a regular Redux slice created with createSlice is still the appropriate tool. Using RTK Query for purely local state is an anti-pattern.

ONE CANONICAL EXAMPLE The core pattern is defining an API slice. You use createApi to define your endpoints, like a getPosts query that makes a GET request to /posts. RTK Query then auto-generates a useGetPostsQuery hook. In your component, you simply call const { data, error, isLoading } = useGetPostsQuery(); to fetch the data and get live status updates, all without writing any useEffect or useState hooks for the data itself.