React & TypeScript: useContext

0:00W tej lekcji pokażę Ci jak pracować z

0:02Context API wykorzystując Hook Context oraz oczywiście Tabs PID.

0:06W pierwszej kolejności będziemy chcieli

0:08utworzyć sobie nowy kontekst, który w tym przypadku będzie przechowywał informacje

0:11na temat aktywnego motywu naszej aplikacji.

0:15I na początku zainicjowali zmieniamy go wartością NULL, ale oczywiście będzie nam

0:19tutaj zależało na tym, aby przełączać się pomiędzy wartościami Dark oraz Slide.

0:23Zatem tworzę teraz nowy alias typu, który wykorzystamy do tego, aby utworzyć

0:27interfejs naszego kontekstu zawierający dwie właściwości, czyli informacje na

0:32temat aktywnego motywu oraz funkcję, która będzie umożliwiała nam zmianę tego motywu.

0:37No i tutaj pojawiają się pierwsze schody,

0:39ponieważ jeżeli przekażemy interfejs do kontekstu, to nagle okazuje się, że nie

0:44obsługujemy tutaj wartości null, co jest oczywiście prawdą.

0:47W związku z tym możemy wykorzystać unie

0:48typów i wszystko jest w porządku tak długo, o ile pamiętamy o tym, aby za

0:52każdym razem sprawdzać, czy nasz kontekst nie jest duchem.

0:55Jest to trochę niewygodne i z tego powodu

0:57możemy zrezygnować z tego zapisu i na przykład skorzystać z możliwości

1:01ustawienia pustego obiektu zawierającego domyślne właściwości.

1:05W niektórych przypadkach, gdy

1:07przechowujemy jakieś proste dane, może nam się to całkiem sprawdzić, ale zdecydowanie

1:11lepszym sposobem jest utworzenie własnego hooka.

1:14Zatem zrobimy teraz tak, że wrócimy tutaj do wartości domyślnej NULL,

1:18a następnie skorzystamy z niej, aby wszystko tutaj działało poprawnie i

1:21utworzymy sobie nowy hook, który będzie nam sprawdzał, czy kontekst został już

1:25ustawiony, a w przeciwnym razie będzie zwracał błąd.

1:28Zatem poniżej definiujemy nową funkcję,

1:31która będzie wykorzystywać kontekst, do której przekazujemy nasz kontekst.

1:35Dzięki temu uzyskujemy dostęp do naszego

1:37kontekstu i sprawdzamy po prostu, czy właściwość TIM została tutaj ustawiona.

1:42Jeżeli nie, to wyrzucany jest błąd, a w przeciwnym razie ustawiamy nasz kontekst.

1:46Zatem teraz, za każdym razem, gdy będziemy sięgać po nasz kontekst, od razu będziemy

1:50mieć tutaj weryfikację, czy rzeczywiście jest on dostępny i czy został ustawiony.

1:55Zaimportowania teraz jeszcze tego hooka.

1:57No i możemy teraz utworzyć nasz provider.

1:59No to tworzymy nasz nowy komponent funkcyjne, do którego będziemy

2:02przekazywać, czyli które będziemy opracowywać z naszym

2:05kontekstem, a konkretnie providera kontekstu.

2:08I teraz to właśnie na tym etapie będziemy ustawiać nasz stan początkowo na wartości

2:13slide, ale oczywiście jeszcze do genetyka musimy przekazać typ naszego kontekstu.

2:18Następnie skorzystamy jeszcze z Chucka juz

2:20do tego, aby upewnić się, że nie będzie tutaj jakiś element.

2:24No i tutaj jeszcze oczywiście potrzebne są

2:26zależności jeżeli chodzi o wartość tego providera.

2:29Wykorzystamy tutaj bieżącą wartość naszego

2:31kontekstu, a następnie wygenerujemy props children.

2:35No i teraz jedyne o co muszę zadbać to o

