Скачать "69 - React JS - High Order Component (hoc)"

"videoThumbnail 69 - React JS - High Order Component (hoc)

METATECH - Videos

METATECH - Videos

Канал: METATECH

Курс React Native. Пишем Мобильное Приложение на JavaScript

Курс React Native. Пишем Мобильное Приложение на JavaScript

Канал: Владилен Минин

Ландшафтный дизайн. Обучение. Занятие 6. Почва.

Ландшафтный дизайн. Обучение. Занятие 6. Почва.

Канал: Светлана Сотникова

🔴 Let’s build META Messenger 2.0 with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

🔴 Let’s build META Messenger 2.0 with Next.js 13 (Upstash, TypeScript, Redis, Tailwind, NextAuth)

Канал: Sonny Sangha

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

💥 Полный курс JavaScript 2022 за 5 часов [ JavaScript / Ecmascript / React / TypeScript ]

Канал: RED Group

Уроки React JS с нуля / #11 – Заключительный урок

Уроки React JS с нуля / #11 – Заключительный урок

Канал: Школа itProger / Программирование

Узнаём погоду в любой точке мира с помощью PYTHON🐍

Узнаём погоду в любой точке мира с помощью PYTHON🐍

Канал: Neor Blog IT

javascript

программирование

уроки

с

нуля

обучение

js

react

react js

reactjs

react курс

react практика

react пример

redux

курсы

инкубатор

минск

online

бесплатно

hoc

high order component

highordercomponent

компонентвысшегопорядка

практика

примеры

курс

00:00:01

[музыка]

00:00:07

привет друзья привет сам рай и тикако и

00:00:10

потертые кресла

00:00:11

димыч и нужно потертые кресла новая

00:00:13

поэтому переходите на сайт сошел it

00:00:16

works ему роджерс ком поддержите мой

00:00:18

проект каким-нибудь донатом спасибо а мы

00:00:22

сегодня разбираем с вами супер мега

00:00:23

важнейшую тему компоненты высшего

00:00:25

порядка хай ордер компонент настоящий

00:00:28

самурай

00:00:29

реактор должен хай ордер компонентов не

00:00:31

бояться хай ордер компонент компонент

00:00:35

высшего порядка кажется что это

00:00:37

компонент но самом деле тут есть

00:00:39

небольшой подвох

00:00:40

ордер компонент хок это просто функция

00:00:42

это просто функции друзья хок это просто

00:00:45

функция которая принимает на входе

00:00:47

компонент а возвращает другой компонент

00:00:50

этот other компонент я бы лучше

00:00:53

передавал в контейнер компонент тайда

00:00:57

смысл контейнер на я компоненты помним

00:00:59

какой снабдить презентационной

00:01:01

у-компоненту какой-то суперспособностью

00:01:04

то есть контейнерная компания берет на

00:01:06

себя какую-то суперспособность грязное

00:01:07

дело какой-то там асинхронный запрос

00:01:10

доставании стоит и справа псов и zur

00:01:12

lage куда доставания

00:01:13

вот задача как ядерные компоненты

00:01:15

какое-то поведение или какие-то данные

00:01:17

дать целевой презентационной компоненте

00:01:19

и вот high or dare компонент эта функция

00:01:22

которая позволяет нам клепать эти

00:01:24

контейнерные компоненты однообразные

00:01:26

канта нервные компоненты которые делают

00:01:27

одно и то же но закидывая в них

00:01:30

кавказские целевой компонент и разные

00:01:32

компоненты понимаете чем фишечка очень

00:01:36

как бы на самом деле простая идея очень

00:01:38

простая но прежде чем мы приступим

00:01:39

практике немножко час поиграем смотрите

00:01:43

это поймешь какой компонент компонент

00:01:45

это функция которая принимает пропсы

00:01:48

возвращает джей секс и давать немножко

00:01:50

поиграем то есть как у нас одной стороны

00:01:52

исход который принимает компоненты

00:01:54

возвращает контейнерную компоненту

00:01:58

доход не является компонентом

00:02:01

компонент это если это функция то

00:02:03

компонент это функция которая принимает

00:02:05

пропсы возвращает джесси кс-е же

00:02:07

возвращается контейнер на я компонента

00:02:08

давайте поиграем попробуем сообразить в

00:02:10

чем разница смотрите это что у нас

00:02:13

что-то на стрелочку это у нас y x это

00:02:19

что у нас компонента или хог знак на что

00:02:21

эта функция больше похоже мы такие

00:02:23

конечно чувак здесь мы возвращаем джесс

00:02:26

x значит а скорее всего компонента окей

00:02:29

поехали дальше а это что такое чувак

00:02:33

здесь мы уже возвращаем компоненту это

00:02:36

уже больше похоже на ход а это что такое

00:02:39

это задумались а давайте проанализируем

00:02:45

здесь мы действительно возвращаем джей

00:02:47

секс это действительно компоненты

00:02:50

которые условно называется юзер

