Как устроен Redux Toolkit — слайсы, селекторы, middleware?
- Что такое action и reducer в Redux?
Redux — одно хранилище, состояние меняется только через action (объект «что произошло»), а reducer — чистая функция (state, action) → новое state: без побочных эффектов, поэтому изменения предсказуемы, воспроизводимы и видны в Redux DevTools (история, «путешествие во времени»). Redux Toolkit: createSlice генерирует actions и reducer, внутри можно «мутировать» — Immer создаст копию; configureStore с DevTools. Чтение — useSelector с селектором, запись — useDispatch. Middleware перехватывает actions для асинхронности и логирования (thunk); данные с сервера — RTK Query.
- Чистота редьюсера — условие предсказуемости и DevTools
- Мемоизированные селекторы — createSelector
- Не всё состояние нужно в Redux: формы и локальное — в компонентах
А ещё Для небольших приложений Zustand часто проще
Подробно
const cart = createSlice({
name: "cart",
initialState: { items: [] as Item[] },
reducers: { add(s, a: PayloadAction<Item>) { s.items.push(a.payload); } },
});
const items = useSelector((s: RootState) => s.cart.items);
dispatch(cart.actions.add(item));Что хотят услышать
- Action, чистый reducer, одно хранилище.
- createSlice и Immer.
- Селекторы, dispatch, middleware, DevTools.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Reducer в Redux может делать запросы к API
- ✓Изменения только через action, reducer чистый; createSlice с Immer, асинхронность — middleware
- ✗Мутация state в createSlice изменяет исходный объект напрямую без копии и подписчики не узнают
- ✗Всё состояние приложения, включая поля форм, обязательно хранить в Redux
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.