React: Dodawanie notatek

16.8.x

0:00Cześć, udało nam się stworzyć panel, który pozwoli

0:04nam dodawać nowe notatki, więc teraz zajmiemy się tworzeniem akcji, która pozwoli

0:08nam właśnie wykonać to wszystko, te wszystkie operacje i zrobimy

0:12to sobie pliku index.js w folderze Actions

0:16i żeby dobrze to skonstruować, to zerknij my sobie

0:21na chwilę na nasze details page i tutaj

0:28mamy przykładową notatkę. Możemy ją sobie skopiować, wrzucimy

0:34sobie ją na razie tutaj w formie komentarza, żebyśmy nie zapomnieli co tutaj mamy. Możemy

0:39sobie skopiować też akcje remove item, nazwiemy

0:45ją add item i

0:56podobnie jak poprzednia akcja, również będzie zawierać item type, będzie

1:00zawierać id i trzecią rzecz, którą tutaj sobie wrzucimy to item

1:05content i to będzie obiekt, który będzie po prostu podawany

1:09do tej funkcji. Dodatkowo myślę jeszcze, że to id

1:13nie do końca powinno być podawane do tej funkcji. Jest

1:18generalnie pewnie mnóstwo pomysłów na to jak można by było to rozwiązać, ale

1:22my na razie stwórzmy sobie taki najprostszy, najbardziej łopatologiczny na potrzeby

1:26tego kursu czyli stworzymy sobie funkcję która będzie po prostu

1:31nam generować id i teraz tutaj di id możemy podawać po

1:36prostu get id i zaraz zobaczymy czy

1:40to faktycznie będzie działać. Drugą rzeczą, którą musimy sobie zrobić to pójść do naszego

1:44reducer'a i zadeklarować mu, że słuchaj,

1:48jeśli będzie taki case, że robimy add item, to

1:56musisz zrobić kilka rzeczy dla nas. Przede

2:01wszystkim wprowadzić state taki jaki był. Tutaj wszystko się zgadza,

2:05tutaj to zostawiamy, ponieważ również wchodzimy do jakiejś konkretnej tablicy i teraz

2:09w tym miejscu musimy stworzyć dwie rzeczy. Pierwsza

2:14to state action payload item type,

2:20a druga to dodamy

2:24po prostu do tego state'u, który tutaj się znajduje, nasz obiekt i możemy

2:28go tutaj wrzucić wpisując po prostu action payload item

2:33content. Teraz otworzymy sobie nasze redux'owe dev tools'y

2:38i podepniemy

2:44sobie do naszego komponentu w tym miejscu mapDispatchToProps,

2:49który nam pozwoli na wykonanie tej akcji po kliknięciu add note czyli

2:57teraz musimy zaimportować sobie Connect z naszego React Redux,

3:02stworzyć

3:08tutaj Connect, który łączy nam nasz

3:14komponent opleciony Higher Order Component, a dodatkowo

3:23damy sobie mapDispatchToProps, podajemy

3:29oczywiście dispatch, zwracamy obiekt

3:35i podobnie jak wcześniej podajemy to jako nasz drugi argument,

3:40zaimportujemy teraz sobie naszą akcję, która

3:45się nazywa add note i podobnie jak wcześniej musimy ją nazwać

3:50add note action, żeby uniknąć błędów z ESlinta i

4:00nasza

4:04akcja przyjmuje item type i

4:08item content, okej. Dostaliśmy błąd, że nie wyeksportowaliśmy sobie naszej

4:12akcji. Wyeksportowaliśmy

4:17tylko import jest zły, add

4:22item, a nie add note, dobra i teraz

4:27zanim cokolwiek dodamy dynamicznie to spróbujmy sobie w naszym button onclick

4:33podać po prostu te

4:39funkcję, którą tu podaliśmy, czyli add item, nie wiem czemu się

4:43tak uparła na to add note i jako

4:48parametry podajemy page context oraz obiekt

4:52zawierający dane, więc możemy tutaj dać title, mniejsza

4:59o to co to przekazujemy. Teraz sprawdźmy czy ta

5:03akcja wywoła się poprawnie jeśli dodamy coś do naszego form'a

5:08tutaj, a nie właściwie nic nie musimy dodawać, bo wystarczy że klikniemy add note

5:13i coś się powinno wykonać, okej, widzimy, że mamy siedem notatek

5:17i przychodzi kolejne, kiedy klikamy add

5:21note, czyli nasza akcja wykonuje się poprawnie. Co więcej zawiera dokładnie to, co chcieliśmy,

5:25żeby zawierało. Widzę tylko, że brakuje mu tutaj id i to wynika z tego, że to id

5:30faktycznie podajemy w naszej funkcji, ale nic więcej się z tym nie dzieje, więc to co moglibyśmy

5:34zrobić, to może stworzyć tutaj item, do

5:38którego podamy sobie nasze id w postaci get id

5:44oraz za pomocą Rest

5:49operator'a wprowadzamy item content, w ten

5:55sposób on nie powinien być tutaj dodawany jako osobny obiekt,

6:00tylko właśnie połączone w jeden obiekt z tym id zamknięty w tym

6:04obiekcie. Tylko teraz jak zmieniliśmy to na item to musimy jeszcze w naszym reducerze zmienić

6:11tutaj jedną rzecz, action payload item. Dobra

6:19odpalmy sobie nasz tamtab i lecimy. Zobaczmy

6:25czy teraz dostaliśmy notatkę z id, tak

6:30się właśnie stało i te notatki faktycznie są unikalne, raczej

6:35nie wpadniemy na taki problem, żeby one stały się takie same i

6:39skoro nasza akcja się wykonuje i nasz formularz jest gotowy, to teoretycznie możemy

6:43sobie teraz przejść do faktycznego dodawania tego, co tutaj się

6:47znajduje w naszym formularzu. Zauważ jeszcze, że odróżniłem w twitterach tytuł

6:55od twitter name. Wynika to z tego, że te tytuły faktycznie fajnie jakby zostały takie custom'owe,

6:59że można sobie wpisać co chcemy, a dopiero twitter name się zmienia, bo

7:04twitter jest tak naprawdę potrzebny tylko dlatego, żeby ten avatar dobrze wyglądał,

7:08więc to sobie zostawmy w taki sposób, rozdzielone i teraz wpadł

7:12mi do głowy naprawdę szalony pomysł. Ponieważ ja zawsze pracy korzystałem

7:17z React final form'a, czyli takiej paczki, biblioteki do obsługi

7:21formularzy w React'ie, ale z jednej strony, ale z jednej strony

7:25jest on dość skomplikowany, a z drugiej strony fajnie by było żebym pokazał

7:29ci jak pracuje z jakimiś bibliotekami, których jeszcze nie znam, bo to jest część

7:33pracy deweloper'a żeby po prostu od zera z czymś się zapoznać i teraz

7:38zrobię to na twoich oczach, skorzystamy z Formica. To jest druga bardzo

7:42fajna biblioteka do formularzy, niemniej nigdy jej nie używałem,

7:46ale wygląda całkiem fajnie. Spróbujmy ją wykorzystać w naszym formularzu w tym miejscu.