00:02:51

компоненты возвращаете джей секс что мы

00:02:53

возвращаем здесь друзья мы здесь

00:02:56

возвращаем не компоненту мы здесь

00:02:57

возвращаем тоже gsx gsx просто здесь же

00:03:01

секс возвращал обычные элементы здесь же

00:03:04

sx отрисовку отрисовывает компоненту

00:03:07

понимаете какая фишка то здесь

00:03:09

возвращается gsx gsx буквально визуально

00:03:12

что это это html java скрипте да то что

00:03:15

видят наши глаза и мы видим что эта

00:03:17

функция возвращает html из java script а

00:03:20

то бишь возвращают gsx и здесь

00:03:21

возвращается джей секс соответственно

00:03:24

это комп компонента да мы можем назвать

00:03:26

контейнерные компонентные потому что она

00:03:28

по сути как бы возвращает другую когда

00:03:29

нервную компоненту эти ничего не делает

00:03:31

кроме как снабжают ее какими-то

00:03:33

суперспособностями для него какую-то

00:03:34

данное и в реальной жизни то бла

00:03:37

свойство было могла взяться и стэйта

00:03:40

могла взяться из орла и так далее то

00:03:42

есть понимаем как а вот это вот смотрите

00:03:45

так мы знаем что юзер так компонента в

00:03:48

данном случае юзер компонента вот и мы

00:03:51

возвращаем компоненту то есть наша

00:03:53

функция z z z принимает что-то и

00:03:55

возвращает юзер компоненту это уже

00:03:57

больше похоже на ход потому что хок

00:04:00

возвращаемся хак принимаете компоненту и

00:04:03

возвращает компоненту до контейнерную

00:04:04

компоненту и вот это уже больше похоже

00:04:06

на правду с это больше похоже на правду

00:04:09

правда здесь надо было бы вернуть юзер

00:04:12

контейнер компоненту и было бы тогда

00:04:14

вообще будет давайте я щас перепишу

00:04:15

слайде что было понятно юзер контейнер

00:04:18

ну комплект контейнер тогда это вообще

00:04:20

огонь да прям вот прям вот на хог похоже

00:04:22

прямо прямо очень похоже вопроса что на

00:04:25

входе приходит в качестве битва xxx а

00:04:27

что на входе приходит давайте посмотрим

00:04:30

тут про пса не приходится наш как мы

00:04:32

поняли сами что доход здесь у нас юзер

00:04:35

контейнер контейнер на компонента а на

00:04:41

входе к нам приходит компоненты должна

00:04:43

приходить компоненты и мы должны

00:04:45

возвращать другую компоненты user can

00:04:48

they use

00:04:49

контейнер компонент на вход нам приходит

00:04:52

какая-то компонента я хок на входе могу

00:04:54

получить любую компоненту но для нее

00:04:56

лежит верну контейнерную компоненту

00:04:57

сейчас я возвращаю кабернюка монету не

00:05:00

для нее возвращаю когда нервную

00:05:02

компоненту для компоненты юзер а вдруг

00:05:04

не на входе придет не юзер если придет

00:05:06

юзер круто а если придет например

00:05:07

компонента там profile то мы стоим вам

00:05:11

мы вернем юзер контейнерные компоненты

00:05:13

для профайла то есть мы даже профиль не

00:05:15

увидим и увидим эту компоненту юзеров

00:05:18

который прошло было не то что нам надо

00:05:20

соответственно соответственно

00:05:22

соответственно мы должны контейнерную

00:05:25

компонента как мы можем подобрать

00:05:26

правильную контейнер ну компоненту

00:05:28

стычки сам что или сделать и что там под

00:05:30

каждый случай создавать свою

00:05:31

контейнерную компоненты подскажет

00:05:33

случится за свою контейнер ную

00:05:34

компоненту которая будет потом там

00:05:36

как-то выбираться нет мышь задача хёка

00:05:38

создавать контейнерные компоненты

00:05:40

создавать динамические в момент вызова

00:05:42

хёка мы должны контейнерные компонент это

00:05:44

создать внутри вот здесь вот и не для

00:05:47

юзера а для любого случая которых нам

00:05:49

придет внутри компоненты смотрите вот

00:05:52

так мы не можем даже сделать это это

00:05:54

вообще джексон возвращаемся тоже даже не

00:05:56

хёка это уже компоненты

00:05:57

а мы тоже сами сделать вот так вот кто

00:05:59

то возвращает хёк и дает нам компоненту

00:06:01

говорит эй чувак создание контейнер

00:06:04

компоненту и до ее обратно и мы внутри

00:06:06

себя создаем

00:06:07

дневную компоненту виде прям пишем

00:06:09

компании поэтому важно здесь компонент

00:06:11

на писать с большой буквы мы создаем

00:06:14

контролирую компоненту

00:06:16

функциональную либо классовую какую

00:06:18

угодно как получится как как как нужно

00:06:21

от задачи и возвращаем вот эту rapid

