Мы используем cookie для стабильной работы сервиса. Подробнее

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

ФорматОнлайн
Длительность3-5 часов в неделю
Объём11 занятий
По окончанииStepik
О курсе

Подробнее

Приложение выросло, и состояние разъехалось по компонентам. Данные о пользователе в одном месте, фильтры — в другом, пропсы прокидываются через три уровня вниз, а после каждой правки ломается соседний экран. Вы выносите всё в контекст, но лишние перерисовки и запутанная логика никуда не деваются. Курс закрывает именно этот разрыв: показывает, как собрать состояние 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 урока — видео плюс упражнения на написание кода: к каждому есть готовый ответ и отдельное видео с разбором. К самым сложным блокам подготовлены материалы для скачивания. Вопросы можно задавать прямо к урокам.
Требования

Что нужно для старта

  • Начальные требования:
  • HTML
  • CSS
  • JavaScript
  • React
Результат

Что вы получите

  • Redux основные понятия
  • React-redux - использование в React-приложениях
  • Хуки react-redux
  • Легаси метод connect
  • Асинхронная работа с redux-thunk
  • Redux Toolkit
  • Redux Toolkit asyncThunk
  • Варианты организации структуры приложения
  • Проекты с redux-логикой
Аудитория

Для кого этот курс

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

Программа курса

11 занятий
№ТемаЧто внутри
01Вводный модуль

- Вводное видео
- Что такое Redux
- Варианты state management для React
- Пререквизит к курсу
- Окружение для работы

02Redux

- Обзор модуля
- Три принципа Redux
- Базовые сущности Redux
- Базовое API Redux
- Пример с кликером
- Решение задачи с кликером
- Action creators и их использование
- Хранилище по умолчанию
- Итоги модуля

03React-redux на хуках

- Обзор модуля
- Сущности react-redux
- Кликер на React+Redux
- Todo List на React+Redux
- Redux DevTools
- Вариант организации кода #1
- Вариант организации кода #2
- Альтернативная точка входа
- Вариант TodoList с фильтрами
- Синхронизация с localStorage
- Добавление роутинга
- Итоги модуля

04Проект 1

- Обзор проекта
- Настройка окружения
- Базовые компоненты
- Добавление провайдера и пустого стора
- Редьюсер вакансий
- Редьюсер фильтрации
- Механизм добавления фильтров
- Удаление фильтров и их очистка
- Публикация проекта
- Итоги модуля

05React-redux legacy

- Легаси для react-redux
- Метод connect
- Концепция mapStateToProps
- Концепция mapDispatchToProps
- Рефакторинг Todo App
- Рефакторинг проекта 1
- Итоги модуля

06Redux Middleware и асинхронная работа

- Введение в redux middleware
- Базовое использование redux middleware
- Подключение вместе с devTools
- Библиотека redux-persist
- Проблема асинхронности
- Библиотека redux-thunk
- Использование redux-thunk
- Подготовка клиентского api
- Статусы загрузки и обработка ошибок
- Post-запросы
- Thunk extraArgument
- Итоги модуля

07Проект 2

- Обзор проекта
- Структура проекта
- Добавление redux бойлерплейта
- Переключение светлой/темной темы
- Редьюсер для стран
- Отрисовка стран в UI
- Фильтрация по поиску
- Фильтрация по региону
- Очистка фильтров
- Детальная страница
- Очистка детальной страницы
- Получение информации о соседях
- Обзор итогового приложения

08Redux Toolkit

- Актуальность Redux Toolkit
- Сущности Redux Toolkit
- Метод createAction
- Метод createReducer
- Метод createSlice
- Метод configureStore
- Практика создания слайсов
- Extra редьюсеры
- Структура проекта
- Redux-persist вместе с RTK
- Рефакторинг проекта, часть 1
- Рефакторинг проекта, часть 2
- Итоги модуля

09RTK AsyncThunk

- Обзор модуля
- Базовое использование createAsyncThunk
- ExtraReducers для работы с thunk экшнами
- Практика создания thunk c createAsyncThunk
- Использование в UI
- Массовая обработка событий в extraReducers
- Обработка ошибок
- Отмена запроса к серверу
- Extra параметр thunk
- Базовое использование createEntityAdapter
- Удаление и изменение данных через адаптер
- Итоги модуля

10Рефакторинг проекта 2

- Постановка задачи
- Организация структуры и слайс темы
- Слайс блока фильтрации
- Слайс стран
- Слайс для деталки
- Получение соседей
- Итоги модуля

11Итоги курса

- Style Guide от создателей Redux
- FAQ по тому, что хранить в Redux-сторе
- Итоги курса

01Вводный модуль

- Вводное видео
- Что такое Redux
- Варианты state management для React
- Пререквизит к курсу
- Окружение для работы

02Redux

- Обзор модуля
- Три принципа Redux
- Базовые сущности Redux
- Базовое API Redux
- Пример с кликером
- Решение задачи с кликером
- Action creators и их использование
- Хранилище по умолчанию
- Итоги модуля

