React: Tworzenie akcji usunięcia elementu

16.8.x

0:00Cześć, skoro udało nam się już skonfigurować nasze devtools'y to teraz możemy

0:04przejść do dalszej części naszej pracy i na razie nie zaczniemy dodawać

0:09naszych notatek. Zaczniemy od drugiej strony, czyli od usuwania. Jest to

0:13dużo łatwiejsze akcja do wykonania i mam już gotowy komponent, czyli nasz przycisk

0:17remove, który po prostu możemy nacisnąć i wykonać daną akcję. Natomiast dodawaniem

0:21zajmiemy się później, trzeba będzie stworzyć cały ten panel z prawej strony naszej

0:26aplikacji, więc to sobie zostawimy na deser, a na razie pokażę ci

0:30jak możemy połączyć akcje z naszym komponentem i podobnie jak miało to miejsce w

0:34przypadku łączenia danych z naszym komponentem przez mapStateToProps, tak

0:38tutaj mamy podobną funkcję, która nazywa się mapDispatchToProps, jest

0:44to funkcja, która zwraca nam metody,

0:49które możemy wykorzystać w naszym komponencie, które będą dyspatch'ować właśnie

0:53nasze akcje, później przekazywane do reducer'a, a następnie do store'a i z

0:58racji, że nasz komponent card jest uniwersalny. On na podstawie props'a

1:03Card Type, wie jakie rzeczy ma renderować, jaki ma mieć kolor

1:07i tak dalej, to posłużymy się też tym Card Type'm do dyspatch'owania

1:11akcji, bo będziemy przekazywać Card Type w payload'zie razem z id. Zaraz

1:15pokażę ci jak to zrobimy, najpierw stwórzmy sobie taką podstawową

1:19akcje, która pozwoli nam wykonać właśnie usunięcie notatki.

1:24Póki co jeszcze nie tworzyliśmy żadnych akcji w naszym kursie, więc

1:28teraz musimy stworzyć sobie nowy folder o nazwie

1:32Actions i w nim stworzymy sobie index js i tak

1:36jak mówiłem w poprzednich lekcjach, akcje to są zwykłe dość proste funkcje,

1:41które po prostu przyjmują typ i jakiś payload, więc teraz

1:45stworzymy sobie pierwszą akcje. Nazwiemy ją remove note

1:54albo nawet mam lepszą nazwę remove item, ponieważ to jest taka funkcja

1:58generyczna, ona tyczy się zarówno notatek, twitter'ów i artykułów, więc

2:02lepiej żeby nie było tutaj note, bo to mogłoby wprowadzać w błąd i teraz ta

2:07funkcja będzie przyjmować item type oraz id. Chodzi

2:11o to, że item type będzie definiował jaki element z jakiej tablicy

2:16czy spliterów czy z notatek czy z artykułów będzie trzeba usunąć, a id

2:20właśnie będzie definiowało, który dokładnie element trzeba wywalić z

2:24tego równania, więc teraz sobie zwrócimy to wszystko. Możemy

2:30to zrobić w taki sposób używając nawiasów okrągłych albo możemy zrobić

2:34to w ten sposób, zwracając po prostu obiekt

2:38i na pewno będziemy zwracać tutaj typ

2:43akcji, to będzie remove item i oprócz

2:47tego będziemy wracać payload, a w payland będziemy wrzucać item type

2:52oraz id. Okej, skoro

2:56nasza akcja już jest gotowa to teraz możemy wejść sobie do naszego reducer'a

3:01i tutaj też trzeba zrobić porządek. Na

3:05chwilkę sobie trochę powiększymy, żebyśmy mogli lepiej to wszystko widzieć, musimy

3:12tutaj stworzyć Switch Statement, który będzie identyfikował typ naszej akcji, więc

3:16musimy zrobić Switch Action Type, w ten

3:21sposób nasz reducer będzie wiedział jaka akcja do niego wpada i teraz w

3:25przypadku, jeśli action type to będzie remove item, no

3:32to już wiemy co robić i teraz wszystkie takie akcje w naszym reducerze

3:37zawsze zwracają nowy stan. On nie jest zmutowany w żaden sposób, on

3:41po prostu uwzględnia te zmiany, które my chcemy zawrzeć, więc w tym przypadku, jeśli

3:46my chcemy usunąć jakiś element z jednej z tablic, musimy

3:50zrobić coś takiego. Zwracamy obiekt, zwracamy

3:56nasz stan, który był przed wykonaniem akcji, a dodatkowo

4:01nadpiszemy sobie te tablice, która została

4:05w jaki sposób zmodyfikowana, jeśli mówię tablica to mówię albo notes albo articles

4:10albo twitters, bo to są właśnie nasze tablice, w naszym state'cie i teraz

4:15nie możemy tutaj wpisać po prostu twitters, ponieważ to jest dynamiczne, więc

4:19musimy użyć właśnie tego item type, które podałem w naszym

4:23action. Teraz możemy tutaj wpisać action payload item type

4:29i w ten sposób mamy dostęp do dynamicznych kluczy

4:33w naszym obiekcie state, a

4:37to nie będzie obiekt to będzie tablica i tutaj również musimy

4:41użyć spread operator'a i wybrać sobie też za pomocą dynamicznego klucza ten

4:46element naszego state'u, który chcemy modyfikować, w tym przypadku to znowu będzie action payload

4:50item type i żeby usunąć jakiś element

4:54z niego mając jego id, najłatwiej będzie po prostu użyć metody filter,

4:58która przyjmuje item i później porównuje sobie item

5:03id do action

5:07payload id. Jeszcze wrzucimy tylko Default Case,

5:12żeby linter się do nas nie czepiał,

5:16okej. I teraz jeszcze raz powoli

5:20wyjaśnię co my tutaj zrobiliśmy, zanim pokażę ci, że to faktycznie działa. Wprowadzamy

5:24sobie poprzedni state, który mieliśmy, żeby mieć pewność, że niczego nie nadpisujemy, następnie

5:30wybieramy sobie za pomocą dynamicznego klucza, czyli tego item type,

5:34które podaliśmy w tym miejscu. Teraz to będzie na przykład twitters, wybieramy

5:40sobie właśnie tę tablicę, którą chcę modyfikować, więc to

5:44możesz podmienić na cokolwiek co będzie podane do naszego action, czy to będzie notes

5:48czy to będzie twitters czy to będzie articles. Później wchodzimy sobie

5:52do tej tablicy konkretnej i tutaj również zwracamy

5:56nasz stan, ale jest on przefiltrowany i to co jest ważne to

6:01to, że filter nie mutuje nam tablicy, tylko zwraca nam nową tablicę,

6:05więc w tym przypadku mówimy

6:10state. Dostań się do czegokolwiek co my tutaj chcemy, powiedzmy,

6:15że to będzie twitters, czyli będzie tu state kropka twitters, przefiltruj nam

6:19twitter'y. Sprawdź każdy pod kątem id, jeśli któryś

6:23ma takie samo id jak to z elementu, który chcemy usunąć, to

6:28wywal ten element, który chcemy usunąć i zostaw wszystkie inne, które

6:32nie mają tego id, czyli to jest taka trochę odwrócona logika, bo my nie

6:36usuwamy konkretnego elementu tylko zwracamy wszystkie elementy, które nie mają

6:40takiego id jak podaliśmy. Okej, udało nam się tworzyć naszą

6:44pierwszą akcję i udało nam się stworzyć logikę, która teoretycznie powinna nam usuwać

6:48wybraną notatkę. W następnej lekcji podepniemy sobie to wszystko pod nasz

6:52komponent i sprawdzimy czy to faktycznie działa.