Redux Toolkit
Тема дорожной карты · Frontend разработчик
Redux — это предсказуемый контейнер состояния для JavaScript-приложений, основанный на однонаправленном потоке данных: состояние хранится в едином неизменяемом хранилище, компоненты диспетчеризуют объекты action, а чистые функции reducer вычисляют следующее состояние. Redux Toolkit (RTK) — официальный рекомендуемый способ написания Redux-логики сегодня: предоставляет createSlice для совместного определения редюсеров и экшенов, configureStore для настройки хранилища с правильными умолчаниями (Redux DevTools, Immer для иммутабельных обновлений) и createAsyncThunk для асинхронных создателей экшенов. Хук useSelector читает состояние из хранилища в React-компонентах, а useDispatch диспетчеризует экшены — оба типобезопасны при совместном использовании с генерируемыми RTK TypeScript-типами RootState и AppDispatch. Redux остаётся стандартным выбором для крупных React и Next.js-приложений, требующих детерминированного состояния, отладки с путешествием во времени, надёжной поддержки middleware и устоявшейся экосистемы DevTools и паттернов тестирования.
Как это работает
Redux Toolkit начинается с локального state компонента (useState); как только двум компонентам нужны те же данные — поднимайте к общему родителю. Для app-wide state выбирайте по сложности: Context API (встроенный, редкие изменения), Zustand (минимальный API, один store, селекторы), Redux Toolkit (предсказуемые reducers, devtools, RTK Query для server state), Jotai/Recoil (atom-based, fine-grained реактивность). Server state (данные с API) — в TanStack Query или SWR, не в глобальном store.
Когда применять
По умолчанию useState + lifting state up; библиотека — только когда prop drilling переваливает 3+ слоя или perf требует селекторов. Zustand — для новых проектов: минимальный API. Redux Toolkit — когда команда знает Redux или нужен RTK Query. Всегда разделяйте server state (TanStack Query) и client state (Zustand/Redux). Для форм react-hook-form — де факто стандарт.
Типичные ошибки
Ловушки Redux Toolkit: весь state в Redux, когда local state хватает (бойлерплейт без пользы); server-fetched данные в Redux вместо TanStack Query (плохо переизобретаете кеш); чрезмерный Context (ререндер всех consumer на любое изменение); селекторы, всегда возвращающие новый объект (ломают мемоизацию). Прочтите "common mistakes" каждой библиотеки до принятия.