Ответ
Redux Toolkit — это официальный набор инструментов для эффективной работы с Redux. Он упрощает настройку хранилища, уменьшает количество шаблонного кода и включает полезные утилиты.
Ключевые возможности:
configureStore(): автоматически настраивает DevTools и middleware (например, Redux Thunk).createSlice(): генерирует редьюсеры и экшены из одного объекта, избавляя от ручного написания констант.createAsyncThunk(): упрощает работу с асинхронными операциями.- Встроенная поддержка Immer для мутабельного обновления состояния.
Пример:
import { createSlice, configureStore } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
},
});
const store = configureStore({
reducer: counterSlice.reducer,
});
// Использование:
store.dispatch(counterSlice.actions.increment());Ответ 18+ 🔞
Да ты послушай, что эти умники придумали! Redux Toolkit, блядь, — это типа официальный такой набор, чтобы с Redux не ебаться как с пленным. Раньше же, сука, настроек было — овердохуища, писал константы, редьюсеры, экшены — руки отваливались, а тут — раз, и всё в кучу собрали, красота!
Чем они там балуются:
configureStore(): Эта штука, блядь, сама тебе и DevTools подтянет, и всякие middleware (ну там тот же Redux Thunk) прикрутит. Не надо больше голову ломать, ебать мои старые костыли!createSlice(): Вообще песня! Раньше ты размазывал логику по трём файлам, а тут — один объект, и из него, как из рога изобилия, сыпятся и редьюсер, и экшены. Константы эти ебучие писать вообще забыл, как страшный сон.createAsyncThunk(): Ну это для асинхронщины, когда данные с сервака тащишь. Раньше там танцы с бубном были, а теперь — более-менее цивильно.- И самое, блядь, приятное — Immer внутри уже сидит. То есть ты в редьюсере state можешь мутить как в обычном массиве или объекте, а он за кулисами сам неизменяемую копию сделает. Удобно, ёпта!
Смотри, как это выглядит, на простом примере:
import { createSlice, configureStore } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
},
});
const store = configureStore({
reducer: counterSlice.reducer,
});
// А юзать вот так, просто:
store.dispatch(counterSlice.actions.increment());Видишь? Никакого геморроя. Создал слайс — и у тебя уже всё есть. Красота, в рот меня чих-пых! Раньше бы на это полдня убил, а тут — пять минут, и пошёл пиво пить.