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

RTK Query — это мощный инструмент для управления серверным состоянием (server state), встроенный в Redux Toolkit. Он абстрагирует логику запросов, кэширования, синхронизации и обновления данных, значительно сокращая шаблонный код. Прямое использование RTK Query рекомендуется для большинства сценариев работы с API, особенно для стандартных операций CRUD (Create, Read, Update, Delete).

Когда использовать RTK Query напрямую

• Простое получение и кэширование данных: RTK Query автоматически кэширует ответы, управляет жизненным циклом подписки и предотвращает дублирующие запросы.
• Автоматическая инвалидация кэша: Вы можете настроить автоматическое обновление данных после мутаций (например, после создания поста, список постов помечается как устаревший).
• Стандартные UI-паттерны: Он предоставляет хуки (useQuery, useMutation), которые дают флаги isLoading, isError, что идеально для отображения состояния загрузки в компонентах.

// Пример прямого использования RTK Query
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({ query: () => '/posts' }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
      // Автоматически обновляет кэш для getPosts
      invalidatesTags: ['Post'],
    }),
  }),
});

// В компоненте React
const { data: posts, isLoading } = api.useGetPostsQuery();
const [addPost] = api.useAddPostMutation();

Когда нормализовать данные в Redux

Нормализация — это процесс организации данных в состоянии Redux в виде словарей (объектов) по ID, с отдельными массивами ID для сохранения порядка. Это полезно, когда данные имеют сложные взаимосвязи.

• Сложные обновления между сущностями: Например, при удалении пользователя нужно также удалить все его комментарии из состояния.
• Оптимистичные обновления (optimistic updates): Когда вы хотите мгновенно обновить UI, а затем синхронизировать с сервером, и это обновление затрагивает несколько типов данных.
• Эффективное обновление UI: Нормализация позволяет селекторам и компонентам React эффективно мемоизироваться, так как ссылки на неизменённые объекты остаются прежними.

// Пример нормализованной структуры в Redux
{
  posts: {
    ids: [1, 2, 3],
    entities: {
      1: { id: 1, title: 'Post A', authorId: 101 },
      2: { id: 2, title: 'Post B', authorId: 102 },
      3: { id: 3, title: 'Post C', authorId: 101 },
    }
  },
  users: {
    ids: [101, 102],
    entities: {
      101: { id: 101, name: 'Alice' },
      102: { id: 102, name: 'Bob' },
    }
  }
}

// Селектор для получения поста с информацией об авторе
const selectPostWithAuthor = (state, postId) => {
  const post = state.posts.entities[postId];
  const author = state.users.entities[post.authorId];
  return { ...post, author };
};

Вывод: Начинайте с прямого использования RTK Query для всех серверных взаимодействий — это покрывает 90% случаев. Переходите к ручной нормализации данных в Redux только тогда, когда ваше приложение требует сложных, перекрёстных обновлений состояния между различными сущностями, которые сложно выразить через автоматическую инвалидацию тегов RTK Query, или когда критически важна максимальная производительность обновлений связанных данных.