Контекст и контейнерные компоненты
Продолжаем путь к совершенству нашего приложения. Сегодня решим проблему каскадной передачи состояния и экшенов в виде 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 - Проблема дублирования кода
А в следующем эпизоде обобщим процесс подключения компонентов к состоянию, чтобы избавиться от копирования повторяющегося кода.
Скрытый контент
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Спасибо.
Супер.
Спасибо
Дмитрий, переносом своего сайта на реакт вы решили мою большую проблему выбора vue vs react!!! Контент однозначно крут и полезен. Можно уровень громкости повыше, слушаю с динамиков на ноуте на максимум.
Спасибо! Уровень звука действительно стоит прибавить. Возможно в новых сериях решится этот вопрос. На ноутбуке громкости не хватает.
Да, займёмся этим.
А как насчет того что теперь компонент Lots загрязнился, ведь теперь он обращается к компоненту LotConnected, который имеет побочные эффекты?
Да, от этого не уйти.
"Поэтому мы вынесли процедуры favorite/unfavorite в самый верх, чтобы их побочными эффектами не загромождать наши оригинальные функции Лота"
Имеется ввиду в самый верх вызова, функцию renderView?
Да, в самый верх цепочки вызовов.
30:09 - Вы предлагаете ввести функцию для вывода вариации логотипа в зависимости от дня/ночи.
У нас есть строка для определения времени суток в Clock(isDay - 1-я строка в Clock, 250-я строка в коде).
Для избежания DRY мы должны вынести эту функцию отдельно, т.к. будем использовать её в Logo(), Clock().
Вопрос: Куда мы поместим код функции определения времени(день/ночь) суток?
Просто вынесем в отдельную
function isDayрядом сfunction Logoиfunction Clock.Или войти через: