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

Продолжаем путь к совершенству нашего приложения. Сегодня решим проблему каскадной передачи состояния и экшенов в виде 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

Спасибо.

Ответить
Александр Кулик

Супер.

Ответить
Денис

Спасибо

Ответить
Андрей

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

Ответить
Максим

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

Ответить
Дмитрий Елисеев

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

Ответить
kashamamina

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

Ответить
Дмитрий Елисеев

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

Ответить
S.Polessky

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

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

Ответить
Дмитрий Елисеев

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

Ответить
S.Polessky

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

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

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

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

Ответить
Дмитрий Елисеев

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

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

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

Yandex
MailRu
GitHub
Google