Контекст и контейнерные компоненты

Продолжаем путь к совершенству нашего приложения. Сегодня решим проблему каскадной передачи состояния и экшенов в виде props-ов через всё дерево компонентов. Напишем тесты и оценим сложность работы с хранилищем. Введём понятие презентационных и контейнерных компонентов. Перейдём на передачу состояния через контекст React.

  • 00:01:55 Разделение стейта
  • 00:03:57 Неудобство обилия аргументов
  • 00:05:31 Перенос состояния в компоненты
  • 00:09:46 Тесты с Mocha и Chai
  • 00:11:47 Тестирование React-компонентов
  • 00:17:38 Контейнерные и презентационные компоненты
  • 00:19:55 Контейнер для лотов
  • 00:23:43 Создание контекста
  • 00:24:52 Передача значения через Provider
  • 00:25:32 Получение значения через Consumer
  • 00:27:09 Обзор результата
  • 00:30:24 Проблема дублирования кода

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

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (12)
Arunas
2020-10-23 16:20

Спасибо.

Ответить
Александр Кулик
2020-10-24 10:07

Супер.

Ответить
Денис
2020-11-22 18:32

Спасибо

Ответить
Андрей
2020-12-16 11:20

Дмитрий, переносом своего сайта на реакт вы решили мою большую проблему выбора vue vs react!!! Контент однозначно крут и полезен. Можно уровень громкости повыше, слушаю с динамиков на ноуте на максимум.

Ответить
Максим
2021-02-16 22:02

Спасибо! Уровень звука действительно стоит прибавить. Возможно в новых сериях решится этот вопрос. На ноутбуке громкости не хватает.

Ответить
Дмитрий Елисеев
2021-03-01 07:58

Да, займёмся этим.

Ответить
kashamamina
2021-04-26 21:03

А как насчет того что теперь компонент Lots загрязнился, ведь теперь он обращается к компоненту LotConnected, который имеет побочные эффекты?

Ответить
Дмитрий Елисеев
2021-05-01 11:38

Да, от этого не уйти.

Ответить
S.Polessky
2021-08-06 08:45

"Поэтому мы вынесли процедуры favorite/unfavorite в самый верх, чтобы их побочными эффектами не загромождать наши оригинальные функции Лота"

Имеется ввиду в самый верх вызова, функцию renderView?

Ответить
Дмитрий Елисеев
2021-08-16 17:43

Да, в самый верх цепочки вызовов.

Ответить
S.Polessky
2021-08-07 11:16

30:09 - Вы предлагаете ввести функцию для вывода вариации логотипа в зависимости от дня/ночи.

У нас есть строка для определения времени суток в Clock(isDay - 1-я строка в Clock, 250-я строка в коде).

Для избежания DRY мы должны вынести эту функцию отдельно, т.к. будем использовать её в Logo(), Clock().

Вопрос: Куда мы поместим код функции определения времени(день/ночь) суток?

Ответить
Дмитрий Елисеев
2021-08-16 17:50

Просто вынесем в отдельную function isDay рядом с function Logo и function Clock.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Yandex
MailRu
GitHub
Google
© 2026 ООО «Деворкер» ИНН 7840083887