Как в компоненте выглядит отправка запроса на чтение данных через RTK Query и какие хуки для этого используются?

RTK Query — это инструмент из состава Redux Toolkit, который автоматически создаёт хуки для работы с API. Для каждого эндпоинта, объявленного через builder.query, генерируется хук с именем use<EndpointName>Query. Именно его и вызывает компонент, чтобы получить данные.

Как это выглядит в коде

Сначала описываем API:

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

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

export const { useGetUsersQuery } = api;

Теперь в компоненте просто вызываем сгенерированный хук:

function UsersList() {
  const { data, isLoading, isError, refetch } = useGetUsersQuery();

  if (isLoading) return <p>Загрузка...</p>;
  if (isError) return <p>Ошибка</p>;

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

Что возвращает хук

• data — результат запроса, если он уже получен.
• isLoading — true при первой загрузке.
• isFetching — true при любой загрузке, включая фоновую.
• isError и error — состояние ошибки.
• refetch — функция для повторного запроса вручную.

Хук сам подписывается на кэш, сам запускает запрос при монтировании и отписывается при размонтировании. Если два компонента используют один и тот же хук с одинаковыми аргументами, запрос выполнится один раз, а данные будут общими.

Аргументы хука

Если эндпоинт принимает параметр, он передаётся первым аргументом: useGetUserQuery(userId). Вторым аргументом можно передать опции, например { skip: !userId }, чтобы отложить запрос.

Итог: для чтения данных в RTK Query достаточно вызвать сгенерированный хук вида useXxxQuery и работать с его полями состояния. Это убирает ручные useEffect, dispatch и обработку гонок, а кэш и дедупликация запросов работают из коробки.