Что такое Redux Query?

Что такое Redux Query?

Redux Query — это устаревшее название библиотеки, которая сейчас известна как RTK Query. Это мощный инструмент для управления загрузкой, кэшированием, синхронизацией и обновлением данных в приложениях на React, построенных с использованием Redux Toolkit (RTK). По сути, RTK Query — это «официальный» рекомендованный способ работы с асинхронными запросами (API) в экосистеме Redux, который полностью избавляет разработчика от необходимости вручную писать редьюсеры, экшены и селекторы для каждой конечной точки API.

RTK Query не является отдельной библиотекой — это плюс-пакет (add-on), входящий в состав @reduxjs/toolkit. Его ключевая философия — предоставить инструменты для автоматизации всего жизненного цикла данных, получаемых с сервера.

Ключевые возможности и преимущества

• Автоматическое кэширование: Самое значимое преимущество. RTK Query автоматически кэширует результаты запросов. При повторном обращении к тем же данным с теми же параметрами в течение определенного времени (которое можно настраивать) запрос не отправляется на сервер, а данные мгновенно берутся из кэша. Это резко повышает производительность и снижает нагрузку на сервер.
• Дедупликация запросов: Если несколько компонентов одновременно пытаются выполнить один и тот же запрос, RTK Query отправит его только один раз, а результаты предоставит всем «подписчикам».
• Автоматическая генерация хуков: На основе объявленных эндпоинтов (endpoints) библиотека генерирует готовые React-хуки (например, useGetPostQuery для GET-запроса или useUpdatePostMutation для мутации). Эти хуки управляют состоянием загрузки, ошибками и данными.
• Оптимистичные обновления: Позволяет немедленно обновить UI в ответ на действие пользователя (например, лайк), а затем в фоне синхронизировать изменение с сервером. В случае ошибки изменения автоматически откатываются.
• Рефетчинг (перезапрос) данных: Предоставляет гибкие механизмы для повторного запроса данных: при повторном фокусе на окне браузера, при восстановлении сетевого соединения или по интервалу (polling).
• Интеграция с Redux DevTools: Все запросы, мутации и изменения состояния полностью отслеживаются в Redux DevTools, что значительно упрощает отладку.
• Сокращение шаблонного кода (boilerplate): Полностью устраняет необходимость ручного создания экшенов FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE и соответствующих редьюсеров.

Базовый пример использования

Вот как выглядит типичная настройка API с использованием RTK Query:

1. Создание API slice:

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

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  tagTypes: ['Post'], // Система тегов для инвалидации кэша
  endpoints: (builder) => ({
    // Определяем запрос (query) для получения данных
    getPosts: builder.query({
      query: () => 'posts',
      providesTags: ['Post'], // Результаты этого запроса помечаются тегом 'Post'
    }),
    // Определяем мутацию (mutation) для изменения данных
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'], // При успешной мутации кэш с тегом 'Post' будет признан невалидным
    }),
  }),
});

// Экспортируем автоматически сгенерированные хуки
export const { useGetPostsQuery, useAddPostMutation } = postsApi;

1. Подключение API к хранилищу Redux:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from './postsApi';

export const store = configureStore({
  reducer: {
    // Подключаем редьюсер из API slice
    [postsApi.reducerPath]: postsApi.reducer,
  },
  // Добавляем middleware для работы с кэшированием, инвалидацией и другими функциями
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(postsApi.middleware),
});

1. Использование в React-компоненте:

// PostsComponent.jsx
import React from 'react';
import { useGetPostsQuery, useAddPostMutation } from './postsApi';

function PostsComponent() {
  // Используем сгенерированный хук. Он возвращает объект с data, error, isLoading, refetch и др.
  const { data: posts, isLoading, error, refetch } = useGetPostsQuery();
  const [addPost, { isLoading: isAdding }] = useAddPostMutation();

  const handleAddPost = async () => {
    try {
      await addPost({ title: 'New Post', body: 'Content' }).unwrap();
      // После успешной мутации кэш с тегом 'Post' инвалидируется,
      // и хук useGetPostsQuery автоматически выполняет повторный запрос для обновления данных!
    } catch (err) {
      console.error('Failed to add post:', err);
    }
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <button onClick={handleAddPost} disabled={isAdding}>
        Add Post
      </button>
      <button onClick={refetch}>Refetch</button>
      <ul>
        {posts?.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Когда использовать RTK Query?

RTK Query — отличный выбор, если:

• Ваше приложение уже использует Redux Toolkit.
• Вы работаете с приложением, которое интенсивно взаимодействует с REST или GraphQL API.
• Вам необходимы встроенные и готовые механизмы кэширования, синхронизации и инвалидации данных.
• Вы хотите минимизировать объем шаблонного кода и повысить согласованность кода.

Альтернативы

Для приложений, не использующих Redux, существуют другие популярные решения:

• React Query / TanStack Query: Независимая и чрезвычайно мощная библиотека, которая является де-факто стандартом для управления серверным состоянием в React. Очень гибкая и функционально богатая.
• SWR: Библиотека от Vercel, сфокусированная на кэшировании, рефетчинге и простом API.
• Apollo Client: Специализированное решение для GraphQL.

Вывод: RTK Query (ранее Redux Query) — это современный, эффективный и «батарейками-включенный» подход к управлению асинхронным состоянием в связке Redux + React. Он превращает сложную задачу синхронизации клиента и сервера в декларативный и легко поддерживаемый процесс, что делает его незаменимым инструментом в арсенале Frontend-разработчика, работающего с Redux Toolkit.