React: Dynamiczne przypisywanie notatek do kategorii

0:00Cześć! Po stronie pliku form.js już dopasowaliśmy wszystko tak, że jestem

0:04prawie gotowy do przesyłania danych ze swojego widoku, do widoku root'owego.

0:08Natomiast po stronie root'owego widoku, właśnie, musimy jeszcze

0:12dopasować kilka rzeczy, żeby te elementy, które wysyłamy mogły się dodawać do state'u, a

0:17później mogły zostać przesyłane do podstron,

0:21do Twitters, Articles i NoTES. i teraz właśnie tym

0:25zajmiemy. Przejdźmy sobie do pliku form.js i spójrzmy na

0:32naszą funkcję addItem, która wykonuje się na event'cie submit. To

0:38chcemy, jak najbardziej, zachować. Tylko chcemy teraz w tej funkcji przekazywać

0:42dwie rzeczy. Domyślnie przekazywane był tylko event, związane

0:46z submit'em, który przesyłał takie rzeczy, jak właśnie pola formularza i tak

0:50dalej. Natomiast teraz, pola formularza w samym event'cie, submit

0:55już nie są dla nas tak istotne. Właściwie interesuje nas tylko funkcja preventdefault,

1:00która pozwala nam na nie przeładowanie strony przy wykonaniu submit'u. Natomiast

1:04chcemy, na pewno, do tej funkcji i dodatkowo, jeszcze wrzucić state,

1:08czyli do addItem musimy dodać this.state.

1:13Oczywiście, jeśli zostawimy to tak, jak teraz, to

1:18wszystko nam się zepsuje, bo ta funkcja zostanie wykonana od razu, a ona ma zostać wykonana

1:22w momencie wywołania event'u submit. Więc musimy

1:26stworzyć tutaj, tak jak wcześniej, w tym kursie funkcję, która zwraca funkcje i dopiero tutaj

1:32podajemy this.state, a dodatkowo, żeby nie uciekł

1:37nam ten event, który jest również dla nas istotny, to musimy w tej pierwszej funkcji

1:41podać event i on

1:46tutaj również musi się znaleźć. Teraz, jeśli przejdziemy

1:50sobie do root'owego widoku, do naszej ulubionej funkcji addItem. Wywalimy to

1:55wszystko, to co tutaj mieliśmy. To już jest na dla nas nieistotne. Zostaje tylko preventDefault i pamiętaj,

2:00że mamy teraz dwa parametry w naszej funkcji. Mamy event i

2:04mamy new item. Zróbmy sobie jeszcze coś takiego, że przy

2:08wykonaniu tej funkcji, na samym końcu, chcemy wykonać this.closeModal,

2:13żeby nasz modal się, po prostu, zamykał. Nie będziemy już wtedy resetować

2:17tych pól formularza. Zresztą to już i tak jest nierealne, ponieważ teraz

2:22na pola formularza wpływa funkcja handleImportChange i nie

2:27moglibyśmy tego tak, po prostu, zmienić. I tutaj po raz kolejny,

2:31posłużymy się tym sprytnym rozwiązaniem, które pokazałem już w poprzedniej lekcji,

2:35czyli wykorzystamy automatyczne przypisywanie state'u

2:39na podstawie kluczy. Tylko musimy jedną rzecz tutaj zmienić, bo jak sobie zobaczysz,

2:44to tutaj jako type, podajemy jeden z tych elementów: twitter,

2:49article i note. Natomiast w naszym state'cie, w nowym widoku,

2:54mamy twitters, articles i notes, czyli liczbę mnogą i wtedy te nazwy

2:58nam się będą gryzły. Nie możemy wtedy tego tak łatwo wykorzystać, więc zróbmy

3:02tak, że typ zawsze będzie w liczbie pojedynczej. A dodatkowo

3:06uprośćmy jeszcze jedną rzecz i tutaj wychodzi po raz kolejny fakt, że jak

3:10się rozwija aplikacje, to do pewnych rzeczy dochodzi się z czasem i warto

3:15czasami zatrzymać się nad jakimś pomysłem dłużej i zobaczyć, czy

3:19on faktycznie ma sens i tutaj, w tym przypadku, czy faktycznie

3:23ma sens to, że trzymamy to w obiekcie items. Oczywiście, moglibyśmy to update'ować

