advanced

Redux Toolkit Query

Управляйте загрузкой серверного состояния, кэшем, invalidation tags, сгенерированными hooks и жизненным циклом запросов в Redux-приложениях.

RTK Query добавляет слой fetch и кэширования внутри Redux: endpoints описывают queries и mutations, сгенерированные hooks управляют loading/error/data, теги кэша управляют инвалидацией.

					const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Post'],
  endpoints: (build) => ({
    getPosts: build.query({
      query: () => 'posts',
      providesTags: ['Post'],
    }),
    addPost: build.mutation({
      query: (body) => ({ url: 'posts', method: 'POST', body }),
      invalidatesTags: ['Post'],
    }),
  }),
});
// const { data } = api.useGetPostsQuery();
				

Дедуплицирует параллельные запросы, кэширует по сериализованным аргументам query, поддерживает optimistic updates через `onQueryStarted`. Не для локальных черновиков UI — форму держите в slice.

Компромисс: встроенный server cache в Redux против размера bundle и кривой обучения отдельно от client slices.

На интервью: как теги связывают записи с кэшированными чтениями; RTK Query vs TanStack Query в новом проекте.

Типовые ошибки: всё состояние приложения в RTK Query, грубые теги с лишней инвалидацией, mutations без плана отката.

Чеклист:

  • Endpoints рядом в createApi slice.
  • Граф providesTags / invalidatesTags.
  • Сгенерированные hooks в компонентах.
  • Клиентское UI-состояние вне кэша RTK Query.