React: Ulepszanie aplikacji dzięki HOC

16.8.x

0:00Cześć, w poprzedniej lekcji stworzyliśmy nasz pierwszy w naszej kursowej karierze Higher Order

0:04Components, czyli funkcję która przyjmuje komponent, a następnie zwraca nam komponent

0:09wzbogacony o pewne rzeczy. W tym przypadku wzbogaciliśmy go o nasz page

0:13context, czyli taki props, który właśnie przekazuje nam na

0:17jakiej stronie obecnie się znajduje, jaki to jest typ strony i na tej podstawie będzie mieć

0:22właśnie taki Single Source of Truth, czyli takie jedyne źródło prawdy, z którego będziemy

0:26czerpać informacje na temat tego jak mają wyglądać nasze komponenty,

0:30co mają renderować i tak dalej. Tutaj tylko jedna taka mała zmiana. Ten

0:34props context, może stwórzmy z niego coś bardziej takiego wprost,

0:38żeby było wiadomo co to jest za props i ja bym tutaj go nazwał bo po prostu page context

0:43i teraz z racji, że zmieniliśmy już tego props'a w naszym grid template,

0:48pobieramy go sobie tutaj w tym miejscu, to musimy go wyciągnąć też jako page

0:52context, ponieważ to jest props, który normalnie wyciągamy i teraz page contex,t

0:58możemy podejść na przykład do naszego page type i

1:04póki co nic się nie zepsuło. Możemy

1:09jeszcze podmienić liczbę notatek, okej. Tutaj

1:13wszystko na razie działa, ale jak

1:18już się pewnie domyślasz tego typu propsów już nie musimy w naszej aplikacji podawać, User

1:24Page Template, może tak samo korzystać z with context, czyli z

1:29naszego higher order component'u, który sobie zaimportujemy i w

1:33ten sposób wywalamy props'a page type, a wyciągamy page contect

1:37i jak widzisz w sumie nawet nie jest to tutaj potrzebne. Właśnie

1:42to jest fajne, że sporo roboty nam odejdzie po prostu wywalając

1:47ten props z niepotrzebnych miejsc, bo póki co robiliśmy tak, że podawaliśmy do kilku

1:52dzieci, a tak naprawdę tylko niektóre komponenty muszę z niego korzystać, więc user page

1:57template, teoretycznie nie potrzebuję w ogóle props'a page type, ponieważ

2:01podawał go sidebar'a, więc wywalmy sobie ten

2:05import. Wejdźmy do sidebar'a i sidebar już akurat korzysta

2:10z naszego page type, ponieważ ma tutaj komponent

2:14styled wrapper, który właśnie wykorzystuje tego props'a, więc weźmy

2:19sobie nasze with context, oplećmy w niego sidebar i page type

2:23zastąpmy page context, czyli naszym nowym props'em jak

2:27widzisz nasz sidebar szybko został naprawiony. Oczywiście tak

2:31jak każdy inny props, również page context musi mieć walidacę, ale tego nie musimy

2:35pisać. Wystarczy, że zastąpimy sobie w ten sposób

2:40tego props'a, już będzie wszystko wiadomo. Sprawdźmy czy

2:44gdzieś jeszcze o tym nie zapomnieliśmy, context i marked as required, grid-template

2:49i tutaj podobnie możemy zrobić po prostu page context w ten

2:53sposób, okej i page types

2:59możemy usunąć, generalnie wszędzie gdzie mamy Page Type, jeśli tutaj jeszcze gdzieś mamy

3:03page context. I skoro wiesz już jak to działa, skoro wiesz

3:07jak używać Higher order Component'ów to teraz zostawiam ci refactoring

3:12reszty naszej aplikacji, tak żeby wszędzie gdzie trzeba, nasze

3:16komponenty korzystały z tego Higher Order Component, a nie korzystały z propsa Page Type, który podawaliśmy

3:20gdzieś tam od rodziców, więc zajmiemy się tym teraz. Jeśli

3:24nie chcesz tego robić, możesz skorzystać z kodu następnej lekcji, gdzie to wszystko będzie gotowe.