2:37zaimportowaniu tych poszczególnych łuków oraz typu komponentu funkcyjnego.

2:43Dzięki temu otrzymujemy tutaj to niejawne

2:45typowanie, o którym mówiłem wcześniej, aczkolwiek nic nie stoi na przeszkodzie,

2:48abyśmy dodali tutaj konkretny typ, jaki Was tylko interesuje.

2:52No to teraz kolejnym krokiem będzie utworzenie jeszcze jednego komponentu,

2:55który będzie wykorzystywał ten nasz utworzony kontekst.

2:59Zatem będzie to jakiś losowy komponent,

3:01wewnątrz którego wykorzystamy nasz dający nam dostęp do kontekstu, który już

3:06w tym momencie będzie posiadał początkową wartość.

3:08Następnie tutaj wygenerujemy sobie kawałek

3:11kodu HTML, wewnątrz którego wyświetlimy sobie aktualnie włączony tryb naszej

3:15aplikacji oraz przycisk do tego, aby go zmienić.

3:18Jeżeli chodzi o sam przycisk, będziemy

3:20tutaj reagować na kliknięcie i wywoływać metodę Settings, do której przekażemy z

3:25kolei odwróconą wartość z naszego aktualnego trybu.

3:28Zatem efekt końcowy będzie taki, że ta

3:30wartość będzie nam się zmieniać za każdym razem, gdy klikniemy w ten przycisk.

3:34Dobrze byłoby zrobić jeszcze tak, aby styl

3:37tego komponentu zmieniał się w zależności od aktualnego trybu.

3:40Zatem zrobimy teraz proste przypisanie

3:42stylów, w ramach których ustawimy podstawowe wartości CSS, no i oczywiście

3:47takie, które będą zmieniać swoją wartość w zależności od aktywnego motywu.

3:52No to teraz ten nasz komponent wykorzystujący Context jest już gotowy.

3:57Tę ostatnią, co musimy zadbać, to po

3:58prostu o to, aby wyświetlić go w ramach naszej aplikacji.

4:01I teraz, aby to zrobić, musimy w pierwszej

4:03kolejności zadbać o to, aby wykorzystać nasz think provider, a następnie wewnątrz

4:08niego wyświetlić komponent, który będzie miał dostęp do dostarczanego kontekstu.

4:13Jeżeli mielibyśmy tą aplikację, mielibyśmy możliwość przełączania się pomiędzy

4:18motywami, które modyfikował zarówno kolor tła jaki kolor tekstu.

4:23Ale pomijając to, to na co warto zwrócić uwagę, to przede wszystkim na ten problem

4:27dotyczący domyślnej wartości naszego kontekstu.

4:30W tym przypadku mówiliśmy o null

4:33i w tym przypadku mamy i w tym przypadku mamy do czynienia z duchem.

4:37Zatem pamiętaj proszę o tym, że dość dobrym sposobem jest albo ustawienie

4:40domyślnych wartości bezpośrednio tutaj, albo ewentualnie dodanie pustego obiektu i

4:45wykorzystanie asercji typu do tego, żeby trochę oszukać tutaj swój p.

4:49Mówiąc poza tym, że mamy tutaj do czynienia z obiektem danego typu,

4:53choć jak widzimy w rzeczywistości nie do końca tak jest.

4:56Zatem moim zdaniem dobrym sposobem jest po prostu ustawienie tutaj wartości.

5:00Tutaj wykorzystanie Union Type, a następnie utworzenie własnego kółka.

5:04Kto będzie wykorzystywał ten kontekst?

5:06I oczywiście samego providera, wewnątrz

5:08którego będziemy ustawiać jego domyślną wartość?

5:11W momencie, gdy będziemy o tym wszystkim

5:12pamiętać, wykorzystanie obiektu ze Context API jest w zasadzie czystą formalnością.

5:18Zatem dziękuję Ci teraz za uwagę i zapraszam Cię do kolejnej lekcji.