Привязка состояния и 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
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Спасибо
Дмитрий, спасибо за очень познавательное видео. Но вопрос все равно у меня маячит - нужно ли использовать классы в принципе. Да и Редакс. Сразу оговорюсь что я только в процессе освоения Реакта, но вот что пишут в его блоге:
"Мы предполагаем, что хуки охватят все существующие варианты использования классов, но в обозримом будущем мы продолжим поддерживать компоненты класса. В Facebook у нас есть десятки тысяч компонентов, написанных как классы, и мы не планируем их переписывать. Вместо этого мы начинаем использовать хуки в новом коде бок о бок с классами."
"Вопрос: Должен ли я использовать хуки, классы или их комбинацию? Ответ: Когда вы будете готовы, мы рекомендуем вам попробовать хуки в новых компонентах, которые вы пишете."
"Вопрос: Охватывают ли хуки все варианты использования классов? Ответ: Наша цель состоит в том, чтобы хуки как можно скорее охватили все варианты использования классов. Пока нет эквивалентов хуков для необычных жизненных циклов getSnapshotBeforeUpdate, getDerivedStateFromError и componentDidCatch, но мы планируем добавить их в ближайшее время."
Ну и судя по всему useState + useReducer + другие хуки позволяют вообще отказаться от использования Редакса (если я все правильно понял из доков и демок).
Или я не правильно понял?
Все хорошо в меру. REDUX удобен для работы с глобальными вещами. Но обрабатывать им те же формы - это ужасная практика - для этого очень удобно использовать локальные стейты - и тут useState отлично подойдет с привязкой к тому же Formik. Совсем без классовых компонентов тоже вряд ли получится. Но их должно быть не более 1% от всех компонентов. Пока в полной мере эффекты не заменяют жизненный цикл классового компонента.
Как раз далее сравним оба подхода с хуками и локальным состоянием и без них. А также комбинации.
А так да, зависит от желаний. Либо имеем отдельную модель данных в глобальном хранилище и компоненты оставляем более-менее чистыми, либо эти данные и код помещаем в сами компоненты и передаём через пропсы и контексты. Вариантов много.
Спасибо.
Боже, сколько же заморочек в 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 отрабатывают через раз.
А так все супер, конечно :)
Добрый вечер, Дмитрий.
При таком подключении thunk
возникает ошибка
Если подключить так
ошибка не возникае, всё работает.
Спасибо большое вам, Дмитрий, за бесценный материал!! Надеюсь, дождусь мастер-класса по Vue когда-нибудь)
Или войти через: