React & TypeScript: Komponenty renderless

0:00To w tym momencie przechodzimy do

0:01kolejnego zadania dotyczącego typowania komponentów i konkretnie posłużymy się

0:06tutaj przygotowaniem Render less Component, czyli jak sama nazwa wskazuje

0:10komponentem, który nie renderuje nam niczego, ale służy do np.

0:13dodania określonej logiki.

0:15Przykładem takiej logiki może być pobranie danych z naszego API.

0:19Zatem przygotujemy teraz komponent o nazwie Fetch, do którego będziemy

0:22przekazywać adres URL kierujący do konkretnego API.

0:25Ale oczywiście w tym momencie nie będziemy

0:27pobierać danych z bazy, tylko posłużymy się danymi wpisanymi z palca.

0:32Jeżeli chodzi o zawartość tego komponentu, to do niego

0:35przekażemy funkcję, z pomocą której będziemy wyświetlać nowy komponent w

0:39zależności od statusu oraz pobranych danych.

0:42Zatem w sytuacji, gdy będziemy mieli stan

0:44ładowania będziemy będziemy pokazywać określony komunikat i

0:47tak samo będzie to w przypadku wystąpienia ewentualnego błędu.

0:51No i ostatecznie, gdy dane zostaną pobrane

0:53poprawnie, wyświetlimy komponenty list, do którego przekażemy pobrane dane oraz

0:58przekażemy render, z pomocą którego wygenerujemy poszczególne elementy listę.

1:03Zatem teraz musimy zająć się przygotowaniem tego konkretnie komponentu.

1:07Zrobienie tego nie jest zbyt skomplikowane ze względu na to, że w przypadku listy

1:12musimy po prostu odebrać przekazane propsy, a następnie zbudować tutaj element

1:16URL oraz poszczególne elementy listy wykorzystując metodę map.

1:20Tutaj po prostu tworzymy nowy element

1:22HTML, do którego przekażemy funkcję event ładujące konkretny element.

1:26Oczywiście ewentualnie moglibyśmy zrobić

1:28tak, że ta funkcja również by dodawała ten otaczający element,

1:32natomiast w tym przypadku wydaje mi się to zupełnie wystarczające.

1:36Drugim komponentem, które musimy tutaj przygotować jest komponent fetch.

1:40W jego przypadku sytuacja jest nieco

1:41bardziej złożona, ponieważ będziemy musieli wyskoczyć trochę w przyszłość, o

1:45których typowaniu będziemy mówić w kolejnych lekcjach.

1:48Przede wszystkim wykorzystamy tutaj US

1:49State, wewnątrz którego będziemy przechowywać status oraz dane pobrane z

1:53naszego API i tutaj ustawię jakąś wartość domyślną.

1:56Następnie wykorzystując juz efekt będzie pobierać nasze dane.

2:00Normalnie byśmy tutaj uderzali do

2:02przekazanego URL z pomocą procesów, a w tym przypadku po prostu ręcznie ustawimy

2:07dane symulując poprawne zakończenie zapytania.

2:10W momencie gdy to będzie gotowe wywołujemy tutaj funkcję przekazaną jako Props child

2:16i w tym momencie posiadając taki komponent jesteśmy gotowi do tego, aby zaimportować

2:20jeszcze US State oraz Just Efekt, a następnie zająć się dodaniem typów.

2:25I w tym momencie będę prosił Cię o wzmożoną uwagę.

2:28W pierwszej kolejności musimy dodać alias typu określający stan pobierania danych.

2:33I w tym przypadku skorzystamy z Uni String litera type.

2:36Do tego, aby określić poszczególne stany nie ma tutaj nic nadzwyczajnego.

2:40Następnie musimy określić typ dla poszczególnego elementu naszej listy.

2:45I tutaj konkretnie chodzi o ten obiekt.

2:47Czyli mamy dwie właściwości typu string oraz Number.

2:50Znowu nie ma tutaj żadnych wyzwań.

2:52Idąc dalej musimy zdefiniować typ naszego

2:55stanu i tutaj chodzi konkretnie o ten obiekt.