00:06:23

контейнер если хок вызовется пять раз с

00:06:26

пятью разными компонентами на входе мы

00:06:27

создадим внутри хёка каждый раз по

00:06:30

отдельные контейнеры и компоненте и

00:06:33

вернем ее наружу где его могут взять

00:06:34

рисовать вот такая вот нехитрая логика

00:06:37

ребята давайте по посмотрим на уже нашу

00:06:40

задачу в котором столкнулись на прошлом

00:06:42

занятии контейнеры компоненты они могут

00:06:45

себе содержать действие которое можно

00:06:46

переиспользовать в разных компонентах то

00:06:48

есть у нас есть разные компоненты какая

00:06:50

вот фишечка просто просто вы просто

00:06:52

вообще просто идеально вообще это просто

00:06:54

это просто волшебно но здесь компоненты

00:06:57

компонентом и час redirect поговорим про

00:06:59

redirect с вами мы когда попадаем на

00:07:01

страничку там пытаемся попасть на

00:07:02

страничку профайла либо страничку

00:07:04

диалога у нас происходит вы давайте напомню вот

00:07:07

этот вот redirect мы уводим со странички

00:07:10

если пользователь не авторизован вводим

00:07:13

такая же у нас тема написано в диалог

00:07:15

компоненте диалог компонента

00:07:18

сейчас я сейчас внутри наверное здесь

00:07:23

вот внутри пик абонента мы сделали то

00:07:26

есть внутри такая строчка написано и нам

00:07:28

повезло что эта строчка маленькой но все

00:07:30

равно нам приходится во-первых эту

00:07:31

строчку писать во вторых нам приходится

00:07:34

в каждую компоненту прокидывать который

00:07:35

мы хотим защитить который мы хотим

00:07:37

защитить нам приходится писать

00:07:39

передавать вот этот вот es aus доставать

00:07:42

его и стэйта чтобы наша логика могла

00:07:45

посмотреть на es aus и сделать redirect

00:07:48

если нужно то есть идея какая ребята у

00:07:51

нас дублирование логике дублирование

00:07:53

кода это грех номер один за которой о

00:07:55

котором даже хули варить нельзя

00:07:57

дублирования кода это всегда грех это то

00:07:59

истина которая истинно вам говорю что

00:08:01

есть вещь архитектурной где

00:08:02

или так или так зависит от ситуации то

00:08:05

дублирование под это грех всегда на всех

00:08:07

языках программирования везде

00:08:08

дублирование кода дублирует и

00:08:10

кадир оторвать тебе руку ты больше не

00:08:12

самурай так вот мы не хотим дублировать

00:08:14

код поэтому смотрите у нас есть

00:08:16

на компоненты в которой есть какой-то

00:08:17

код дублирующиеся дублирующиеся в другой

00:08:20

компоненте

00:08:21

и наша задача вынести это это

00:08:24

дублирование дублирующую логику вы

00:08:26

контейнерную компоненты то есть обернуть

00:08:28

нашу эту компоненту и эту компоненту

00:08:32

обернуть конвейерной компонентой и

00:08:35

вынести из этого дублирующую си логику в

00:08:37

контейнер ную компоненту вот это вот

00:08:41

redirect впуска делает контейнерные

00:08:43

компоненты и вы скажете ну чё все равно

00:08:45

мы дублируем логику до дублируем но у

00:08:47

нас-то может быть хок создан задача хёка

00:08:50

принять на входе компоненту условно

00:08:52

играют в зелененькой давайте другой

00:08:55

стрелкой на резцы условно говоря принять

00:08:57

ай-ай-ай-ай промахнулся условно говоря

00:09:00

принять на входе 1 и у-компонент у

00:09:01

задача хёка принять на входе на входе

00:09:05

одну компоненту простите затупил

00:09:09

немножко принять на входе одну

00:09:11

компоненту вот эта зеленая а вернуть для

00:09:16

нее специальную контейнерную компоненту

00:09:19

с этим специальным поведением и если мы

00:09:23

этому же коку отдадим другую зеленую

00:09:25

компоненту другой ядрышко который ведет

00:09:28

себя иначе the fog вернет контейнер на

00:09:31

компоненту для этой зеленого ядрышко эту

00:09:33

красную компоненту но идея этих всех

00:09:35

красных компонент будет такая что они

00:09:37

все будут одинаковые потому что их эти

00:09:38

компоненты родил вот этот хак и он всех

00:09:41

их наделил этим поведением дублирующиеся

00:09:43

поведением и вот 90 дублирующие

00:09:45

поведение в одном месте в одном всего

00:09:47

лишь вместе понятно вам непонятно этот

00:09:50

скриншот есть всего сюда опять закину и погнали

00:09:53

бомбить с вами кот давайте подбить в

00:09:55

самих вот давайте как тема какая надо

00:09:58

вот это вот логику вообще-то вынести из

00:10:00

самой компоненты сама компонента не

00:10:02

