Ответ
RTK (Redux Toolkit) — это набор инструментов для работы с Redux, упрощающий его настройку и использование (например, createSlice, configureStore).
RTK Query — это надстройка над RTK, предназначенная для управления серверным состоянием (API-запросы, кэширование, инвалидация).
Ключевые различия:
- Назначение: RTK — для клиентского состояния, RTK Query — для синхронизации с сервером.
- Сложность: RTK Query автоматизирует загрузку данных, кэширование, обновления, тогда как в RTK это нужно делать вручную.
- Код:
// RTK (обычный Redux)
const postsSlice = createSlice({
name: 'posts',
initialState: [],
reducers: { /* Ручная логика */ }
});
// RTK Query (автоматизация API)
const api = createApi({
endpoints: (build) => ({
getPosts: build.query({ query: () => '/posts' }),
}),
});Когда что использовать:
- RTK: сложное клиентское состояние (например, форма с множеством полей).
- RTK Query: работа с API (CRUD, кэширование).
Можно использовать вместе в одном проекте!
Ответ 18+ 🔞
А, ну вот, опять про эти ваши инструменты для состояния! RTK и RTK Query, блядь. Слушай, представь, ты строишь дом.
RTK — это как твой личный, ебаный, склад с инструментами. У тебя там гвозди, молотки, шурупы, уровень. Всё разложено по коробочкам, подписано. Ты сам решаешь, когда и какой гвоздь забить, куда какую доску прикрутить. Это твоё клиентское хозяйство. createSlice — это ты завёл новую коробку, подписал "Гвозди оцинкованные" и сложил туда логику, как их использовать. configureStore — это ты собрал все коробки в один большой шкаф и поставил его в гараже. Всё под контролем, но и возни, блядь, дохуя.
RTK Query — это, сука, магическая доставка стройматериалов прямо на объект. Ты просто звонишь и говоришь: "Мне десять мешков цемента". А тебе отвечают: "Окей, чувак, уже везем. Кстати, у тебя от прошлого заказа ещё полмешка в углу валяется, свежий, можешь пока его использовать. Новый привезём, старый автоматически выкинем, не парься". И они сами следят, чтобы у тебя не было просроченного цемента, сами обновляют запасы. Это чисто для общения с сервером-поставщиком.
Короче, в чём разница, на пальцах:
- Задача: RTK — для внутренней кухни в твоём приложении (что нажал пользователь, что куда перетащил). RTK Query — исключительно для походов на сервер за данными и обратно.
- Геморрой: С RTK Query его, в рот меня чих-пых, на овердохуища меньше. Не нужно писать экшены, редьюсеры, санки для загрузки, обработки ошибок и кэширования. Всё из коробки, ёпта!
- Код, смотри, как отличается:
// RTK (Делаем всё сами, как честные крестьяне)
const postsSlice = createSlice({
name: 'posts',
initialState: { data: [], loading: false, error: null }, // Сам объявляю, сам слежу
reducers: {
fetchPostsStart(state) { state.loading = true; }, // Ой, всё, начинаю грузить!
fetchPostsSuccess(state, action) { state.data = action.payload; state.loading = false; }, // Ура, пришли!
fetchPostsFailure(state, action) { state.error = action.payload; state.loading = false; } // Бля, всё пропало!
}
});
// И это ещё санку писать надо, где fetch вызывается... Ну ёбта, заебался уже.
// RTK Query (Волшебный пендель)
const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
endpoints: (build) => ({
getPosts: build.query({
query: () => '/posts', // Всё. Сказал куда сходить.
}),
// А он сам тебе вернёт { data, error, isLoading, refetch } — живи, радуйся.
}),
});Так когда что брать?
- RTK: Когда у тебя в приложении своя, хитрая логика. Сложная форма, которую нужно валидировать, состояние перетаскивания элементов, всякие модалки-попапы — тут твой склад инструментов рулит.
- RTK Query: Как только речь зашла про "нужно сходить на бэкенд, что-то получить, создать, обновить" — сразу хватаешь эту магическую палочку. Кэширование, инвалидация, повторные запросы — он за тебя всё сделает, пидарас шерстяной.
И главное — их можно, сука, использовать вместе! В одном проекте. RTK Query под капотом сам использует RTK. Так что можешь в одном месте (configureStore) запихнуть и свой склад для клиентских дел, и эту умную доставку для серверных. Красота, блядь!