react-redux
Тема дорожной карты · React
react-redux — это официальная библиотека привязки React к Redux, предоставляющая хуки и компоненты, соединяющие React-компоненты с глобальным хранилищем состояния Redux без ручного управления подписками. Два основных хука, которые она предоставляет: useSelector — для чтения данных из хранилища с помощью функции-селектора — и useDispatch — для получения функции dispatch хранилища, чтобы компоненты могли инициировать изменения состояния. Современные проекты на React и TypeScript используют react-redux совместно с Redux Toolkit, который генерирует типобезопасные создатели действий и редьюсеры, устраняя шаблонный код, делавший классический Redux многословным. Компонент <Provider> из react-redux оборачивает корень приложения и делает хранилище Redux доступным для любого компонента в дереве, обеспечивая масштабируемое управление состоянием в крупных фронтенд-приложениях. react-redux полностью совместим с Next.js и поддерживает паттерны SSR, при которых хранилище может быть инициализировано на сервере и регидратировано на клиенте.
Как это работает
react-redux в React выходит за пределы useState + Context, когда app-state большой, выводимый в нескольких местах или требует middleware (логирование, persistence, undo). Zustand — самая маленькая API-поверхность (один store, селекторы, без бойлерплейта). Redux Toolkit — официальный преемник Redux: предсказуемые reducers, devtools, RTK Query для данных. Jotai/Recoil моделируют state как атомы — у каждого своя подписка, ререндеры гранулярны.
Когда применять
Берите Zustand для новых проектов, если нет Redux-экспертизы или потребности в RTK Query — самый простой путь. Redux Toolkit — когда команда знает Redux или нужна экосистема devtools/middleware. Jotai/Recoil — когда state по природе атомарный (много независимых маленьких кусков). Оставайтесь на useState + Context, пока не упрётесь в prop drilling или perf-проблемы, оправдывающие библиотеку.
Типичные ошибки
Ловушки react-redux: Redux на маленьком приложении (гора бойлерплейта ради slice, помещающегося в useState); server-cache в state-библиотеке вместо TanStack Query (плохо переизобретаете кеш); чрезмерные селекторы и ререндер на любое изменение state; смешивание двух state-библиотек (Redux + Zustand) без чётких границ. Выберите одну и используйте везде.