React & TypeScript: Typy i Redux

0:00W tej lekcji pokażę Ci, jak dodawać typy w przypadku wykorzystania Rebecca.

0:04Z tego powodu stworzymy sobie prostą

0:06aplikację wyświetlające nasz aktualny stan, wewnątrz którego będziemy

0:09przechowywać liczbę oraz kilka przycisków, z pomocą których

0:12będziemy zwiększać, pomniejszać oraz resetować status tego stanu.

0:17Z tego powodu do każdego z tych przycisków przypisze również odpowiednią akcję.

0:21No i teraz nasze zadanie polega na tym, aby skonfigurować Dexa do tego, aby

0:25obsługiwać nasz stan oraz jego zmianę, czyli te poszczególne akcje.

0:29Aby to zrobić utworzymy sobie teraz nowy plik, który umieścimy w katalogu

0:34C wewnątrz podkatalogów state oraz width users.

0:37Plik będzie nosił nazwę Content read user i wewnątrz niego zapiszemy nasz user.

0:42Zatem zaczniemy od zdefiniowania funkcji

0:44przyjmującą state oraz akcję, którą od razu będziemy eksportować.

0:48Następnie musimy zdefiniować sobie initial

0:50state, które przypisujemy jako domyślną wartość pierwszego parametru.

0:54Idąc dalej wykorzystujemy instrukcję

0:56warunkową switch do tego, aby przełączać się pomiędzy typem akcji i na tej

1:00podstawie rozpoznawać to, z którą mamy w danej chwili do czynienia.

1:03Zatem mamy tutaj akcje dodawania, odejmowania oraz resetowania.

1:08No i oczywiście mamy też akcję domyślną, która zwraca nam nasz bieżący stan.

1:11W przypadku akcji dodawania oczywiście dodajemy przekazaną wartość, w przypadku

1:15odejmowania odejmujemy, a w przypadku resetowania ustawiamy nasz stan na 0.

1:20I tutaj jak widzisz, w związku z tym, że nasz stan jest naprawdę bardzo prosty,

1:24Time script był w stanie domyślić się jego typu.

1:26Natomiast w przypadku bardziej złożonych obiektów musielibyśmy tutaj utworzyć np.

1:31interfejsy lub alias typu do tego, aby określić strukturę naszego stanu.

1:35Niestety na ten moment Tate nie jest w stanie określić typu akcji.

1:39Zatem musimy teraz stworzyć interfejs, z pomocą którego dokładnie to co robimy.

1:43No i tutaj mamy pewne schody polegające na tym, że typ naszej akcji będzie różni się

1:47w zależności od tego, z jaką akcją mamy do czynienia.

1:50Czyli nasza akcja będzie posiadać dwie właściwości, czyli typ oraz paletę.

1:55Podobnie będzie w przypadku odejmowania.

1:58Natomiast w przypadku resetowania nie

1:59będziemy przekazywać z żadnego pawilonu, bo wystarczy nam przekazanie typu.

2:04Z tego powodu dla naszej akcji musimy

2:05utworzyć alias typu będącą unią typów poszczególnych akcji.

2:09W ten sposób, jeżeli teraz wykorzystamy

2:11ten alias do opisania naszych akcji, wszystko będzie tutaj w porządku.

2:15Mało tego, jeżeli przykładowo tutaj

2:17będziemy próbowali wykorzystać bailout, otrzymamy ostrzeżenie od tekstu

2:22informujące nas o tym, że nie możemy tego zrobić.

2:25Podobnie zresztą będzie w pozostałych

2:26przypadkach, gdy będziemy próbowali przekazać tutaj jakiś inny typ.

2:30To co jest jeszcze istotne, to fakt, że typ naszych akcji będziemy sobie

2:34eksportować, ponieważ za chwilę będziemy po nie sięgać.

2:37Na ten moment jeszcze utworzymy sobie plik

2:39index wewnątrz katalogu users, z pomocą którego wyeksportować mamy

2:44wszystkie edit, a w tym przypadku ten jeden.

2:46Zatem wykorzystamy metodę Container

2:48Radius, do której przekażemy obiekt zawierający właściwość counter, do którego

2:53przypiszemy nasz Counter User od razu tutaj wyeksportowane tą wartość oraz

2:58zadbam o to, aby wyeksportować sobie również typ naszego stanu.

3:01I tutaj aby go utworzyć wykorzystamy

3:04Editor Type, do którego przekażemy of naszego DDS.

3:07W ten sposób wszystko jest tutaj załatwione oprócz samych importów.

3:11No i teraz mogę zaimportować tą metodę i

3:13oczywiście muszę zadbać o to, aby zaimportować Center Feed User.

3:17W tej chwili wszystko jest tutaj gotowe, a my możemy pójść dalej.

3:20Konkretnie utworzymy sobie drugi katalog w podkatalogu state o nazwie Action created.

3:26Wewnątrz niego umieścimy plik index,

3:29który posłuży nam do tego, aby zdefiniować kreatory naszych akcji.

3:32Zatem pierwszą funkcją będzie funkcja Add przyjmująca jako wartość waluty number

3:37i wewnątrz niej będziemy zwracać nową funkcję przyjmującą jako parametr DSP.

3:42I wewnątrz tej funkcji wywołujemy DSP, do którego przekazujemy obiekt naszej akcji.

3:46Ten obiekt będzie zawierał właściwość TAP oraz oczywiście Chillout.

3:50Tutaj oczywiście w tej chwili mamy błąd

3:52informujący nas o niejawnym typie Emy, więc musimy tutaj dodać typ DSP.

3:56Tutaj musimy zaimportować ACT,

