React & TypeScript: useReducer

0:00W tej lekcji przechodzimy do typowania kolejnego Chucka i będzie nim deser.

0:05Zaczniemy od tego, że utworzymy sobie

0:06komponent Counter, który będzie wykorzystywał ten hub do tego, aby za

0:10chwilę modyfikować stan naszego komponentu.

0:13Ten komponent będzie wyświetlał nam

0:15aktualny stan naszego licznika oraz kilka akcji służących do tego, aby dodawać,

0:20odejmować, resetować oraz ustawiać nasz licznik.

0:23Zatem to co musimy zadbać to przygotowanie

0:26naszego DI do sera oraz oczywiście musimy zadbać o jego odpowiednie typy.

0:30Zatem nasza funkcja będzie przyjmować

0:32aktualny stan oraz akcję, którą chcemy na nim wykonać.

0:36I odpowiednio wykorzystując switcha

0:37będziemy przełączać się pomiędzy konkretnymi akcjami.

0:41Pierwszą z nich będzie akcja Reset, która będzie zwracała nam stan początkowy, a

0:45kolejnymi akcjami będzie odpowiednio ustawienia naszego licznika.

0:49Dodawanie i odejmowanie z niego wartości.

0:51No i oczywiście domyślnym zachowaniem tego Redux będzie zwrócenie aktualnego stanu.

0:56Zatem teraz musimy zadbać o dodanie odpowiednich typów.

1:00I tutaj w pierwszej kolejności musimy zadbać o zapisanie obiektu przechowujące

1:04nasz początkowy stan i zrobimy to bezpośrednio w tym miejscu.

1:08Następnie zdefiniujemy sobie interfejsy dla poszczególnych akcji.

1:12Będziemy mieć tutaj po prostu typ reset, a w przypadku ustawiania wartości będziemy

1:16przyjmować typ oraz wartość, którą chcemy ustawić.

1:20Idąc dalej, w przypadku akcji dodawania

1:22odejmowania będziemy przyjmować wyłącznie sam typ akcji.

1:26No i ostatecznie musimy wykorzystać tak utworzone typy do tego, aby stworzyć ich

1:31unie i dzięki temu otrzymamy typ dla naszej akcji.

1:34W ten sposób jeżeli sięgniemy po definicję

1:37typu dla naszego stanu, to będziemy mogli go przypisać tutaj.

1:40A jeżeli chodzi o typy dla naszej akcji możemy je umieścić już tutaj.

1:45No i teraz jeżeli chodzi o naszą funkcję, ona zwraca nasz aktualny stan.

1:49Nasz zaktualizowany stan, więc dodatkowo zaznaczamy to typem.

1:53Po zapisaniu pliku poprawiają nam się literówki.

1:55No i wszystko jest tutaj w porządku.

1:58Jeżeli teraz zobaczymy, to nie ma tutaj

2:00żadnych błędów, a nasz kamper jest gotowy do tego, aby go wykorzystać.

2:03Zatem tak naprawdę jeszcze jeżeli chodzi o

2:05wykorzystanie, to tutaj możemy wykorzystać typ stanu do

2:09tego, aby upewnić się, że dane, które przekazane są tutaj są spójne dla naszego

2:13stanu, a jeżeli oczywiście chcielibyśmy przekazać tutaj dodatkowe propsy, to

2:17musielibyśmy utworzyć po prostu dodatkowy alias typu bądź interfejs.

2:22W każdym razie, jeżeli chodzi o to, co musi zapamiętać w przypadku wykorzystania

2:26user hipster to to aby odpowiednio wykorzystać

2:29interfejsy oraz ich unie do tego, aby stworzyć typ opisujący poszczególne akcje.

2:35Cała reszta w zasadzie się nie różni,

2:36ponieważ opisujemy tutaj typ stanu oraz zwracanej wartości.

2:40Więc tak naprawdę to już doskonale znamy.

2:43Zatem jak widzisz dalej nie ma tutaj jakiś

2:45większych wyzwań, ale oczywiście schody mogą zacząć się z czasem.

2:48Teraz jeżeli chodzi o wykorzystanie typów w tym przypadku to byłoby już na tyle.

2:52Dziękuję Ci za uwagę i zapraszam do kolejnej lekcji.