React: Refactoring aplikacji

16.8.x

0:00Cześć, w ostatniej lekcje udało nam się stworzyć mechanizm, który pozwala nam na usuwanie

0:04naszych notatek ze store'a, a teraz przyszedł czas na dalszy

0:08rozwój naszej aplikacji, ale zanim zaczniemy sobie dodawać nowe notatki

0:12to jest jedna bardzo ważna rzecz związana z naszą aplikacją,

0:16która narażają na okropne problemy ze stabilnością. Wynika

0:21to z faktu, że podajemy w bardzo wielu miejscach prop card type, page type

0:26i tak dalej. One są zależne od siebie bardzo duża

0:30część aplikacji polega właśnie na tym props'ie i tak naprawdę moim

0:34zdaniem w tego typu rozwiązaniach powinno być już coś takiego jak Single

0:38Source of Truth, czyli takie jedyne źródło prawdy, z którego komponenty

0:42mogłyby czerpać sobie tego props'a i sprawdzać jaką wartość

0:47w danym momencie mają mieć, a to wszystko moim zdaniem powinno być właśnie

0:51oparte o router i o adres, na którym obecnie się znajdujemy, więc

0:55teraz tej lekcji postaram się pokazać jak dokonać takiego refactoring'u

0:59oczywiście część tego refactoring'u będzie przyspieszona, natomiast

1:03samą pracę możesz wykonać samodzielnie lub możesz też

1:07skorzystać z kodu następnej lekcji. Najpierw zerknijmy sobie na strukturę naszej

1:12aplikacji i pomyślny gdzie moglibyśmy najlepiej osadzić jakiś

1:16element, który mógłby sterować całą naszą aplikacją. Jeśli znasz

1:20poprzedni kursy React od podstaw, to wiesz, że istnieje coś takiego jak

1:25Context, który działa trochę podobnie jak tutaj provider do store'a, czyli

1:29jeśli opleciemy sobie całą naszą aplikację, to każdy

1:33komponent zawarty w naszej aplikacji będzie miał dostęp do wartości i

1:38danych, które ten nasz provider będzie podawał i biorąc pod uwagę,

1:42że ten komponent, który ma sterować nasza aplikacją musi korzystać

1:46z naszego routera, to najlepiej, żeby on był opleciony właśnie

1:50w nasz router, w nasz browser router, w tym przypadku i i pierwszym

1:54elementem, który rzuca się tutaj w oczy jest main template, on zawiera w sobie całą naszą aplikację

1:58i to on zawiera do do routera już, więc możemy sobie

2:02do niego wejść i stworzyć logikę, dzięki której cała

2:07nasza aplikacja będzie mogła korzystać z props'a, którego on utworzy w czasie rzeczywistym,

2:11znajdując się na konkretnym route'cie. Zanim stworzymy

2:15context to najpierw zbudujemy całą logikę odpowiedzialną za wybieranie

2:19odpowiedniego props'a w odpowiednim czasie na podstawie właśnie raute'a, na którym się znajduje. Natomiast

2:24z racji, że nasz main template. Jeśli sobie wejdziemy do root, widzimy że

2:28on nie jest zawarty w komponencie raute, więc nie możemy

2:32wykorzystać w nim takich props'ów jak na przykład match, który bardzo

2:37prosty sposób jest w stanie znaleźć tą ścieżkę na której się znajdujemy, więc

2:41musimy się tutaj trochę bardziej postarać. To co musimy zrobić, po pierwsze

2:45to zaimportować sobie specjalną funkcję with router z naszego

2:50React Router i with router, podobnie jak na przykład Connect

2:54z React Redux oplata nam nasz, nasz komponent,

2:58który eksportujemy, dając mu tym

3:02samym dodatkowe props'y. Tego typu schemat nazywamy

3:07High Order Component, czyli jakiś komponent przyjmuje komponent

3:11jako parametr, a właściwie jako argument i dzięki

3:15temu ten komponent, który tutaj wrzucamy dostaję dodatkowe rzeczy,

3:19które możemy sobie później wyciągnąć tutaj w props'ach. Najpierw sprawdźmy

3:25jakie props'y zostały podane do naszego komponentu, moglibyśmy

3:30to zrobić za pomocą console log'a, ale z racji, że mamy nasze świetne narzędzie

3:34deweloperskie, możemy sobie równie dobrze odpalić tutaj

3:39nasz tab i znaleźć main template i w

3:44nim zobaczymy, że match nie za wiele zawiera, natomiast

3:48location path name zawiera właśnie ten string,

3:52o który mu chodzi, czyli articles, notes albo twitters i teraz

3:56wykorzystując tego props'a tutaj możemy stworzyć logikę, która będzie porównywać zestaw

4:01trzech elementów z naszej tablicy. To będą trzy stringi, articles, twitters

4:06i notes do bieżącej ścieżki. Jeśli jeden

4:10z nich będzie pasował do tej bieżącej ścieżki, jeśli będzie ta ścieżka zawierać jeden

4:14z nich w sobie, to znaczy, że jesteśmy na przykład właśnie w kategorii

4:18articles i możemy zwrócić sobie takiego props'a, którego następnie podamy

4:22do contextu. Jak zwykle brzmi to skomplikowanie i jak zwykle wcale takie nie jest,

4:26więc teraz pokażę ci co możemy tutaj zrobić. Stworzymy sobie

4:31komponent, w nim state i w tym state'cie

