Nowoczesny React: Operacje asynchroniczne w komponentach

0:00W kolejnych lekcjach tego modułu powiemy sobie o operacjach asynchronicznych i

0:03jak sobie z nimi radzić w środku Reacta.

0:06Zależy mi na tym, żeby w List of People nie występował żaden problem.

0:09Niestety z poprzednich lekcji mamy tutaj jedną rzecz.

0:13Otóż tutaj występuje sytuacja, w której ten link będzie pod spodem.

0:17Tak naprawdę ancorem więc mamy a w środku A i dlatego mamy ten problem.

0:22Tutaj chciałbym, żeby to było czyściuteńkie i to List of people

0:24nie zwracało żadnego błędu.

0:26Dlatego poprawię to po prostu na diva.

0:29Ten div spowoduje, że zabierze mi tą fajną funkcjonalność on hover.

0:32Musielibyśmy sobie to ręcznie dostarczyć.

0:35Natomiast nie będziemy mieli tutaj żadnych dodatkowych błędów.

0:39Wszystko działa poprawnie.

0:41Teraz przechodząc sobie do wyzwań, które przed nami stoją, to wyobraźmy sobie

0:45sytuację, w której People jest do nas dostarczane, ale poprzez

0:50funkcję get people.

0:52Co więcej, nie ma już tego eksportu, czyli jakby nie jesteśmy w stanie tego

0:56odebrać w ten sposób jeszcze więcej.

0:59Chcemy sobie tutaj właśnie dorzucić to jako operację asynchroniczną,

1:03czyli get people. To teraz promise.

1:05Czyli to jest operacja asynchroniczna.

1:06Co prawda to jest troszeczkę taka imitacja, dlatego że People to statyczna

1:11tablica i wrzucamy ją w promises, ale to nam wystarczy, żeby zobaczyć pewien

1:17problem, który byśmy mieli, bo możemy sobie wyobrazić, że to jest takie

1:20zablokowanie właśnie odbierania danych z backendu.

1:24Get People przychodzi do nas z backendu.

1:26Teraz, jeżeli odświeży tą stronę już jest problem, dlatego, że importujemy gdzieś

1:31people, a tego importu już nie ma.

1:34Nie jest to eksportowane tutaj z tej strony.

1:36Wróćmy sobie do Pages.

1:37Tam gdzie mamy ten problem, czyli w People Pages, nie możemy już zrobić people,

1:43tylko musimy zrobić get people.

1:45Co za tym idzie, wszędzie tam, gdzie używamy people, będziemy mieli problem.

1:49People is not defined dlatego, że wszędzie tam gdzie

1:52people używamy, to tego już nie ma.

1:55Podejdźmy sobie do tego naiwnie.

1:56Skoro tam mogliśmy zrobić promise, to tutaj może jesteśmy w stanie to odebrać.

2:04Czyli zrobilibyśmy sobie await i tutaj get people i to powinno wystarczyć, ale wiemy

2:10z doświadczenia, że sync await idą w parze.

2:15Czyli musimy dodać esencję tutaj do funkcji people page, żeby

2:20await zadziałało w ten sposób.

2:22No i okazuje się, że dostajemy kolejny error objects are not

2:25valid as React child.

2:27Dlaczego ta sama zasada, skoro tutaj async spowodowało, że Get people

2:32nie jest już tablicą stringów?

2:34Zauważ tylko teraz jest promise tablicy stringów.

2:38No to w takim samym układzie.

2:40Jeżeli tu dodamy async, to people page nie jest już komponentem.

2:44Jest komponentem, który tak naprawdę jest opakowany w Promise, czyli jest Promise.

2:48Z punktu widzenia JSX a to jest po prostu obiekt.

2:52Więc JSX zwraca nam problem, że słuchaj, słuchaj, nie mogę osadzić people page.

2:56Jak to mogę zrobić, skoro to jest obiekt?

2:58Nie wiem, jak sobie z tym poradzić.

3:00No i teraz widzimy, że nie jesteśmy w stanie tak przygotować komponentu.

3:04Nie możemy mieć tutaj słowa kluczowego async, a jeśli tak, to

3:07tutaj nie możemy mieć await.

3:10W takim układzie możemy sobie poradzić troszeczkę inaczej.

3:12Co by było, gdybyśmy użyli Effect?

3:15Czyli nasz kolejny pomysł to będzie use effect.

3:18Ale use effect musi się nam z czymś łączyć, dlatego że no okej, jest effect,

3:22chcemy, żeby on wywołał się jednorazowo, więc tablica dependency as będzie pusta.

3:27Chcielibyśmy, żeby to People nam się tutaj załadowało, ale równocześnie musimy

3:33zaktualizować w jakiś sposób to, co komponent wyświetla.

3:35Czyli komponent musi wiedzieć o tej zmianie, skoro ma wiedzieć o zmianie.

3:40I mówimy w ogóle o zmianie, czyli że People na początku będzie pustą tablicą, a

3:45później będziemy mieli jakąś wartość, to oznacza to ni mniej ni więcej, że

3:49musimy użyć use state, czyli use state.

3:52To będzie nasze people.

3:54Teraz i tutaj będziemy mieli set people.

3:57W tym momencie początkowa tablica jest pusta.

4:01To powinno zacząć nam działać.

4:02Oczywiście nie będzie nic wyświetlać i mamy people i set people I teraz

4:06chcielibyśmy sobie to odebrać i zrobić set people w momencie gdy

