БлогВойти

Курс React + Redux

Учимся использовать Redux для создания и управления глобальным состоянием в приложениях React.

Получить курс

Обзор курса React + Redux

  • Курс React + Redux предназначен для начинающих разработчиков, которые уже имеют базовые знания библиотеки React.
  • В этом курсе мы с нуля создадим небольшое приложение, которое позволяет ставить "лайки", а также создавать, редактировать и удалять комментарии.
  • Все наши данные будут храниться в глобальном состоянии Redux.
  • Изменение любых данных происходит только в состоянии Redux. Это позволяет быстро обновлять только те компоненты, которые отображают измененные данные.

Что мы будем создавать?

Список видео-уроков

  • 1. Наш проект
    02:26
  • 2. Структура проекта и установка Redux
    02:38
  • Подключаем Redux с помощью connect()
    3. Создаем первый компонент Likes
    04:07
  • 4. Используем функцию connect
    03:21
  • 5. Создаем хранилище Redux
    03:12
  • 6. Получаем данные из хранилища Redux
    03:59
  • 7. Создаем первый action
    04:00
  • 8. Создаем первый reducer
    02:46
  • 9. Проверяем компонент Likes
    02:59
  • 10. Пишем логику decrement likes
    02:28
  • Рефакторим структуру Redux
    11. Обновляем структуру Redux 1
    04:13
  • 12. Обновляем структуру Redux 2
    03:48
  • 13. Обновляем структуру Redux 3
    03:12
  • 14. Обновляем структуру actions
    03:38
  • 15. Завершаем рефакторинг
    01:33
  • Подключаем Redux с помощью Хуков
    16. Компонент Title
    02:33
  • 17. Компонент Title (action и reducer)
    03:22
  • 18. Используем хуки useDispatch и useSelector
    01:27
  • 19. Создаем input reducer
    02:43
  • 20. Отображаем значение поля input
    51
  • Компонент Comments
    21. Создаем компонент Comments
    04:20
  • 22. Локальное состояние Comments
    03:46
  • 23. Создаем reducer и action
    05:05
  • 24. Добавляем комментарии в Redux state
    06:27
  • 25. Отображаем каждый комментарий
    04:59
  • 26. Редактирование комментариев
    07:47
  • 27. Тестируем код и начинаем работу с удалением
    05:08
  • 28. Пишем логику удаления в Redux
    02:53
  • Добавляем Redux middleware
    29. Thunk Middleware и Redux Dev Tools
    03:29
  • Используем внешний API
    30. Получаем комментарии из внешнего API
    07:32
  • 31. Пишем логику Loader в Redux
    07:43
  • 32. Отображаем Loader при загрузке данных
    57
  • 33. Используем Redux Dev Tools
    01:00
  • 34. Обработка ошибок
    07:04
  • 35. Отображаем сообщение об ошибке
    01:33
  • Пишем свой Middleware
    36. Пишем спам фильтр
    07:21

    • Зачем нужен Redux?

    Redux на сегодняшний день является самой популярной библиотекой для управления состоянием в приложениях React. Более того, практически любая коммерческая разработка на React сегодня использует именно Redux.

    Глобальное хранилище данных

    Как правило коммерческие приложения содержат большое количество компонентов, которые отображают различные данные (сущности) на различных страницах.

    Очень часто компоненты не связаны друг с другом напрямую, что затрудняет их взаимодействие. Глобальный объект state в Redux позволяет централизованно хранить данные, которые могут использоваться любыми компонентами приложения.

    Например, какой-то компонент может обратиться к состоянию Redux, чтобы узнать есть ли товары в компоненте “корзина”. В этом случае нет необходимости взаимодействовать с компонентом “корзина” напрямую.

    Изменение данных Redux

    Для изменения каких-либо данных в глобальном состоянии Redux используются, так называемые, объекты экшены (actions). По сути они являются единственными источниками информации для хранилища Redux.

    После доставки данных в хранилище Redux, они обрабатываются с помощью так называемых редьюсеров. Результат работы редьюсера - новый объект состояния, который создается на основе информации из “экшена”.

    Таким образом, Redux централизует работу с данными, что существенно упрощает разработку и отладку приложения.

    Научись управлять данными в React приложениях с помощью Redux!

    Оформить Бесплатно
    Доступ к материалам курса после регистрации!
    0 ₽
    Оформить