4:35stworzymy sobie Page Type jako domyślny damy notes i oczywiście

4:40stworzymy też funkcję Render i teraz stwórzmy

4:44sobie Life Cycle Function, Component Did Mount, w którym

4:49zawrzemy naszą logikę związaną właśnie z dobieraniem odpowiedniej wartości i

4:53do ścieżki z porównywaniem jej właściwie, więc stwórzmy sobie Page Types

4:57twitters articles i notes.

5:04Zdestrukturyzujemy też sobie path name. Sprawdźmy

5:09jeszcze czy to na pewno tak wyglądało, czy tam jest dokładnie taka konstrukcja

5:13tego props'a. Props Location Path Name,

5:18zgadza się i teraz stwórzmy

5:22sobie comsta current page, w którym

5:28zrobimy coś takiego. Przefiltrujemy sobie Page Types,

5:33czyli wykorzystamy array method filter. Podamy page

5:39i każdy page przyrównamy do path name. Sprawdzimy

5:47czy on zawiera nasz page, czyli

5:51wkładamy do past name include imię krótkakażdy masz page i jeśli

5:55któryś z nich spełni ten warunek, to zostanie wypluty

5:59jako string z tego filtra. Sprawdźmy

6:05czy to zadziała. Jesteśmy na twitters i dostaliśmy twitters. Wchodzimy

6:12na notes i nic się nie dzieje, ale jak odświeżymy to się dzieje. To

6:16znaczy, że komponent tylko przy zamontowaniu wykonuje tę funkcję, a my chcemy,

6:20żeby on też zupfate'owaniu się również ją

6:24wykonywał, więc przenieśmy ją sobie teraz do czegoś co nazwiemy

6:28na przykład set current page i ona

6:33się wykona zarówno w component did mount, jak również w life cycle

6:37method odpowiedzialnej za update'owanie, czyli component

6:41did update i teraz za każdym razem jak zmienimy adres

6:46naszej aplikacji, to dostajemy odpowiednią ścieżkę w tym

6:50miejscu. To, co może nas jeszcze tutaj denerwować

6:55I co pewnie musielibyśmy zmienić jeśli już będziemy nadpisywać nasz state to,

6:59że zostaje tutaj zwrócone tablica, ale możemy się tego łatwo pozbyć, po prostu destrukturyzując

7:05naszego consta, ale nie jak w przypadku obiektów klamrami, tylko nawiasami

7:09kwadratowymi i to sprawi, że z tej tablicy wyciągamy sobie pierwszy

7:13element, czyli jedyny, tego string'a i teraz mamy bardzo

7:18ładne string'i. Tak ten żart był

7:22celowy, więc teraz po stworzeniu sobie current page utwórzmy

7:27w końcu this set state page

7:32type current page. Ależ

7:37mamy tutaj brzydki błąd. Wynika z faktu, że

7:42w component will update nasz set state

7:47się zapętla, czyli zmienia się state component

7:52się update'uje, zmienia się state, component się update'uje i tak

7:57w kółko. Żeby przerwać ten cykl, żeby złamać

8:01po prostu te klątwę od odnawiania się state'u

8:05musimy zrobić jedną rzecz. Komponent did update przyjmuje

8:09dwa argumenty, to znaczy może je przyjąć prev props, czyli poprzednie

8:13props'y, które zostały podane do tego komponentu i prev state. Prev state

8:18jest zawsze drugim argumentem, dlatego

8:22musimy wyciągnąć też ten pierwszy prev props i może nie będzie nam potrzebny i teraz

8:26ten prev state, to jest właśnie poprzedni state, który istniał w naszym komponencie. Możemy

8:31go podać sobie tutaj w tym miejscu, do naszej funkcji, naszej

8:36funkcji set current page, powiedzieć słuchaj, potrzebujemy prev state, jeśli

8:42go nie będzie to niech to będzie po prostu pusty string, to nam nic to nie zaszkodzi i teraz

8:47musimy złamać jakoś ten cykl, więc stwórzmy sobie

8:51taki warunek, że jeśli prev state page type

8:57nie

9:01jest równy current page,

9:06to wtedy ustaw nam nowy

9:12current page. Teraz

9:18możemy sobie nawet wylogować, co

9:22mamy w this state i zauważ,

9:27że teraz jesteśmy w notatkach, przyjdziemy sobie do twitter'ów, pojawia się

9:31nowy state i nowy i nowy i

9:35tak dalej, więc w momencie kiedy on chce zrobić

9:39nam kolejną rundę, kolejną pętle, kiedy już odnowił

9:44nam state, czyli przeszedł na przykład do twitter'ów, ustawił na twitter'y, zupdate'tował

9:49się. Znowu chce wykonać tę funkcję, leci przez te funkcje i patrzy i mówi tak,

9:53poprzedni wtate był twitters, teraz mamy twitters, więc

9:57nie wykonam tej operacji, która znajduje się w tym kondyszynal conditional'e. Jeśli

10:01poprzedni state byłby inny od current page, wtedy

10:05by wykonał, dlatego to zaczęło działać, więc uporaliśmy

10:10się z tym dość skomplikowanym problemem, to teraz w następnej lekcji stworzymy

10:14sobie właśnie context, w którym będziemy podawać nasz nowy utworzony state

10:19do wszystkich komponentów naszej aplikacji. Pozbędziemy się tych paskudnych props'ów,

10:23które strasznie nam brudzą cały kod.