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

Stackdev

Обзор курса 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

Компонент 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 при загрузке данных

33. Используем Redux Dev Tools

01:00

34. Обработка ошибок

07:04

35. Отображаем сообщение об ошибке

01:33

Пишем свой Middleware

36. Пишем спам фильтр

07:21

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

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

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

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

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

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

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

Курс React + Redux

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

Что будет в курсе?

Список уроков

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

Доступ к Учебным Материалам

Получить Курс React + Redux