должна обладать этим responsibility

00:10:04

redirect а потому что если компонента

00:10:05

делать что-то одно она должна делать

00:10:07

что-то другое то что мы хотим

00:10:09

переиспользовать разных местах амита

00:10:10

вытащить из компоненты до согласно вот

00:10:12

этом вот нам до вытащить из компонента

00:10:14

вытащить наружу давайте создадим такую

00:10:16

контейнерную компоненту на которую мы

00:10:19

перенаправим вот этого действия мы

00:10:21

создаем классов и классовой campo

00:10:23

интернате функционально сделаем

00:10:25

функционале компании the light например

00:10:27

redirect redirect компонент компонент

00:10:32

дайте aus redirect компонент это

00:10:35

компонента

00:10:36

которая принимает props тогда контейнер

00:10:39

на я компонента не обязательно классовой

00:10:41

компоненты контейнер на компонента

00:10:43

не обязательно от презентационный

00:10:45

компоненты контейнер на компонента

00:10:46

защищена от какой-то другой компонент и

00:10:48

чутко поведаю если функциональные

00:10:50

компоненты и могучий задач я останусь

00:10:51

функциональные компоненты я вот

00:10:54

возвращаю возвращаю у себя яко по итогу

00:10:58

контейнер на компоненты над над над вот

00:11:01

этой

00:11:02

над profile контейнерами компонентой 1

00:11:04

компонента

00:11:05

на другой компонент и то есть я вернул

00:11:07

вам отрисованы адресованный profile

00:11:10

контейнер при этом важный момент все

00:11:12

пропсы которые пришли в меня яде

00:11:15

структуризацию так перекинув целевую

00:11:17

компонент что я всего лишь контейнер на

00:11:19

я компонентом не пропсы

00:11:20

как бы дают мне на самом деле не мне

00:11:22

целевой компоненте поэтому я протяну

00:11:24

дальше все я redirect ставлю сюда вот

00:11:26

это вот redirects ставлю сюда control x

00:11:29

вырезаю его отсюда и вставляю его друзья

00:11:34

сюда все то есть у нас вернется redirect

00:11:38

если мы не авторизованы и мы дальше

00:11:40

используем tools редиректом контейнерную

00:11:44

компоненту которую создали специально

00:11:45

для профайла ее используем дальше и

00:11:48

подключаем к роутером и дальше и к нефти

00:11:51

тоже так вот и используем подключаем к

00:11:53

раутеру не profile это контейнер на компоненту

00:11:56

которую вот эту компоненту который мы

00:11:58

над ней от вот этой вот построили и вот

00:12:01

и и прокидываем дальше ведь роутер все

00:12:04

аналогичную ситуацию делаем со второй

00:12:07

страничкой конструкция копирую это

00:12:09

диалог с контейнер и закидываю сюда

00:12:13

диалог контент закидываю сюда только

00:12:15

здесь уже будем рисовать

00:12:16

диалог с компоненту ой простите у нас

00:12:19

redirect был не здесь redirect был хотя

00:12:25

весёлки но redirect у нас был там в

00:12:27

диалоге час мы здесь рисуем dialogs а

00:12:29

вот здесь уже конекте мне dialogs а

00:12:32

контейнерную компонента у нас получается

00:12:35

вот такая штука да это называется

00:12:37

контейнер he'll have her high ордер

00:12:40

компонент hell wrapper hell когда он

00:12:42

wrapper овраг porn отврати роман борту

00:12:44

надо биркой у нас по фактически вот она

00:12:46

компонента целевая а мы над ней вы же

00:12:50

роутер мы над ней connect мы над ней

00:12:53

redirect наш и погнали данным к нашему я

00:12:55

дружку как бы а копали по итогу вот эти

00:12:58

контейнеры рисуют своего дочернего свою

00:13:01

как бы свою свое дитя рисуют и в

00:13:03

конечном итоге на рисуются наша целевая

00:13:06

компоненты но вот эти вот обертки

00:13:08

обертки обертки враг враг про прав но

00:13:10

так работают хай ордер компоненты это и

00:13:12

плохо и хорошо и так должно быть так

00:13:15

нормально поехали главное что каждый год

00:13:20

слой добавляет свое какое-то поведение

00:13:22

поведение как прям вот орешек или земля

00:13:25

у нас ядро и там всякие магмы лавы там я уже

00:13:28

не помню что давно учил в школе эту

00:13:30

штуку или там зёрнышко в орешек и там

00:13:32

всякая кожура от аммиака и каждый несет

00:13:35

свою пользу как то есть каждый что все

00:13:38

это имеет смысл и смотрите ка что у нас

00:13:40

profile компонента вот это вот про fame

00:13:43

компоненте aus redirect компонента

00:13:44

контейнер на и здесь в прав в диалог с

00:13:47

компанией они идентичны

00:13:48

кроме целевой компонент и здесь дай лакс

00:13:52

а здесь profile контейнер мы понимаем да

00:13:55