3:28później, tutaj w funkcji addItem, bez problemu. Tylko ta składnia byłaby

3:32dużo bardziej skomplikowana, bo dwa razy musielibyśmy rozpościerać prevState, czyli

3:37ten poprzedni stan wewnątrz obiektu, a później jeszcze wewnątrz

3:41tablicy. Moim zdaniem popsułoby to trochę jakość kodu. A nikomu

3:45nie służy ten items, w tym miejscu. Możemy go spokojnie wywalić i nasza

3:50aplikacja i tak zajmuje się tylko i wyłącznie wyświetlaniem notatek,

3:54które dodajemy, więc jeśli zrobimy to w ten sposób, to to też będzie

3:58okej. A dużo uprości nam pracę, więc skoro to już

4:02ogarnęliśmy, to teraz nie pozostaje nam innego, jak tylko zacząć dodawać

4:06notatki do naszej aplikacji. Użyjemy, jak zwykle, this.setState, wewnątrz

4:13którego, użyjemy prevState, aby odwołać się do poprzedniego

4:17stanu. Pamiętaj, że setState jest asynchroniczne, więc

4:21poleganie na danych, które są w bieżącym state'cie,

4:25może być ryzykowne. Jeśli chcemy coś dodawać do state'u, który był, to

4:29lepiej zawsze używać właśnie prevState. Już teraz to robiliśmy. Zresztą w tym kursie. I teraz,

4:34tutaj robimy newItem.type,

4:39podobnie jak w poprzednim przykładzie, w pliku form.js,

4:43a następnie otwieramy tablice. Wrzucamy tutaj

4:48poprzedni stan oraz

4:54dodajemy nowy element. Nie zamknąłem funkcji w nawiasy

4:58okrągłe. Teraz będzie okej. Okej i

5:02tutaj słowo wyjaśnienia - newItem.Type, cóż to takiego jest? Najłatwiej

5:07będzie to pokazać na otwartych Chrome DevTools'ach. W zakładce React,

5:14odpalimy sobie nasz formularz. Wejdziemy

5:21nawet do naszego modala i do forma, żebyśmy mogli

5:25mieć podgląd na state. To

5:31jest nasze newItem, czyli state z naszego form'a, w naszej

5:36funkcji addItem, nazywa się newItem. To jest ten state i on

5:41ma tutaj klucz type. Jak widzisz, type, twitter,

5:46odpowiada kluczowi z naszego state'u, w root'owym widoku, twitter. Więc newItem.type,

5:53tak naprawdę, przy wykonaniu tej funkcji

5:57teraz, będzie po prostu twitter'em. Tutaj będzie twitter, dwukropek

6:01i podobnie tutaj, prevState i dobieramy

6:05się do klucza twitter, czyli prevState, kropka, twitter. To

6:10jest tak samo, jak tutaj wpisujemy prevState i w nawiasach kwadratowych, newItem.type. Wykorzystujemy

6:15po prostu te dynamiczną wartość, która się zmienia w zależności od tego, co

6:20wybierzemy w naszym formularzu i następnie po przecinku,

6:24to już jest proste. Dodajemy cały nowy element

6:29do odpowiedniej kategorii w naszym state'cie. Więc teraz, jeśli to

6:33wykonam, to teoretycznie w root'owym elemencie w state'cie, powinien pojawić

6:37się nowy element. Chwila prawdy i już

6:45go widzimy. Mamy go, więc teraz przetestujemy

6:50szybko pozostałe formularze. Sprawdźmy,

6:55że to działa i dodajmy, na wszelki wypadek, dwie notatki. Jak

7:07widzisz, mamy jeden artykuł, dwie notatki, jednego Twittera. Treści

7:12tego się zgadza i tym całkiem prostym sposobem, stworzyliśmy

7:17fajny system dodawania notatek do naszej aplikacji. Z takim globalnym state'em,

7:21który wykorzystamy w następnej lekcji, żeby w końcu podmienić ten napis,

7:26który nas tutaj straszy od początku tego działu i zróbmy

7:30w końcu te notatki. Niech ta aplikacja wygląda tak, jak trzeba. Niech będzie fajna,

7:34a tym samym będziemy powoli zbliżać się do finału tego kursu, gdzie wydeploy'uemy

7:39naszą aplikację.