React: Dodawanie elementów

16.8.x

0:00Cześć, przyszła pora na ostatni etap budowania

0:04naszej aplikacji jeśli chodzi o łączenie backend'u z frontend'em, a mianowicie na

0:08dodawanie notatek. Wszystko mamy już praktycznie gotowe, dodatkowo

0:12przygotowałem tutaj strukturę funkcji add item. Wynika to z tego, że

0:16ona jest praktycznie identyczna, jak każda inna gdzie uderzamy do axios'a. Zostawiłem

0:21tylko te miejsca, które będą kluczowe do tego, żeby faktycznie ta funkcja

0:25dobrze wykonała swoje zadanie i żeby dodała notatkę i do naszego

0:29API i do naszego store'u. Jeśli sobie zerkniemy na nasz endpoint

0:34to on tutaj przyjmuje kilka rzeczy. Przyjmuje typ przyjmuje user id i przyjmuje

0:38cały content związany z naszą notatką, więc do user id

0:42wykorzystałem get state, które pozwala nam na wyciągnięcie user id z naszego stora. Dodatkowa

0:48item type jest podawany w tej funkcji i item content to jest cała reszta,

0:52którą musimy podać. Kiedy już wyślemy taką

0:56notatkę na nasz backend, dodajmy

1:00sobie jeszcze jakąś inną, to w odpowiedzi czyli w response'ie dostajemy coś takiego

1:04i to jest na nowo utworzona notatka, którą chcemy wykorzystać, żeby dodać

1:09ją do naszego stare'a. To dlaczego potrzebujemy tej nowej notatki

1:13z backend'u to fakt, że ona zawiera to id, po którym na przykład usuwamy czy pobieramy

1:17konkretną notatkę, więc teraz jeśli przejdziemy sobie do naszej funkcji i na

1:21razie sobie wylogujemy coś tutaj w tym miejscu, ale

1:26jeszcze nie będziemy dodawać żadnej notatki, okej

1:31i spróbujmy teraz odpalić sobie konsolę. A dodatkowo

1:36wpiszemy sobie jakąś notatkę i

1:50nasza

1:54notatka zostało utworzona, po czym możemy poznać po tym, że mamy status

1:58200 i dostaliśmy w odpowiedzi z naszego backend'u nowo

2:03utworzoną notatkę. Teraz jak odświeżymy sobie nasz komponent,

2:07to ta trzecia notatka zostanie zaczytana, więc ostatnie

2:12czego nam brakuje, to właśnie wyciągnięcie sobie data, a tutaj

2:17z tego miejsca i zdyspatch'owania tego data w

2:21naszym payload'zie. Teraz jak wrócimy sobie do naszych reducer'ów

2:25to mamy tutaj add item success, czyli dispatch'ujemy

2:30dobrą akcje, jeszcze dla pewności, pamiętając błędy z poprzedniej

2:34lekcji. Mamy dispatch add items success i wysyłamy payload data,

2:39add item success, poprzedni

2:44stan, dynamiczny klucz, żeby dodać notatkę do odpowiedniego miejsca. Później

2:49mamy, później mamy poprzedni stan związany z tymi notatkami w danej

2:54tablicy i dodajemy tutaj nową notatkę tylko nie payload item tylko payload data. W

3:00tym momencie wszystko

3:05powinno być podpięte już dobrze. Dodajmy

3:11sobie na przykład sarah_edo, czyli Sarah Drasner, dodajemy

3:19notatkę i mamy podobny przypadek jak w poprzedniej lekcji, że

3:23nic nam się nie dodaje. Dopiero po odświeżeniu widzimy efekt, czyli coś

3:28tutaj z tym reducer'em jest nie tak. Sprawdźmy czy podajemy do niego wszystko, co

3:32potrzebuje, w naszym payload podajemy data, on

3:36jeszcze potrzebuję item type, więc bez

3:40tego ani rusz okej i

3:46w tym momencie on dostaje i item type i data, więc powinien bez problemu dostać

3:50się do tego miejsca i spróbujmy jeszcze raz. Roman i teraz

4:00nasz Roman został dodany, więc to na tyle w tej części kursu. Mamy

4:04spięty backend z frontend'em. Oczywiście tylko na stronie twitters i większość

4:09komponentów jest uniwersalna, więc będzie to działać zarówno na articles, jak i na notes. Jednak

4:14nie spinałem tych widoków specjalnie po to żeby dać ci możliwość do

4:18tego żeby poćwiczyć po prostu łączenie jednego z drugim. Niech twitters

4:23będzie dla ciebie przykładem jak powinno to wyglądać.