2:58Czyli mamy tutaj status.

3:00Do którego przypisujemy typ status, który

3:02zdefiniowaliśmy tutaj, a następnie mamy typ Data, który będzie wykorzystywać typ

3:07generyczny wykorzystujący aktualną strukturę pobieranego obiektu.

3:12Czyli w tym przypadku będziemy odwoływać się do Ideas ITM.

3:16Zatem aby się nie powtarzać utworzymy sobie tutaj alias typu,

3:19do którego wykorzystując zapis genetyczny przekazujemy interfejs Alice Item.

3:24Dzięki temu mamy tutaj alias typu wskazujący na interfejs naszego stanu, a

3:29jednocześnie przekazujemy do niego typ naszego obiektu.

3:32No to teraz możemy zadbać jeszcze o typ

3:34naszych procesów, czyli dokładnie obiektu znajdującego się tutaj.

3:38W przypadku adresu URL mamy tutaj do czynienia ze string, a w przypadku

3:43children mamy do czynienia z funkcją, która przyjmuje state.

3:46I jeżeli chodzi o typ tego stanu, to wykorzystujemy alias, które utworzyliśmy

3:50tutaj my i ostatecznie z funkcji tej zostaje zwracany elementy.

3:55W tym momencie nie pozostaje nic innego

3:57jak po prostu przypisać te typy do poszczególnych obiektów.

4:00W przypadku psów nie ma tutaj żadnej

4:02tajemnicy, a w przypadku US State wykorzystujemy tutaj zapis generyczny.

4:07Potem będziemy sobie jeszcze mówić.

4:08Przy czym tutaj oczywiście nie chodzi nam o typ psów, tylko o typ stanu.

4:13Zatem szybko naprawiam moją pomyłkę i przechodzimy dalej.

4:16Jeżeli chodzi o efekt, w tym momencie nie

4:18wymagane są to żadne typy, ponieważ wszystko jest tutaj jak widzisz w

4:22porządku, ale poniżej musimy jeszcze coś załatwić.

4:25Konkretnie musimy określić typ dla psów listę.

4:28W tym przypadku utworzymy sobie nowy interfejs zawierający właściwość items,

4:33który wskazuje na typ właściwości data pochodzący z typu naszego stanu,

4:37Czyli konkretnie chodzi o właściwość, którą mamy tutaj.

4:40Zatem w związku z tym, że wykorzystujemy

4:42tutaj typ generyczny, a konkretnie tablicę zawierającą elementy określonego typu,

4:47to tak naprawdę wskazujemy na interfejs znajdujący się tutaj.

4:51Zatem mam nadzieję, że jest to dla Ciebie jasne, aczkolwiek polecam Ci zatrzymać ten

4:54film i zajrzeć w przykłady tej lekcji, aby dokładnie odnaleźć się w tym kodzie.

4:59A tymczasem idąc dalej mamy tutaj drugą właściwość, która jest funkcją

5:03przyjmującą jako parametr pojedynczy obiekt pochodzący z naszego stanu.

5:08I tutaj znowu odwołam się do właściwości

5:10data, ale konkretnie w związku z tym, że mamy tam tablicę.

5:13Odwołam się do pierwszego elementu.

5:15Dzięki temu uzyskam tutaj elastycznie dostęp do dokładnie tego typu.

5:20Ostatnim elementem będzie wartość zwracana przez tą funkcję.

5:23I tutaj konkretnie zwracamy dokładnie taką

5:26samą wartość, jaką przyjmujemy jako parametr.

5:29Dzięki temu w momencie gdy wykorzystam ten typ i przypisze go do naszych procesów,

5:33wszystkie błędy nam znikną, a nasz komponent będzie gotowy.

5:36Zatem jak widzisz znowu wykorzystaliśmy

5:38wiedzę na temat TypeScript do tego, aby obsłużyć render less component.

5:42Mam nadzieję, że ten przykład pokazał Ci

5:44kilka użytecznych rzeczy, a tymczasem dziękuję Ci za uwagę i zapraszam do

5:48kolejnych lekcji dotyczących typowania łuków.