Redux для управления состоянием React-приложений

Приложение выросло, и состояние разъехалось по компонентам. Данные о пользователе в одном месте, фильтры — в другом, пропсы прокидываются через три уровня вниз, а после каждой правки ломается соседний экран. Вы выносите всё в контекст, но лишние перерисовки и запутанная логика никуда не деваются.

Курс закрывает именно этот разрыв: показывает, как собрать состояние React-приложения в одно предсказуемое хранилище — сначала руками, на «голом» Redux, а потом на Redux Toolkit, который используют в актуальных проектах.

После курса вы сможете

• спроектировать стор реального приложения: разбить его на слайсы и решить, что хранить глобально, а что оставить локальным состоянием
• писать редьюсеры, экшны и селекторы вручную — и понимать, что именно за вас делает Redux Toolkit
• работать с асинхронностью: redux-thunk, createAsyncThunk, статусы загрузки, обработка ошибок, отмена запроса
• подключать и писать собственные middleware, сохранять стор между сессиями через redux-persist и localStorage
• нормализовать списки данных через createEntityAdapter вместо самописных массивов и фильтров
• читать и поддерживать legacy-код на connect, mapStateToProps и mapDispatchToProps
• отлаживать состояние в Redux DevTools — видеть каждый экшн и каждое изменение стора
• довести проект до публикации в интернете на Vercel

Что внутри

Основы, которые не устаревают. Три принципа Redux, базовые сущности и API, action creators, хранилище по умолчанию. Плюс обзор альтернативных вариантов state management для React — чтобы понимать, когда Redux нужен, а когда нет.

React и Redux на хуках. Сущности react-redux, кликер и Todo List, Redux DevTools, два варианта организации кода, альтернативная точка входа, фильтры, синхронизация с localStorage, добавление роутинга.

Legacy, с которым вы столкнётесь на работе. Отдельный модуль про connect, mapStateToProps и mapDispatchToProps — с рефакторингом уже написанных приложений под классический подход.

Middleware и асинхронность. Введение в middleware и написание своих, подключение вместе с DevTools, redux-persist, проблема асинхронности, redux-thunk, клиентский API-слой, статусы загрузки и ошибки, POST-запросы, extraArgument.

Redux Toolkit. createAction, createReducer, createSlice, configureStore, extra-редьюсеры, структура проекта, redux-persist в связке с RTK.

RTK и асинхронность. createAsyncThunk, extraReducers, массовая обработка событий, обработка ошибок, отмена запроса к серверу, extra-параметр, createEntityAdapter на добавление, удаление и изменение данных.

Итоги. Style guide от создателей Redux и разбор частого вопроса — что стоит держать в сторе, а что нет.

Два проекта

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

Справочник стран. Загрузка данных с внешнего API, переключение светлой и тёмной темы, поиск, фильтрация по региону, очистка фильтров, детальная страница страны и получение информации о соседях.

Каждый проект возвращается в курс ещё раз: в модуле про legacy его переписывают под классический connect, в модулях про Redux Toolkit — на слайсы и createAsyncThunk. Один и тот же код в трёх подходах — так разница между ними видна не на словах. Базовая разметка и стили подготовлены заранее: вы сосредоточены на состоянии, а не на вёрстке.

Redux, когда код пишет ИИ

Ассистент сгенерирует слайс или thunk за секунды — и в этом проблема. Принять этот код или поправить может только тот, кто понимает, откуда взялся экшн, почему редьюсер обязан быть чистым и что произойдёт со стором при следующем запросе. Курс даёт именно это понимание: вы пишете Redux руками до того, как он сворачивается в три строки Redux Toolkit.

Что говорят студенты

«Отличный курс! Помогает познакомиться со всеми основными механизмами Redux, очень удобно изучать по модулям, продолжительность которых в среднем 40-50 минут. Смотрел видео автора на YouTube, рад, что есть отдельный курс по основным инструментам Frontend-разработки. Спасибо Михаилу за чёткое объяснение и структурированную подачу материала.»

«Отличный курс и как весь тот материал, что преподаёт Михаил. Его курсы помогли хорошо изучить материал. Нет лишней воды, только нужные и интересные штуки. Знания со всех курсов Михаила пригодились для трудоустройства на работу.»

«С Redux (rtk) работал до этого, но не хватало опыта, некоторые вещи по типу middleware и createEntityAdapter вообще не использовал. Автор всё очень понятно объясняет, начинает со старого варианта, а заканчивает toolkit'ом, который сейчас активно используется. По структуре всё прекрасно, материал хорошо запомнился, теперь чувствую себя значительно увереннее.»

«Курс великолепный, затронуты все необходимые темы (и даже легаси методы). Если проходили предыдущий курс Михаила по реакту, то очень советую и этот пройти!»

Кто автор

Меня зовут Михаил Непомнящий, я профессиональный веб-разработчик и работаю с React каждый день. Преподаю веб-разработку с 2016 года. Помню, как самому трудно было поначалу пробираться через дебри Redux, и в этом курсе постарался сделать подачу максимально понятной — от простого к сложному и без воды.

Кому подойдёт

• Вы уверенно пишете на React с хуками, но состояние приложения перестало помещаться в голову, а useState и контекст уже не справляются.
• Вы вышли в проект, где Redux написан до вас: connect, mapStateToProps, тонны бойлерплейта — и в этом нужно ориентироваться, а не бояться.
• Вы уже используете Redux Toolkit по образцу из чужого кода, но не понимаете, что под капотом, — и на собеседовании это становится заметно.

Чего в курсе нет

• TypeScript. Курс целиком на JavaScript, типизация стора не разбирается — это самая частая просьба в отзывах, отвечаю на неё честно.
• RTK Query. Асинхронность разбирается на redux-thunk и createAsyncThunk.
• Redux Saga. Генераторы и saga-подход остаются за рамками.
• Тестирование стора и Next.js / SSR.
• Отдельных уроков по работе с ИИ-ассистентами.
• Вёрстки с нуля в проектах: разметка и стили уже готовы, фокус на Redux-логике.

Формат

11 модулей, 103 урока — видео плюс упражнения на написание кода: к каждому есть готовый ответ и отдельное видео с разбором. К самым сложным блокам подготовлены материалы для скачивания. Вопросы можно задавать прямо к урокам.