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.