4:10odbierzemy tą promise.

4:11Innymi słowy tutaj sobie spróbujmy zrobić async I tutaj

4:16spróbujmy sobie zrobić const myData await getPeople i później zrobimy

4:23sobie set people jako myData.

4:26Pomimo tych błędów i tak widzimy, że coś tutaj jest nie tak.

4:30Effect boards are synchronus to preventrace conditions put

4:34the async function inside.

4:36Czyli tutaj widzimy, że mamy takie coś, że nie możemy w efekcie

4:40bezpośrednio dopiąć async.

4:42Głównie tutaj mamy wyjaśnienie dlaczego tak jest.

4:45Będziemy mieli też runtime owy exception tutaj i ten Runtime Overexception mówi

4:50nam, że musimy mieć clean up function i to clean up function nie może być promise,

4:55musi być zwykłą funkcją, więc jeżeli dopniemy sobie async to tutaj to clean

5:00up, które byłoby zwracane na returnie.

5:03To nie byłaby funkcja, tylko byłaby to promesa, która resolwuje do tej funkcji.

5:08Nie chcemy tego i React tego nie chce, dlatego musimy tutaj poradzić

5:13sobie troszeczkę inaczej.

5:14Zróbmy to w ten sposób.

5:16Możemy mieć funkcję fetchdata Albo tutaj wrzucić sobie to, co potrzebujemy

5:23tutaj, a sync i natychmiast wywołać to feee.

5:27Ok. Zobaczmy, że teraz wszystko działa.

5:30He he he.

5:30Jest o tyle niefortunną nazwą, że mamy coś takiego w Global Scope jak.

5:34He he he. Warto to sobie troszeczkę inaczej nazwać.

5:37He he he. Data na przykład.

5:39A jeszcze lepiej, jeśli znasz koncepcję hi fi zrobić to jako imidity

5:44invoke function expression. Co to oznacza?

5:47Mamy funkcję, która natychmiast jest wywoływana.

5:50To znaczy, że gdybyśmy wzięli to wszystko w nawias i zrobili sobie funkcję, czyli

5:54zobacz, robię zwykły nawias i funkcję.

5:57I teraz wyobraź sobie, że to reprezentuje jak gdyby tak zwane function

6:01expression, czyli function expression.

6:04To jest troszeczkę coś innego niż definicja funkcji, ale możesz sobie tak to

6:07wyobrazić na potrzeby przykładu, że tutaj funkcja jest zdefiniowana tylko

6:11i ja ją wywołuję w tym momencie.

6:14I to jest hi fi.

6:15To będzie jak gdyby ten kod, który mam tutaj, cokolwiek tutaj napisze,

6:19natychmiast zostanie wywołane. Dlaczego?

6:22Dlatego, że z perspektywy czysto technicznej dla interpretera nie ma

6:27znaczenia, czy ty zrobisz identifier czegoś, czyli czy coś nazwiesz czy nie.

6:32W tym przypadku mamy tutaj coś, co jest nienazwane, anonimowe arrowfunction

6:36i natychmiast to wywołujemy.

6:38Matematycznie jest to poprawnie napisane.

6:40Musimy sobie tutaj jeszcze dorzucić tego asynca przed i teraz wrzucić tą całość.

6:45Tutaj uprościć możemy też set people, bo z perspektywy interpretera również nie ma

6:51znaczenia, czy Ty zrobisz sobie stałą pomocniczą czy nie.

6:54Więc możemy to sobie wrzucić tutaj i odchudzić trochę.

6:58Ten kodzik teraz będzie wesoły.

7:00Zobacz mamy use effect, set people get people i wszystko działa tak jak powinno.

7:06Rozwiązaniem więc naszej zagadki jak radzić sobie z operacjami

7:10asynchronicznymi jest use effect.

7:12Ale uwaga w środku i połączenie to ze stanem.

7:16Dlatego, że coś co przychodzi do Ciebie w czasie no niestety zmienia się w

7:21czasie albo stety i musimy mieć.

7:24W takim wypadku stan use state jest konieczny, jeżeli czegoś nie ma.

7:28A później chcemy na przykład zapytać o to backend i backend przyniesie nam te dane.

7:33Czyli generalnie robimy tutaj zapytanie asynchroniczne, zapytanie Ajax.

7:38Tutaj symulujemy oczywiście takiego Ajaxa.

7:41Symulujemy set people.

7:42Moglibyśmy sobie wyobrazić, że tutaj będzie to troszeczkę bardziej

7:45skomplikowane, czyli będziemy chcieli sobie zrobić taki preloader,

7:48tak jak mamy tutaj. Loading.

7:50Data about mark.

7:51I tutaj będzie jeszcze stan obsługiwany is loading albo is error.

7:56Dlatego, że tutaj powinniśmy sobie to opakować triczem.

8:00My wiemy, że tutaj nic złego się nie stanie, dlatego, że to jest nasza

8:04symulacja i tam nie ma możliwości, że ta promisa, konkretnie Get people zwróci nam

8:10coś innego niż people, że zwróci nam błąd.

8:13Ale gdyby tak było tutaj, bylibyśmy w stanie obsłużyć ten błąd

8:17w ten czy inny sposób.

8:19Na razie obsłużymy to sobie po prostu pokazując ten błąd na konsoli.

8:23Ale ten try catch dla każdej promisy, która faktycznie robiłaby wycieczkę do

8:28backendu, powinniśmy tutaj umieścić.