React: Context API w praktyce

0:00Cześć! Skoro już wiemy jak wykorzystywać context naszej aplikacji, a przynajmniej znamy

0:04takie podstawy, to teraz możemy zacząć przygotowywać naszą aplikacje

0:08do tego, by odpowiednio właśnie korzystała z Provider'a, z Consumer'ów i ze state'u,

0:13który będziemy tutaj podawać. Jak widzisz, właśnie podmieniłem value na cały state,

0:17ponieważ to z niego będziemy korzystać przez cały dalszy czas trwania

0:21tego kursu, a przy okazji stworzyłem taki krótki plan, żebyśmy się nie zgubili, żebyśmy

0:25wiedzieli, jakie kolejne kroki musimy podjąć, żeby nasza aplikacja zaczęła

0:29wyglądać tak, jak chcemy, żeby wyświetlała Twitter'y, artykuły i notatki, w poszczególnych

0:33kategoriach. Plan wyjątkowo jest po polsku. Nie widziałem sensu, żeby

0:37pisać go po angielsku i pierwszą pozycję w naszym genialnym planie, jest

0:41usunięcie initialStateItems. Nie będą nam więcej potrzebne. Przygotujemy

0:46nasze komponenty w taki sposób, żeby wyświetlały jakąś fajną wiadomość. Kiedy nie będzie,

0:50po prostu, żadnego elementu do wyświetlenia,a przy okazji usuniemy pustą

0:54tablicę z items. Zastąpimy ją obiektem i wewnątrz

0:59stworzymy twitters, articles oraz

1:03notes. I to

1:07będą nasze tablice, na poszczególne notatki. I skoro

1:12to już mamy gotowe, to teraz możemy sprawdzić, co mamy pod drugim punktem naszego planu.

1:16A mamy przywrócenie funkcjonowania add item, bo jak

1:20teraz sobie spojrzymy, to nasz form, który wykorzystywał wcześniej metody add item -

1:24jest teraz zagnieżdżony w modalu, więc nie ma bezpośrednio dostępu

1:28do tego, co znajdowało się w tej funkcji. Jeśli nawet spróbujemy sobie coś

1:32tutaj dodać, to

1:37strona nam się przeładuje, query string zostanie dodany do naszego paska adresu, ale

1:41żaden element się nie doda do state'u. Nic właściwie co wcześniej robiliśmy się

1:45nie wykona, więc musimy przywrócić funkcjonowanie temu wszystkiemu i tym się

1:49teraz zajmiemy. Przy okazji zaplanujemy sobie kilka ruchów naprzód, ponieważ

1:54oprócz tego, że będziemy robić add item, w naszym formularzu, to

1:58chcemy jeszcze pobierać elementy Twitter'ów, artykułów i

2:02notatek do poszczególnych kategorii. I to też będzie wrzucane naszego Providera. To

2:07też będziemy wykorzystywać naszym context'cie, więc usuniemy teraz ten name, który

2:11jest nam już niepotrzebny. Tutaj też go wywali my i teraz, żeby przekazać

2:15zarówno nasz state, który będzie potrzebny w kontekście, jak i metodę, którą

2:20będziemy wykorzystywać w naszym formie. Musimy skonstruować sobie taki obiekt,

2:24który skomponujemy sami. Możemy go nazwać contextElements

2:28i wewnątrz niego, za pomocą spread operator'a, wrócimy

2:32sobie this.state, czyli ten obiekt, który mieliśmy tutaj,

2:37zostanie włączony do tego elementu contextElements.

2:41Pamiętaj, że spread operator w obiektach, w normalnym JavaScript'cie,

2:45takim czystym, jeszcze nie jest dostępny, ale z racji, że korzystamy z Create React App,

2:49który ma odpowiednie skonfigurowanego Babel'a, to możemy wykorzystywać już sobie właśnie

2:54spread operator w obiektach. A drugim elementem będzie addItem i tutaj

2:59odnosimy się do this.addItem, czyli do tej funkcji, którą mamy w