что мы что мы сами делаем мы с вами

00:13:56

создаём эти красные компоненты

00:13:58

идентичные по поведению но

00:14:00

отрисовываются и разные зеленые ядрышки

00:14:02

соответственно надо создать хок функцию

00:14:05

которые будут этим заниматься созданием

00:14:06

этих целевых компонент с разным ядрышком

00:14:09

да как на презентации как мы придаем ему

00:14:12

целевую компоненту

00:14:13

она создает для той целевой компании

00:14:14

ин-т обертку wrapper контейнер ную

00:14:17

компоненту и возвращает этот wrapper эту

00:14:19

обертку наружу поехали задаем в проекте

00:14:24

папку специальную назовем его хак хак я

00:14:27

он я уже создал я убью же создал и

00:14:30

создаю в этом в этой папке даже не

00:14:35

удалил даже не удалил создаю в этой

00:14:38

папке aus redirect aus redirect

00:14:42

компоненты точнее как я называю и общих

00:14:43

у es aus redirect давайте переименуем

00:14:46

здесь ю ри фактор редмэйн вы из пусть

00:14:52

aus redirect компоненту называет создаю

00:14:54

внутри функцию которая будет принимать

00:14:57

на входе компоненту с большой буквы

00:14:59

потому что нам-то компоненты надо

00:15:00

отрисовать будет у джей сексе создаю

00:15:04

внутри класс

00:15:05

данный пример класс или функциональную

00:15:07

компоненту да я тогда задавал класс

00:15:09

можно класс создать неважно класс

00:15:12

называется redirect компонент условно

00:15:14

говоря и мы внутри

00:15:17

делают логику redirect и и

00:15:19

перерисовываем целевую компоненту

00:15:21

которую нам на входе сюда подадут

00:15:22

внимание нашу компоненту эту будут

00:15:25

вызывать с разных мест для разных

00:15:27

целевых компонентов и сюда каждый раз

00:15:29

придут разные целевая компоненты мы

00:15:30

создадим отдельный класс для каждой

00:15:32

целевой компонент и отдельный класс

00:15:34

обертку и мы по итогу будем возвращать

00:15:36

свою контролирую компоненту для каждой

00:15:39

целевой

00:15:40

как бы презентационные компоненты все у

00:15:42

нас есть такая функция которые мы можем

00:15:43

экспортировать и можем использовать в

00:15:45

коде где хотим например в profile там

00:15:48

пока компоненте без того чтобы создавать

00:15:50

эту контейнерную компоненту вручную мы

00:15:53

ее создадим мысли с помощью хобота мне

00:15:57

так вручную будем определять вот это вот

00:16:00

этот класс с поведением наставление одна

00:16:02

строчка всего поэтому это просто

00:16:04

продублировать как бы нам кажется

00:16:05

дублирование кода не так уж страшно но

00:16:06

если поведение больше вы там сдал же

00:16:08

начинается поэтому мы будем задавать вот

00:16:11

эту компоненту с помощью

00:16:12

хёка то чтобы понимали хок по итогу нам

00:16:15

вот он хук alt-enter insert мы вход

00:16:18

передаем вот нашу целевую компоненту и

00:16:20

внутри хёка создается вот этот

00:16:24

вот функция но только у нас внутри хука

00:16:25

класс создают классовое компонента но

00:16:27

неважно создается вот это вот

00:16:28

функциональные компоненты или классовое

00:16:30

возвращается к нам наружу

00:16:32

вы можете делать ход у es aus redirect у

00:16:36

нас есть у этой компании есть мы больше

00:16:37

не дублируем эту логику вы просто

00:16:40

вызвали как с нужным параметрам передав

00:16:43

ему нужную целевую компоненту

00:16:44

аналогичная ситуация масс в диалог с

00:16:48

контейнере мы больше не создаем вот это

00:16:51

вот вот это вот компоненты вручную не

00:16:53

дублируют этот код то что по сути в коде

00:16:55

меняется так вот это вот целевая

00:16:56

компонента мы доверим это создание коку

00:16:59

в aws 3 директ и передадим в качестве

00:17:03

целевой компонент и в этом случае уже

00:17:04

диалог уже диалог ребят ситуация уже

00:17:11

такая была у вас ничего нового если кто

00:17:15

повнимательнее тот помни что у нас есть

00:17:17

уже два хука мы уже пользовались друзья

00:17:19

хуками добро пожаловать в мир хаков в из

00:17:21

роутер мы вызываем без роутер передаем

00:17:24

целевую компоненту users и нам без

00:17:27

роутер возвращает другую компоненту

00:17:29

контейнерную оберт обертка над этим

00:17:32

юзерам который из рода достает то что

00:17:34

нужно и мы пользовались сами уже коньяк

00:17:37

там тут немножко сложнее вызов два

00:17:39

вызова но по факту канаде для считаете

00:17:41

хог райдер компания принимает на входе

00:17:43

users то есть на входе может визерс

00:17:45

