Этап 5 из 12 · ≈ 8 ч

Redux Toolkit

Альтернатива с Middle

Предсказуемое глобальное хранилище — слайсы, действия, селекторы.

Redux хранит состояние приложения в одном хранилище и меняет его только через действия, которые обрабатывают чистые функции-редьюсеры. Redux Toolkit — современный способ писать Redux без шаблонного кода.

const cart = createSlice({
  name: "cart",
  initialState: { items: [] },
  reducers: {
    added(state, action) { state.items.push(action.payload); },   // Immer: можно «мутировать»
  },
});

Что важно знать

  • Однонаправленный поток: компонент → dispatch(action) → редьюсер → новое состояние → подписчики через useSelector.
  • Селекторы подписывают компонент на часть состояния — перерисовка только при её изменении.
  • Redux DevTools: история действий и «путешествие во времени».
  • Сильные стороны — крупные приложения и команды; для небольших проектов часто избыточен.
  • На собеседованиях до сих пор спрашивают классический Redux: что такое action, reducer, middleware, почему редьюсер должен быть чистым.

Критерии освоения

Middle ≈ 8 ч

  • Описывает состояние слайсами, читает его селекторами и отлаживает в Redux DevTools
  • Объясняет action, reducer, middleware и почему редьюсер должен быть чистым

Практика. Перенести корзину приложения на Redux Toolkit с селекторами и тестами редьюсеров.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как устроен Redux Toolkit — слайсы, селекторы, middleware?Middle

Redux — одно хранилище, состояние меняется только через action (объект «что произошло»), а reducer — чистая функция (state, action) → новое state: без побочных эффектов, поэтому изменения предсказуемы, воспроизводимы и видны в Redux DevTools (история…

Полный разбор
Как управлять состоянием в React-приложении — Context, Redux, Zustand, серверное состояние?Junior

Сначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище (Redux Toolkit, Zustand) — сложное клиентское состояние, которое меняют многие…

Полный разбор
Почему в React нельзя изменять состояние напрямую?Junior

React узнаёт об изменении, сравнивая ссылки (Object.is). Мутация (items.push(x), user.name = ...) оставляет ссылку прежней — перерисовки не будет, а memo и useEffect не увидят изменений. Состояние обновляют новым объектом: spread, map, filter, toSorted.

Полный разбор
Когда использовать useReducer вместо useState?Middle

useReducer(reducer, initial) хранит состояние, которое меняется через действия: dispatch({type: "added", item}), а чистая функция reducer(state, action) возвращает новое состояние. Подходит, когда полей много и они меняются вместе, переходы зависят от…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования