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

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

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

Подробнее

Redux - самое популярное решение для управления глобальным состоянием React-приложений. Больше 10-ти лет разработчики отдают предпочтение Redux, и с каждым годом он становится всё более дружелюбным для использования. Курс "Redux для управления состоянием React-приложений" поможет разобраться с организацией кода, созданием глобального хранилища и управлением им. На курсе мы разберем разные подходы к Redux, которые можно встретить в индустрии. И, конечно, выполним несколько проектов для закрепления теории. *** ЧТО ВКЛЮЧЕНО В КУРС? *** 2 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты Базовые навыки по работе с Redux — понимание базовых сущностей и логики построения приложения Продвинутые навыки по работе с Redux — современные техники, позволяющие добиваться хороших результатов при меньшем количестве кода Асинхронная работа с Redux — в классическом подходе с использованием сторонней библиотеки и в более современном варианте Разбор разных вариантов структуры приложения — мы посмотрим как оно бывает и придем к одному из наиболее актуальных в индустрии подходов Публикация проектов онлайн — через популярный и бесплатный сервис Vercel   Почему это именно тот курс, который даст результат? Меня зовут Михаил Непомнящий и я профессиональный веб-разработчик. Я работаю с React каждый день и решаю с его помощью задачи самого разного уровня сложности. И Redux - один из сопутствующих инструментов. При этом я также профессиональный преподаватель и обучаю людей веб-разработке с 2016 года. В своих курсах я стараюсь подавать материал максимально доступно - от простого к сложному и без воды. Помню как самому трудно было поначалу пробираться через дебри Redux, когда только начинал изучать его, и в этом курсе постарался сделать подачу максимально понятной. В рамках курса мы сделаем 2 полноценных проекта, сосредоточившись именно на Redux-логике (базовая разметка и стили уже подготовлены). Таким образом, на практике мы будем последовательно закреплять те навыки и умения, которые были изучены.   РЕСУРСЫ КУРСА Упражнения по написанию кода — практикуйте самостоятельно, чтобы закреплять навыки. Всегда есть возможность посмотреть готовый ответ, плюс отдельное видео с его разбором. Я подготовил для вас материалы для скачивания к самым сложным блокам курса. Скачивайте код и используйте для самопроверки! Ответы на вопросы — спрашивайте сами и читайте ответы на вопросы других пользователей к урокам. Прокачивайте свои навыки!
Требования

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

  • Начальные требования:
  • 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-сторе
- Итоги курса

Организатор

Автор курса

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

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

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

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

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

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

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

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

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

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

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

Информация обновлена 3 сентября 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 мес.
React Native и Expo Router
React Native и Expo Router

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

Онлайн16 занятий
3 999 ₽
Комплект курсов «Frontend-разработка на React» и «Онлайн-курс по TypeScript»
−10%
Комплект курсов «Frontend-разработка на React» и «Онлайн-курс по TypeScript»

«Frontend-разработка на React»: Научишься создавать интерфейсы с помощью React: компоненты, JSX, состояние, события, маршрутизация. Поймёшь, как строить масштабируемые SPA и взаим…

ОнлайнНачальный
19 370 ₽−10%
17 430 ₽Рассрочка на 12 мес.
Начать без затрат

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