прядь может чего угодно домашка на ким

00:17:47

разные компоненты и для этой разные

00:17:49

каждой компоненты создается своя

00:17:51

контейнер для компонента

00:17:52

который достает то что нужно я из тора и

00:17:55

засовывает вашу компоненту дает нашей

00:17:57

компании титу самое сверх

00:17:58

сверхспособности вот такие друзья дела

00:18:02

давайте сохраним и проверим что у нас

00:18:04

ничего не сломалось на users мы попадаем

00:18:07

на мысе джез не попадаем просит нас

00:18:08

залогиниться важный момент да вы должны

00:18:11

была быть выложены в соцсети выводить

00:18:13

слушал и товар . самурай дайджест точка

00:18:15

ком вы лаги ними да я напомню чтобы вот

00:18:17

только бы redirect эти происходили в то

00:18:18

что мы не должны быть залогинены потому

00:18:20

что напомню мы шлём my запрос на старте

00:18:22

ими запросам возвращает да либо нет

00:18:25

залогинены либо нет ну смотрите

00:18:27

предыдущие выпуски если забыли так

00:18:31

уже круто но немножко еще хочется

00:18:34

доработать наш кок сложно может быть но

00:18:37

ничего страшного доработаем наш кок что

00:18:39

именно мне не нравится нашем пути то что

00:18:41

нашему коку чтобы он мог работать вы из

00:18:44

а у среди лет по 1 почему называется в

00:18:46

aws redirect потому что connect

00:18:48

называется иначе но у нас к уху из

00:18:50

раутер кокичи зачастую хёке зачастую

00:18:54

дают какие-то пропсы вообще это кипр

00:18:56

обсе или поведения или прокси

00:18:59

какие даже компонента как бы вот она

00:19:00

была без этого а теперь нам из теперь у

00:19:03

нас с этим то есть у нее что-то

00:19:04

появляется например у из-за роутер

00:19:06

роутер у нее появляется условно говоря и

00:19:07

так далее то же самое друзья здесь есть

00:19:12

наша компонента диалог теперь стало быть

00:19:14

aus redirects и аутентификационные

00:19:16

редиректом вот такой вот название и

00:19:18

вообще очень часто принято холке

00:19:20

называть с и приставкой вы

00:19:22

но с первым словом быть сюрприз так что

00:19:26

мне нравится что наш хук компоненты

00:19:29

которые модель она

00:19:30

рассчитывать на то что в пробках придет

00:19:31

es aus и нам надо не забывать

00:19:34

обязательно в map стоит и проб site is a

00:19:36

us прокидывать если мы его не протянем

00:19:39

то нашу is a us to redirect будет

00:19:40

работать некорректно нам надо не

00:19:42

забывать не забывать прокидывать ю а я

00:19:45

хочу забывать

00:19:46

я хочу не думать об этом я хочу просто

00:19:48

как бы es aus redirect чтобы это

00:19:51

прокиды вание было там внутри и нюанс

00:19:56

если как бы типа блин я бы внутри

00:19:57

добавил но но можно дать помимо и sauce

00:20:00

еще добавляют эту вот штуку а в profile

00:20:02

компоненте вот эту вот штуку то есть

00:20:06

типа разные вещи немножко разные вещи и

00:20:09

как быть так быть как бы как быть а

00:20:12

может быть мы закончим наши компоненты

00:20:16

дважды можно так делать а почему бы и

00:20:19

нет в чем-то смотрите что это означает

00:20:21

что у нас есть

00:20:23

у нас есть top у нас есть тор и мы из

00:20:27

торы можем что-то взять вот наша

00:20:29

компонента ей уже четыре стороны и мы ее

00:20:32

к нефти

00:20:33

раз и этот контейнер компонента взяла из

00:20:36

тора то что ей нужно а если он уже что

00:20:40

история еще раз например мы хотим

00:20:41

разделить это взятие данных то мы можем

00:20:43

еще раз обернуть коннектом и взять из

00:20:46

тора то что нужно как бы вторым этим

00:20:48

вторым разом то есть ничего страшного

00:20:50

абсолютно что страшно давайте и to

00:20:52

connect with это двойной connect здесь

00:20:54

сейчас сделаем вот здесь а потом вынесем

00:20:56

нашу в наш хук вот этим обстоит опрос

00:20:59

давайте сделаем два map стоит эту проб

00:21:02

sa1 обстоит и props условно говоря для

00:21:05

редиректом обстоит и props redirect форе

00:21:09

директ напишу ффу redirect и оставлю

00:21:12

здесь только es aus я ставлю здесь

00:21:15

только es aus 2 map стоит у props 2 2 м

00:21:19

обстоит и проб и удалю из него es aus

00:21:23

соответственно наш основной connect он у

00:21:25

нас подключает только он у нас

00:21:30

map стоит у про вскоре директ он у нас

00:21:34

только данный из профиля берёт основной

00:21:37

наш connect а мы еще еще раза коннектим