03React-redux на хуках

- Обзор модуля
- Сущности react-redux
- Кликер на React+Redux
- Todo List на React+Redux
- Redux DevTools
- Вариант организации кода #1
- Вариант организации кода #2
- Альтернативная точка входа
- Вариант TodoList с фильтрами
- Синхронизация с localStorage
- Добавление роутинга
- Итоги модуля

04Проект 1

- Обзор проекта
- Настройка окружения
- Базовые компоненты
- Добавление провайдера и пустого стора
- Редьюсер вакансий
- Редьюсер фильтрации
- Механизм добавления фильтров
- Удаление фильтров и их очистка
- Публикация проекта
- Итоги модуля

05React-redux legacy

- Легаси для react-redux
- Метод connect
- Концепция mapStateToProps
- Концепция mapDispatchToProps
- Рефакторинг Todo App
- Рефакторинг проекта 1
- Итоги модуля

06Redux Middleware и асинхронная работа

- Введение в redux middleware
- Базовое использование redux middleware
- Подключение вместе с devTools
- Библиотека redux-persist
- Проблема асинхронности
- Библиотека redux-thunk
- Использование redux-thunk
- Подготовка клиентского api
- Статусы загрузки и обработка ошибок
- Post-запросы
- Thunk extraArgument
- Итоги модуля

07Проект 2

- Обзор проекта
- Структура проекта
- Добавление redux бойлерплейта
- Переключение светлой/темной темы
- Редьюсер для стран
- Отрисовка стран в UI
- Фильтрация по поиску
- Фильтрация по региону
- Очистка фильтров
- Детальная страница
- Очистка детальной страницы
- Получение информации о соседях
- Обзор итогового приложения

08Redux Toolkit

- Актуальность Redux Toolkit
- Сущности Redux Toolkit
- Метод createAction
- Метод createReducer
- Метод createSlice
- Метод configureStore
- Практика создания слайсов
- Extra редьюсеры
- Структура проекта
- Redux-persist вместе с RTK
- Рефакторинг проекта, часть 1
- Рефакторинг проекта, часть 2
- Итоги модуля

09RTK AsyncThunk

- Обзор модуля
- Базовое использование createAsyncThunk
- ExtraReducers для работы с thunk экшнами
- Практика создания thunk c createAsyncThunk
- Использование в UI
- Массовая обработка событий в extraReducers
- Обработка ошибок
- Отмена запроса к серверу
- Extra параметр thunk
- Базовое использование createEntityAdapter
- Удаление и изменение данных через адаптер
- Итоги модуля

10Рефакторинг проекта 2

- Постановка задачи
- Организация структуры и слайс темы
- Слайс блока фильтрации
- Слайс стран
- Слайс для деталки
- Получение соседей
- Итоги модуля

11Итоги курса

- Style Guide от создателей Redux
- FAQ по тому, что хранить в Redux-сторе
- Итоги курса

Документ после выпуска

Stepik

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Redux для управления состоянием React-приложений» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Направления:ReactFrontend-разработка

Информация обновлена 21 сентября 2026 г.

Продолжить выбор

Похожие курсы

Vue.js 3, Vue Router и Pinia
Vue.js 3, Vue Router и Pinia

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Это…

Онлайн15 занятий
3 999 ₽
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипе…

Онлайн8 занятий
490 ₽
Node js для Front End
4 месяца
Node js для Front End

Backend разработка на Node.js: Express.js, NestJS фреймворки. Работа с базами данных PostgreSQL, MongoDB. Создание REST API, аутентификация и авторизация. WebSockets для реального…

ОнлайнСредний
100 000 ₽от 5 555 ₽/мес на 18 мес.
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks
24 ак.часа
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks

На протяжении всего курса, слушатели вместе с тренером строят конкретные приложения с использованием классов React и функций. На основе теоретических знаний, на конкретных данных,…

Онлайн4 занятий
54 000 ₽
React Native и Expo Router
React Native и Expo Router

В этом курсе мы изучим React Native и Expo Router написав полноценное мобильное приложение с авторизацией и нативными возможностями. Этот курс подойдёт тем, кто хочет погрузиться…

Онлайн16 занятий
3 999 ₽
Начать без затрат

Бесплатные курсы

Angular 14 - написание приложения
Бесплатно10 академических часов
Angular 14 - написание приложения

Обновленный быстрый курс по Angular 14, который будет актуален на момент 2022 года. В рамках курса напишем полноценное приложение, на примере которого разберем ключевые моменты да…

Онлайн1 занятий
Видеоуроки
Бесплатно
Практика Frontend разработчика 2025
Бесплатно48 академических часов
Практика Frontend разработчика 2025

Полный курс по созданию Frontend приложения с нуля. Это отличная практика для начинающих разработчиков, создание такого приложения даст вам отличный опыт владения HTML и CSS, ведь…

Онлайн1 занятий
Видеоуроки
Бесплатно