3:03tym miejscu i kiedy nasz contextElement już jest odpowiednio skomponowany, to teraz

3:07możemy go przerzucić tutaj - do naszego value, w context'cie, na

3:11potrzeby przetestowania tego, czy nasza funkcja w ogóle będzie działać. Zakomentujemy

3:16sobie wszystko, co tutaj mieliśmy. Zostawiłem tylko preventDefault, żeby nie

3:20przeładowywało nam strony i tutaj

3:27jeszcze krótkie słowa wyjaśnienia, bo moglibyśmy teoretycznie te

3:31funkcje, tak jak poprzednich działach tego kursu, podać do modala

3:36jako props'a i później w modalu, jak sobie go otworzymy, moglibyśmy

3:40podać tutaj, moglibyśmy zdestrukturyzować tego props'a, te funkcje i

3:44podać ją jako props'a znowu niżej do form'a. Tylko, że takie

3:48wodospadowe podawanie props'ów nie jest najlepszą praktyką i w

3:52ostateczności prowadzi do tego, że bardzo łatwo możemy zapomnieć, gdzie, który

3:56props został podany. Możemy gdzieś, coś przypadkowo usunąć. Narażamy

4:00naszą aplikację na błędy, więc tym sposobem, używając context,

4:05pozbywamy się tych pośrednich stepów i możemy w ten

4:09sposób, korzystać z pewnych zasobów, w dowolnym miejscu, w naszej

4:13aplikacji - po prostu odpalając Consumer i pobierając wszystko, co wrzucamy

4:18tutaj, Provider'a. Oczywiście nie jest to rozwiązanie uniwersalne

4:22i nie można tego traktować jako panaceum na wszystkie problemy związane

4:26z podawaniem props'ów, ponieważ bywają takie sytuacje i

4:30zazwyczaj tak jest, że dobra konstrukcja komponentów zapobiega

4:34nadmiernemu wykorzystywanie context'u. Tutaj, po prostu, wszystko przychodzi

4:39z doświadczeniem. Trzeba tego wszystkiego popróbować, a przede trzeba to zrozumieć, więc

4:43teraz już nie przedłużając, sprawdzimy czym w ogólem nasza funkcja

4:47addItem już działa, już w form'ie. Przejdźmy teraz do form'a, zaimportujemy

4:54sobie nasz context, tak

4:59jak to mieliśmy w poprzednim przykładzie. Opleciemy

5:09wszystko w AppContext.Consumer i

5:14tak

5:18jak już pokazywałem w poprzednim przykładzie, musimy otworzyć wrota naszego teleportu. Wykonując,

5:24po prostu, funkcje strzałkową, gdzie podajemy parametr context. Wklejamy nasz JSX i

5:32teraz, żeby podmienić te funkcje, które mieliśmy

5:36wcześniej, onSubmit, this.props.submitFn, która już nie istnieje. Musimy

5:41teraz tutaj, po prostu, wrzucić context.addItem, ponieważ

5:45to ona znajduje się w naszym obiekcie, który przesłaliśmy - na Providerze. I jeśli

5:51nasz teleport działa, to nasza funkcja, po wysłaniu

5:55formularza, powinna zadziałać. Chwila prawdy... Wszystko

6:02gra. Znamy nasz teleport, który działa. Wróćmy sobie do naszego

6:06root'owego elementu. Przywróciliśmy

6:10funkcjonowanie addItem. Póki co, ona nic nie robi, ale tym zajmiemy się

6:14już w kolejnej lekcji. A w tej lekcji to na tyle. Udało nam się prawidłowo skonstruować

6:19obiekt, który podajemy do naszego context'u. Zawiera on nasz stan

6:23i naszą funkcje addItem, którą wykorzystujemy w form'ie. Dobra

6:28robota, ale przed nami jeszcze sporo ciekawej pracy, bo w następnej lekcji zajmiemy się przygotowaniem inteligentnego

6:34formularza. Brzmi ciekawie.