3:59jednak tutaj dalej mamy błąd informujący nas o tym, że DSP jest typem genetycznym,

4:04do którego musimy przekazać typ naszej akcji.

4:06Zatem importujemy sobie teraz akcję, no i

4:09w tej chwili wszystko jest tutaj w porządku.

4:11Zatem mogę skopiować tą metodę i odpowiednio utworzyć akcję sub.

4:17Oraz DJ i set.

4:21W tej sytuacji oczywiście natychmiast mamy informację o tym, że nie możemy tutaj

4:25przekazać PLN, ponieważ typ akcji na to nie pozwala.

4:28No i w tym momencie, jeżeli mamy zdefiniowane nasze kreatory

4:32i jesteśmy w stanie je wykorzystać jeszcze zanim to będzie możliwe w głównym

4:36katalogu, to utworzymy sobie index CS, wewnątrz którego utworzymy nasz store.

4:41Zatem wykorzystamy tutaj metodę Create, do której przekażemy nasze wid.

4:46Za chwilę.

4:46Importujemy pusty obiekt oraz metodę Add limit.

4:49Warto, której przekażemy.

4:51Tak.

4:52Za importuje sobie teraz tę metodę, aby wszystko tutaj było poprawne.

4:56No i na samym końcu mamy jeszcze tank

4:57middleware, które importujemy z Tidak Stark.

5:00Upewnij się jeszcze tylko proszę, że dodałeś go do swoich zależności.

5:04Na ten moment wygląda na to, że jeszcze

5:06się pomyliłem, ponieważ nie będzie to plik index TS tylko plik stories.

5:10Natomiast plik index ts posłuży nam do

5:13tego, aby wyeksportować sobie poszczególne elementy do naszego Stora.

5:17I tutaj jeszcze jedna mała literówka.

5:19Oczywiście mamy tutaj nazwę Users.

5:22W tym momencie jesteśmy gotowi do tego,

5:23aby wykorzystać nasz cały stat wewnątrz naszej aplikacji.

5:27I tutaj w pierwszej kolejności w pliku index TS musimy wykorzystać provider i

5:32opakować nim nasz główny komponent aplikacji.

5:35No i teraz musimy jeszcze zaimportować nasz Provider oraz Store.

5:38No i teraz jesteśmy gotowi do tego, aby

5:40przejść do głównego komponentu naszej aplikacji.

5:42I tutaj na początek importuje wszystkie

5:44niezbędne metody, a następnie wykorzystamy hooka Use this patch oraz za importujemy

5:49wykorzystując Bind Action Creator, przekazując do Action Create

5:54metodę DC Patch i jesteśmy w stanie zaimportować wszystkie akcje, które

5:58będziemy wykorzystywać w przypadku naszych przycisków.

6:01Ostatnią rzeczą, o którą musimy zadbać jest zaimportowania naszego stanu i w tym

6:05celu wykorzystamy hooka Selector, który będzie przyjmował stan i zwracał część

6:10naszego stanu dotyczącą campera, czyli dokładnie to, co określiliśmy tutaj.

6:15W tym momencie mamy tutaj oczywiście błąd,

6:17ponieważ nie przekazaliśmy tutaj odpowiedniego typu naszego stanu.

6:20Jeżeli to poprawimy, nasza aplikacja

6:22będzie działać i jeżeli teraz przejdziemy sobie do przeglądarki, no to okaże się, że

6:27rzeczywiście wszystko jest tutaj w porządku.

6:29Nasza aplikacja działa, a my zbliżyliśmy się do końca tej lekcji.

6:33Zatem jak widzisz, jeżeli chodzi o

6:34wykorzystanie typów pracy, przede wszystkim musimy pamiętać o tym,

6:39aby tworząc nasz edit user uwzględnić odpowiedni typ naszego stanu.

6:43I w naszym przypadku było to proste,

6:44ponieważ wykorzystaliśmy tutaj wyłącznie liczbę.

6:47Natomiast często może zdarzyć się tak, że będzie tutaj bardziej złożony obiekt, więc

6:50będziemy musieli utworzyć odpowiedni interface bądź alias typu.

6:54Następnie musimy zadbać również o typ naszych akcji.

6:57I tutaj najlepszym sposobem jest wykorzystanie interfejsów do tego, aby

7:01opisać poszczególne akcje, a następnie połączyć je z wykorzystaniem aliasu typu,

7:06do którego przypisujemy unię tych poszczególnych interfejsów.

7:09Następnie musimy zadbać również o to, aby Action posiadał informacje na temat typu

7:14deathmatch, do którego przekazujemy typ naszej akcji.

7:17Dzięki temu upewnimy się, że struktura

7:19naszych akcji jest dokładnie taka, jaką zdefiniowaliśmy w typach.

7:23No i ostatnim ważnym elementem będzie to,

7:25aby wykorzystać tutaj Vito Type do tego, aby utworzyć typ naszego stanu.

7:29To wszystko sprawia, że jesteśmy w stanie

7:31wykorzystać nasz cały tor do tego, aby operować na naszym stanie.

7:35I tutaj jeszcze tylko korzystając z

7:38Selector musimy upewnić się, że przekażemy tutaj odpowiedni typ naszego stanu.

7:42No i tak w zasadzie w temacie wykorzystania typów DB.

7:45To byłoby na tyle, co chciałbym Ci

7:47powiedzieć, ale oczywiście muszę zaznaczyć, że im bardziej złożona

7:50aplikacja, tym więcej będzie się tutaj działo.

7:53Natomiast na ten moment masz absolutne podstawy do tego, aby po prostu zacząć

7:57działać, a mi nie pozostaje nic innego jak po prostu podziękować Ci za uwagę.

8:01Cześć!