00:21:40

еще раз за коннектим выглядит конечно

00:21:44

громоздкая жутко но пока ничего страшно

00:21:46

мыслящим занятий разберем с вами

00:21:48

классную фичу и это будет украсивший

00:21:50

гораздо и мы еще раз закона эти перед

00:21:53

тем как они хоть основной connect мы

00:21:55

нашу вы es aus redirect вот здесь за

00:21:58

коннектим смотрите возьмете лет заменяет

00:22:01

скажем aus redirect 2 тип то же самое

00:22:05

название переменной будем использовать

00:22:07

но уже для законченного этого варианта

00:22:09

то есть сюда передадим будет map стоит

00:22:11

вопрос его вынесу выше вот этот map

00:22:16

стоит у props

00:22:18

и передам это же компоненту сюда ребята

00:22:25

реально да от от исхаков от из этих об

00:22:28

оборачивания тяжело но в этом смысл

00:22:33

будет легче поверьте мне попозже чей

00:22:35

будет легче соответственно могут так вот

00:22:37

с вами на создавали много много этих

00:22:39

хаков точнее хок один много этих

00:22:44

контейнерных компонентов созданный с

00:22:45

помощью фоков с помощью хай ордер

00:22:47

компонентов аналогично здесь сейчас

00:22:50

делаю до на другой строчки дойла с

00:22:52

контейнер давайте проверим что profile у

00:22:54

нас работает и все хорошо profile

00:22:56

работает и все хорошо вроде бы работает

00:23:00

до если мы залогинимся должно если мы

00:23:03

залогинимся то должно быть тоже все

00:23:06

хорошо не ситжес profile все работает

00:23:09

отлично влаги него и мся влаги него им

00:23:14

сядем сюда все redirect произошел

00:23:15

здорово супер то и смотрите все что надо

00:23:18

сделать внутри хоб листьях я предлагаю

00:23:21

вам вот это вот оборачивание сделать там

00:23:23

внутри внутри нашего кока чтобы вот ну

00:23:25

инкапсулировать эту логику вскрыть

00:23:27

детали скрыть детали там и давайте это и

00:23:30

сделаем весь возьму контру c еду наш

00:23:32

who's a us redirect то есть я вот здесь

00:23:34

создал класс создал компоненту канта

00:23:37

нервную компоненту которая занимается

00:23:39

редиректом и я ее ее же закончу сейчас у

00:23:43

меня есть redirect компонент а я скажу

00:23:46

что у меня есть connected канны

00:23:50

connected redirect компонент лет ко мне

00:23:54

эти три директ компонент вот moves to

00:23:56

это пропуск для него да я принципе эту

00:23:59

функцию могу вынести

00:24:00

и а этот объект могу вынести за пределы

00:24:01

функции потому что в принципе его

00:24:03

дублировать нет смысла ну можно и так

00:24:06

сделать и я конект конект вот эту

00:24:11

компоненту которую создал redirect

00:24:12

компоненту

00:24:13

внутри хёка я ее конёк чем к

00:24:17

я ее connect чука сторону все

00:24:21

и возвращаю наружу и и то есть формально

00:24:23

что происходит когда человек вызывает вы

00:24:25

es aus redirect мой хук самом деле он

00:24:28

получает 2 контейнер ные компоненты

00:24:30

ну 1 в 1 сначала считают эту контролирую

00:24:33

компоненту и и оборачиваю другой

00:24:35

контейнер на компоненты который хок этот

00:24:37

connect оборачивает и

00:24:39

и все хорошо есть еще один трюк как мы

00:24:43

можем это и начать делать но может быть

00:24:46

лечим выпуске мы это рассмотрим все т.е.

00:24:48

смотрите что вы

00:24:49

aus redirect все он connected которую

00:24:52

забирает это значение es aus пусть нам

00:24:54

больше нет необходимости в profile

00:24:56

контейнере в profile контейнере

00:24:58

доставать вот эту штуку то это все мы

00:25:01

коннекте вы south redirect а вот это на

00:25:03

больше не надо то что и вот здесь

00:25:04

изобретал все и нам не надо map стоит у

00:25:07

props прокидывать ничего аналогичная

00:25:10

ситуация в диалог с контейнере нам

00:25:12

больше не нужен es es aus мы вы больше

00:25:15

не прокидывает а произойдет

00:25:16

автоматически внутри вот здесь хук

00:25:20

сохраним проверим что таки есть все

00:25:23

отлично и не кликаю по кнопке давайте

00:25:25

опять же залогинимся залогинимся profile

00:25:31

ситжес все работает все отлично ребят то

00:25:35

есть все круто

00:25:39

трудно трудно наверно было добавляю все

00:25:45

отлично то есть магнитика тема кажется

00:25:48

немножко мы там усложняем жизнь сложно

00:25:50

но нет мы все вынесли в одну кучку ребят

00:25:52

в одно место у нас есть вы is out

00:25:54

