Redux и Redux Toolkit: когда React-приложению нужен общий стор и как его освоить

Главный вопрос новичка — не «как подключить Redux», а «какие данные в него класть». Текст в поле поиска или открытое модальное окно — локальное состояние одного компонента, ему место в useState. В стор попадает то, что читают и меняют разные части интерфейса: корзина, которую видят шапка, каталог и оформление заказа; данные пользователя; общие фильтры. Если держать в Redux всё подряд, код разрастается без пользы.

Какую задачу решает общий стор

В React данные передаются сверху вниз через props. Когда счётчик корзины нужен в шапке, а кнопка «Купить» лежит в карточке на пятом уровне вложенности, данные приходится протаскивать через компоненты, которым они не нужны (prop drilling). А если два экрана получают одни и те же данные разными путями, они начинают расходиться.

В Redux общие данные лежат в сторе, любой компонент читает нужный кусок через хук useSelector и отправляет действия через useDispatch. Каждое изменение проходит через редьюсер, поэтому его видно в расширении Redux DevTools: какое действие пришло, каким было состояние до и после; приложение можно «перемотать» на несколько шагов назад. Ради этой предсказуемости Redux берут в большие проекты с несколькими разработчиками.

Когда Redux не нужен

Документация Redux прямо отвечает, что не каждому приложению нужен Redux. Перед выбором полезно пройти по условиям, которые там перечислены, потому что каждое из них описывает конкретную боль, а не моду:

• много данных, которые нужны во многих местах приложения;
• состояние часто обновляется;
• логика обновления сложная;
• кодовая база средняя или большая, над ней работает несколько человек;
• нужно видеть, как состояние менялось во времени.

Если совпадает одно-два условия, стоит посмотреть на более простые инструменты. Context API встроен в React и подходит для данных, которые меняются редко: тема оформления, язык интерфейса, текущий пользователь. Ограничение в том, что при изменении значения перерисовываются все компоненты, читающие этот контекст, поэтому часто меняющиеся данные через него передавать невыгодно.

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

Данные с сервера — списки товаров, профиль, комментарии — вручную раскладывать по стору не нужно: для этого есть библиотеки кеширования запросов, RTK Query в составе Redux Toolkit и TanStack Query вне его.

Учебный пример: корзина на Redux Toolkit

Условие учебное. В интернет-магазине счётчик корзины показан в шапке, а кнопки «Добавить» стоят в карточках каталога. Слайс описывает начальное состояние и редьюсеры, а Redux Toolkit сам создаёт по ним действия:

import { createSlice, configureStore } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    added(state, action) {
      const item = state.items.find(i => i.id === action.payload.id);
      if (item) item.qty += 1;
      else state.items.push({ ...action.payload, qty: 1 });
    },
  },
});

export const { added } = cartSlice.actions;
export const store = configureStore({ reducer: { cart: cartSlice.reducer } });

Карточка вызывает dispatch(added(product)), шапка читает число позиций через useSelector. Обратите внимание на push и item.qty += 1: выглядит как прямое изменение, хотя в Redux состояние менять нельзя. Внутри createSlice это допустимо: библиотека Immer отслеживает правки черновика и собирает из них новый объект. За пределами слайса такой код ломает приложение.

Загрузку каталога пишут через createAsyncThunk: он отправляет действия pending, fulfilled и rejected, а слайс в extraReducers решает, что показать на каждом этапе — индикатор, список или ошибку.

RTK Query и кеш, о котором стоит знать заранее

С RTK Query вы объявляете эндпоинт, а библиотека генерирует хук вроде useGetProductsQuery, который сам хранит результат, статус загрузки и ошибку. Если два компонента запрашивают одно и то же с одинаковыми параметрами, запрос уходит один раз.

Важная деталь — как долго живёт кеш. Согласно документации RTK Query о кешировании, данные остаются в кеше 60 секунд после того, как от них отписался последний компонент; за это отвечает параметр keepUnusedDataFor. По умолчанию, если данные уже в кеше, при повторном монтировании компонента запрос на сервер не уходит. Пользователь ушёл со страницы товаров и через полминуты вернулся — он увидит прежний список, даже если цены уже поменялись. Для заказов, остатков и чатов это настраивают: включают refetchOnMountOrArgChange, задают теги, чтобы мутация сбрасывала нужные запросы, или обновление при возврате фокуса окну. Последнее работает только после вызова setupListeners(store.dispatch).

Проверки только для разработки

По описанию getDefaultMiddleware, configureStore в сборке для разработки проверяет, не изменили ли состояние напрямую и нет ли в состоянии и действиях несериализуемых значений вроде Date, Promise или функций. В продакшен-сборке остаётся только middleware для thunk, поэтому предупреждения в консоли нельзя игнорировать: в боевой версии их не будет, а ошибка останется.

В каком порядке осваивать Redux

Каждый шаг опирается на предыдущий. Без понимания неизменяемости непонятно, зачем редьюсер возвращает новый объект, а RTK Query проще понять, когда знаешь, сколько ручной работы он заменяет:

