--- sidebar_position: 3 --- # RTK-query **RTK Query** — это мощная библиотека для управления данными и выполнения запросов к API, встроенная в **Redux Toolkit (RTK)**. Она предназначена для упрощения работы с асинхронными запросами, кэшированием данных и управлением состоянием, связанным с API, в React-приложениях. RTK Query автоматически генерирует редьюсеры, действия и селекторы, что значительно сокращает количество boilerplate-кода. ## Основные возможности RTK Query: 1. **Автоматическое кэширование:** - RTK Query автоматически кэширует данные, полученные от API, и управляет их актуальностью. - Повторные запросы к одним и тем же данным не выполняются, если они уже есть в кэше. 2. **Автоматическая генерация хуков:** - RTK Query генерирует React-хуки (например, `useGetPostsQuery`) для выполнения запросов и управления состоянием загрузки, ошибок и данных. 3. **Интеграция с Redux:** - RTK Query использует Redux под капотом, что позволяет легко интегрировать её с существующим Redux-стором. 4. **Поддержка мутаций:** - Помимо запросов на получение данных (queries), RTK Query поддерживает мутации (mutations) для отправки данных на сервер (например, POST, PUT, DELETE). 5. **Оптимизация запросов:** - RTK Query автоматически управляет подписками на данные, что предотвращает лишние запросы и ререндеры. 6. **Инструменты разработчика:** - RTK Query интегрируется с Redux DevTools, что позволяет отслеживать состояние запросов и кэша. Основные хуки RTK Query: 1. useQuery: - Используется для выполнения **GET**-запросов. - Возвращает объект с данными, состоянием загрузки (`isLoading`), ошибкой (~~error~~) и другими полезными полями. - Пример: `useGetPostsQuery()`. 2. useMutation: - Используется для выполнения **POST**, **PUT**, **DELETE** и других запросов, изменяющих данные на сервере. - Возвращает функцию для выполнения мутации и объект с состоянием (`isLoading`, `isError` и т.д.). - Пример: `useAddPostMutation()`. 3. useLazyQuery: - Используется для выполнения запросов по требованию (например, при нажатии кнопки). - Пример: `const [fetchPost, { data }] = useLazyGetPostByIdQuery()`. ## Преимущества RTK Query: 1. Минимум boilerplate-кода: - RTK Query автоматически генерирует редьюсеры, действия и хуки. 2. Кэширование: - Данные автоматически кэшируются, что предотвращает лишние запросы. 3. Интеграция с Redux: - RTK Query легко интегрируется с существующим Redux-стором. 4. Оптимизация: - Автоматическое управление подписками и ререндерами. 5. Поддержка TypeScript: - RTK Query полностью поддерживает TypeScript, что делает её удобной для типизированных проектов. ## Недостатки RTK Query: 1. Ограниченная гибкость: - RTK Query ориентирована на REST API и GraphQL. Для более сложных сценариев может потребоваться ручная настройка. 2. Зависимость от Redux: - Если в проекте не используется Redux, RTK Query может быть избыточной. ## Когда использовать RTK Query? - Если в приложении много запросов к API и нужно управлять кэшированием. - Если уже используется Redux Toolkit и нужно упростить работу с API. - Для приложений, где требуется минимум boilerplate-кода. 🚀 **_Источник: DeepSeek_**