redirect хок так еще и там внутри все

00:25:57

это происходит в одном месте и мы можем

00:26:00

очень гибко гибко гибко теперь

00:26:02

настраивать мы во-первых можем любую

00:26:04

компоненту защитить вот этим редиректом

00:26:06

авторизационный например я не хочу

00:26:08

попадать на страничку юзеров нельзя да

00:26:09

запрещаем она нему попадать на эту

00:26:12

страничку все что же надо сделать это

00:26:14

пойти на users can do единую компоненту

00:26:16

сейчас где нас и например ее users

00:26:21

коктейльную компоненту она у нас

00:26:24

классовая создать создать users can

00:26:29

тайника монету запихнуть в наш кок вы из

00:26:33

выбросить его из

00:26:34

aus redirect запихнуть ее сюда и здесь

00:26:38

сказать в вы выс высе redirect и ее уже

00:26:44

отдать эту компоненту отдать внутри вот

00:26:47

туда

00:26:48

нуждаться компонент и компонент

00:26:50

компонента немножко мутно что мы создаем

00:26:53

дать его компоненты но мы можем не

00:26:54

создавать такие переменные чтобы так не

00:26:56

передавать осмотрите что сделать это еще

00:26:58

более мутно но дождитесь ли еще выпуска

00:27:01

пожалуйста мы можем оставить все как

00:27:04

было а оборачивание вот это сделать вот

00:27:07

таким вот образом коннект это что это

00:27:12

хак значит вот этот вызов большой вызов

00:27:15

возвращает нам контейнерную компоненту и

00:27:18

мы можем прямо вот здесь у так вот

00:27:21

поставить скобки и

00:27:23

и вот здесь поставить скобки понимаете

00:27:28

какая жесть то есть мы

00:27:35

внутренним хоком получаем один контейнер

00:27:38

а потом внешним хоком получаем другой

00:27:41

контейнер это это запись ужасно ужасны и запутаны

00:27:45

поэтому нам на помощь придет функция

00:27:48

кампус можете погуглить

00:27:50

можете поставить лайк если у вас

00:27:53

взорвался мозг если вам было интересно

00:27:54

понятно обязательно подписывайтесь на

00:27:56

канал обязательно поддержите мой проект

00:28:00

по ссылке в описании переходите в на

00:28:02

ссылку ссылку в описании на telegram чат

00:28:04

где вы можете друг другу помогать

00:28:05

подсказывайте обязательно пишите

00:28:07

комментарии зашли вам хотели не зашли

00:28:10

нравятся вам хоть и не нравится да

00:28:11

концепции знали вы их или не знали

00:28:13

обязательно листиками эти хоп хоп хоп

00:28:16

high or dare компонент это мне поможет

00:28:17

ранжироваться в поиске все друзья

00:28:19

спасибо до новых встреч ждите следующего

00:28:21

выпуска

00:28:23

[музыка]

00:28:27

а декарой дега

00:28:30

[музыка]

Описание:

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR: Front-end https://it-incubator.io/front-end Back-end https://it-incubator.io/back-end Поддержать меня можно на patreon https://www.patreon.com/itkamasutra или оформив спонсорство на данном канале. Помогайте друг другу вот здесь: https://t.me/reactjs_samurai API: https://social-network.samuraijs.com/ HOC это: - High Order Component - Компонент Высшего Порядка - Функция, которая на входе в параметрах принимает компонент, а на выходе возвращает новый компонент - контейнерный компонент для переданного в параметрах компонента. HOC позволяет нам применять какое-то поведение к разным компонентам, не дублируя код. Иначе: HOC позволяет нам создавать однотипные контейнерные компоненты для разных целевых компонент. А задача контейнерной компоненты - дать целевой презентационной компоненте какие-то данные\поведение. Из популярных всех известных HOC-ов мы с вами уже знаем connect и withRouter Правда connect - не совсем HOC если совсем придраться уже: connect после первого вызова вернёт нам HOC. И мы его уже вызываем второй раз. А сама функция connect не может быть хоком, так как она принимает mapStateToProps и mapDispatchToProps, а настоящий HOC должен принимать в параметрах КОМПОНЕНТ. Вот такие пироги!!! Летим, самураи! Летим, самураи ;) Уроки по React JS: https://www.youtube.com/playlist?list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8 * Сайты: https://it-kamasutra.com/ https://it-incubator.io/ https://samuraijs.com * Мы в соц. сетях: https://vk.com/itkamasutra https://www.facebook.com/unsupportedbrowser https://telegram.me/itkamasutra * Мои личные VK и Insta: https://vk.com/d.kuzyuberdin https://www.facebook.com/unsupportedbrowser

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "69 - React JS - High Order Component (hoc)"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "69 - React JS - High Order Component (hoc)" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "69 - React JS - High Order Component (hoc)"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "69 - React JS - High Order Component (hoc)" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "69 - React JS - High Order Component (hoc)"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "69 - React JS - High Order Component (hoc)"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.