59 lines
4.9 KiB
Markdown
59 lines
4.9 KiB
Markdown
---
|
||
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-кода.
|