Ниже я приведу пример простого React-приложения с использованием RTK Query — современного инструмента от Redux Toolkit для управления сетевыми запросами.

Я подробно объясню каждый шаг.
🧩 Что такое RTK Query?
RTK Query — это мощный инструмент для работы с API, который предоставляет:
Кэширование запросов
Автоматическую подгрузку данных
Повторные попытки запросов
Управление состоянием загрузки и ошибок
🛠️ Цель приложения
Создадим приложение, которое:
Загружает список пользователей с JSONPlaceholder API
Отображает их в виде списка
Показывает индикатор загрузки и ошибки
📁 Структура проекта
src/
├── app/
│ └── store.js ├── features/
│ └── apiSlice.js ├── components/
│ └── UsersList.js ├── App.js └── index.js 1️⃣ Установка зависимостей
npm install @reduxjs/toolkit react-redux
2️⃣ Настройка Store (src/app/ store.js )
import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from '../features/apiSlice';
export const store = configureStore({
reducer: {
[apiSlice.reducerPath]: apiSlice.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(apiSlice.middleware),
});
apiSlice.middleware — добавляет кэширование и повторные запросы.
3️⃣ Создание API Slice (src/features/ apiSlice.js )
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
tagTypes: ['User'],
endpoints: (builder) => ({
getUsers: builder.query({
query: () => '/users',
providesTags: ['User'],
}),
}),
});
export const { useGetUsersQuery } = apiSlice;
🔍 Пояснение:
baseQuery — базовая функция для запросов (по умолчанию использует fetch)
tagTypes — позволяет кэшировать и инвалидировать данные (например, после обновления)
getUsers — endpoint для получения пользователей
useGetUsersQuery — хук, который можно использовать в компонентах
4️⃣ Подключение Store в index.js import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
5️⃣ Компонент UsersList (src/components/ UsersList.js )
import React from 'react';
import { useGetUsersQuery } from '../features/apiSlice';
export const UsersList = () => {
const { data, error, isLoading } = useGetUsersQuery();
if (isLoading) return <div>Загрузка...</div>;
if (error) return <div>Ошибка: {error.message}</div>;
return (
<div>
<h2>Список пользователей:</h2>
<ul>
{data?.map((user) => (
<li key={user.id}>
{user.name} ({user.email})
</li>
))}
</ul>
</div>
);
};
🔍 Пояснение:
useGetUsersQuery() — вызывает API и возвращает:
data — данные
isLoading — статус загрузки
error — объект ошибки
6️⃣ Основной App.js import React from 'react';
import { UsersList } from './components/UsersList';
function App() {
return (
<div className="App">
<h1>Пример с RTK Query</h1>
<UsersList />
</div>
);
}
export default App;
✅ Резюме
RTK Query автоматически кэширует запросы и повторно использует данные
Он обрабатывает статусы loading, error, success
Не требует ручного управления состоянием (как с useState или useEffect)
Подходит для сложных сценариев с инвалидацией, polling и т.д.