Привязка состояния и React-Redux

Мы нашли удобный способ подключать компоненты к хранилищу, передаваемому через контекст, через connected-компоненты. Теперь мы можем обобщить этот процесс, создав универсальный настраиваемый коннектор. Заодно избавимся от перерендера целого приложения. Доработаем метод dispatch, чтобы он умел работать с асинхронными экшенами. В итоге получим более аккуратный код.

  • 00:00:45 Проблема копирования кода
  • 00:01:24 Мэппинг состояния state в props
  • 00:02:41 Привязка dispatch к props
  • 00:03:17 Прокидывание оригинальных props
  • 00:03:53 Написание универсального коннектора
  • 00:06:08 Создание фабрики connect
  • 00:08:36 Добавление mapDispatchToProps
  • 00:11:19 Композиция функций одного аргумента
  • 00:14:50 Преобразование в фабрику
  • 00:16:59 Перерендер компонентов вместо приложения
  • 00:20:40 Классовые компоненты React
  • 00:22:29 События жизненного цикла
  • 00:23:40 Миграция на классовый компонент
  • 00:26:17 Подписка на изменение состояния
  • 00:28:04 Контекст выполнения функции
  • 00:35:13 Обзор результата
  • 00:36:00 Подключение React-Redux
  • 00:39:10 Оптимизация записи экшенов
  • 00:42:10 Поддержка асинхронных экшенов
  • 00:44:40 Написание middleware для dispatch
  • 00:47:22 Подключение Redux-Thunk
  • 00:48:34 Обзор результата
  • 00:49:57 Использование extra-аргументов

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

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (10)
Александр Кулик

Спасибо

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

Дмитрий, спасибо за очень познавательное видео. Но вопрос все равно у меня маячит - нужно ли использовать классы в принципе. Да и Редакс. Сразу оговорюсь что я только в процессе освоения Реакта, но вот что пишут в его блоге:

"Мы предполагаем, что хуки охватят все существующие варианты использования классов, но в обозримом будущем мы продолжим поддерживать компоненты класса. В Facebook у нас есть десятки тысяч компонентов, написанных как классы, и мы не планируем их переписывать. Вместо этого мы начинаем использовать хуки в новом коде бок о бок с классами."

"Вопрос: Должен ли я использовать хуки, классы или их комбинацию? Ответ: Когда вы будете готовы, мы рекомендуем вам попробовать хуки в новых компонентах, которые вы пишете."

"Вопрос: Охватывают ли хуки все варианты использования классов? Ответ: Наша цель состоит в том, чтобы хуки как можно скорее охватили все варианты использования классов. Пока нет эквивалентов хуков для необычных жизненных циклов getSnapshotBeforeUpdate, getDerivedStateFromError и componentDidCatch, но мы планируем добавить их в ближайшее время."

Ну и судя по всему useState + useReducer + другие хуки позволяют вообще отказаться от использования Редакса (если я все правильно понял из доков и демок).

Или я не правильно понял?

Ответить
Evgeniy

Все хорошо в меру. REDUX удобен для работы с глобальными вещами. Но обрабатывать им те же формы - это ужасная практика - для этого очень удобно использовать локальные стейты - и тут useState отлично подойдет с привязкой к тому же Formik. Совсем без классовых компонентов тоже вряд ли получится. Но их должно быть не более 1% от всех компонентов. Пока в полной мере эффекты не заменяют жизненный цикл классового компонента.

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

Как раз далее сравним оба подхода с хуками и локальным состоянием и без них. А также комбинации.

А так да, зависит от желаний. Либо имеем отдельную модель данных в глобальном хранилище и компоненты оставляем более-менее чистыми, либо эти данные и код помещаем в сами компоненты и передаём через пропсы и контексты. Вариантов много.

Ответить
Arunas

Спасибо.

Ответить
Aёct'ann

Боже, сколько же заморочек в JS...Но благодаря Дмитрию теперь понятно, как это все работает )

Ответить
Сергей

Слишком быстрая подача материала. На 0.75 зажевывает. Вечером после работы сложно воспринимать такую скорость.. Добавьте скорость 0.9 в плеер пожалуйста

Ответить
Игорь

Финальная версия функции connect (версия с классом, перед самым подключением redux) получилось немного забагованной. В консоль вываливается ошибка "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method."

И кнопки favorite/unfavorite отрабатывают через раз.

А так все супер, конечно :)

Ответить
slo_nik

Добрый вечер, Дмитрий.

При таком подключении thunk

const thunk = ReduxThunk.default

возникает ошибка

Uncaught TypeError: middleware is not a function

Если подключить так

const thunk = ReduxThunk

ошибка не возникае, всё работает.

Ответить
Анна

Спасибо большое вам, Дмитрий, за бесценный материал!! Надеюсь, дождусь мастер-класса по Vue когда-нибудь)

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

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

Yandex
MailRu
GitHub
Google