1. React: props, useState, поднятие состояния и Context — чтобы почувствовать, где они перестают справляться.
2. Неизменяемость в JavaScript: spread-оператор, map и filter вместо push и splice.
3. Принципы Redux на маленьком примере: стор, действие, редьюсер, подписка.
4. Redux Toolkit: configureStore, createSlice, useSelector и useDispatch, Redux DevTools.
5. Асинхронность: createAsyncThunk и статусы загрузки.
6. RTK Query: эндпоинты, кеш, теги, мутации.
7. TypeScript: типизированные хуки и состояние.

Первые пять шагов можно пройти по бесплатному учебнику Redux Essentials на redux.js.org. Если нужна проверка кода, освоить Redux можно на онлайн-курсе React от Skillbox: он входит в блок о компонентах и управлении состоянием. Курс рассчитан на три месяца и на тех, кто уже знает HTML, CSS и JavaScript, в нём 15 практических работ и три проекта.

Упражнения, ошибки и проверка результата

Упражнения добавляют по одной идее. Счётчик на createSlice — посмотрите в Redux DevTools, как выглядит каждое действие. Затем корзина из примера в небольшом каталоге. Потом загрузка открытого API через createAsyncThunk и та же загрузка на RTK Query — сравните объём кода. Наконец, мутация вроде отметки «избранное»: список должен обновиться без перезагрузки.

Проверяйте не только то, что приложение работает. В DevTools должно быть понятно, какое действие что изменило: cart/added читается лучше, чем SET_DATA. Включите медленную сеть и посмотрите, что видит пользователь при загрузке и ошибке, а в React Developer Tools — перерисовывается ли шапка при смене фильтра в каталоге.

Ошибки новичков повторяются. В стор кладут всё подряд, включая состояние полей формы. Копируют данные сервера в слайс вручную и получают рассинхрон с кешем. Пишут селектор, который при каждом вызове возвращает новый массив через filter, и компонент перерисовывается при любом действии; для таких вычислений есть createSelector, который запоминает результат. Кладут в состояние Date или экземпляр класса, а предупреждение о сериализации отключают вместо того, чтобы хранить строку или число.

Короткая программа по React-экосистеме — курс «Frontend-разработка на React» в Merion Academy: Redux и Redux Middleware там посвящён шестой блок из семи, после хуков, Context API и React Router. Курс асинхронный, около четырёх месяцев по 2–5 часов в неделю, JavaScript нужно знать заранее. Redux Toolkit и RTK Query в программе не названы — уточните это у школы.

Как навык влияет на доход

Отдельной надбавки за Redux обычно нет: в вакансиях фронтенд-разработчика его указывают рядом с React и TypeScript как часть стека. Навык расширяет круг задач — от доработки крупных приложений, где Redux уже стоит, до переноса старого кода с connect и switch-редьюсеров на Redux Toolkit.

Ориентир — калькулятор зарплат «Хабр Карьеры»: это анкеты специалистов о фактической зарплате, а не предложения работодателей; Россия без фильтра по городу и уровню, данные открыты в октябре 2026 года. У фронтенд-разработчиков, указавших Redux, калькулятор показывает 280 833 ₽ по 148 анкетам, у всех фронтенд-разработчиков — 225 000 ₽ по 2 828 анкетам. Выборка по Redux мала, и разница не доказывает, что платят именно за него: его чаще указывают опытные разработчики больших продуктов.

Как выбрать обучение

Сначала решите, что нужно: разобраться с Redux в рамках React или пройти весь путь фронтенд-разработчика. Во втором случае управление состоянием должно быть закреплено проектом, а не одной лекцией. Если в программе createStore, connect и ручные константы действий без Toolkit, материалы давно не обновляли: документация Redux рекомендует configureStore.

Тем, кто начинает с нуля, подойдёт длинная программа. На курсе «Фронтенд-разработчик» в Хекслете путь идёт от вёрстки и JavaScript к последнему модулю «React и Redux Toolkit», а управление состоянием нужно в итоговом проекте — чате с авторизацией и сокетами. Крупные работы проходят ревью наставника. Сведения о сроке обучения расходятся: от 8 до 10 месяцев на стандартном тарифе, его стоимость — 85 000 ₽ при полной оплате; уточните условия у школы.

Ещё смотрите, есть ли ревью кода: лишние данные в сторе и тяжёлые селекторы ловит проверяющий, а не автотест. Хорошая программа показывает и Context, и Zustand и объясняет выбор, а не подаёт Redux как обязательный слой любого приложения.

Сравнить школы по формату и поддержке можно в рейтинге онлайн-школ с обучением фронтенд-разработке — он широкий и охватывает всё направление, а не один Redux. До записи соберите корзину из примера и посмотрите её в Redux DevTools: если идея «состояние меняется только через действия» покажется понятной, на курсе можно сосредоточиться на RTK Query и архитектуре.