React: Usuwanie elementów

16.8.x

0:00Cześć, udało nam się już wyświetlać nasze notatki w taki sposób na

0:04dashboard'zie, udało nam się też wyświetlać notatki w detalach, więc

0:08pozostały nam dwie rzeczy. Jedna mniejsza, a druga większa. Zacznijmy od tej mniejszej,

0:12czyli od usuwania notatek. Mamy już gotową akcje, która

0:18znajduje się w tym miejscu, jako

0:22remove item. Podajmy tutaj id tej notatki, więc

0:33praktycznie wszystko mamy gotowe, to co moglibyśmy teraz zrobić

0:37to zaktualizować nasz reducer, żeby

0:41to znowu zaczęło działać, ponieważ tutaj nam się id zmieniło na takie id, z podkreślnikiem i

0:45teraz jeśli klikamy to się usuwa tylko, że nadal w naszym backend'zie siedzą

0:50te notatki, więc co możemy zrobić, żeby móc je usunąć. Z naszej

0:55akcji możemy stworzyć sobie remove item

1:00request success

1:06failure i w ten

1:12sposób w naszym remove item przyjmujemy item type i id, a dodatkowo

1:16jeszcze przy pomocy thunk'a sobie bierzemy dispatch. W momencie

1:21kiedy ta akcja się odpala, dyspatch'ujemy sobie remove item request

1:30i dodatkowo robimy strzał do axios'a. Zerkniemy

1:38sobie, tu mamy akurat delete i podobnie jak w poprzedniej

1:42lekcji podajemy po prostu id po slash'u, więc teraz

1:46możemy zrobić axios delete  i po slash'u dodamy

1:50sobie tutaj id. Jeśli akcja została wykonana poprawnie możemy

1:56wysłać do naszego reducer'a remove item success. A jeśli

2:00coś się stało, wtedy

2:04robimy catch i możemy sobie wylogować błąd. Wracamy

2:11teraz do naszego reducer'a i musimy

2:16tutaj dodać remove item request i success. Z

2:21obsługą błędów jak zwykle nie będziemy się w tej lekcji zajmować, zostawiam to jako zadanie

2:25domowe dla ciebie. Teraz te nasze remove items success update'ujemy

2:32nasz state i teraz jeśli wszystko poszło dobrze, zerkniemy

2:37sobie jeszcze na nasze devtools'y, czy nie ma żadnych błędów. Jak kliknę na remove

2:42to powinno usunąć zarówno w naszej aplikacji, jak i w naszym backend'zie, okej

2:46i widzimy, że jest jakiś błąd związany z tym, że item type jest nie podane. Sprawdźmy

2:51sobie zatem czy tutaj nasz item type

2:58jest podawany. Teraz jak sobie klikniemy to powinniśmy zobaczyć przynajmniej

3:02początek tego co się wydarzyło. Okej, ale nic nie ma, w naszym reducerze

3:09na razie zakomentujemy to co było zwracane i zwrócimy po prostu state, żebyśmy

3:13mogli podejrzeć co za akcja tutaj zachodzi i widzimy,

3:17że coś jest nie tak z naszym url'em oczywiście. Dobra

3:25w tej chwili powinniśmy

3:30móc usunąć te notatkę po kliknięciu na remove

3:34i faktycznie ta notatka została

3:38usunięta. Problem

3:43jest tylko jeszcze taki, że i tak przechodzimy do niej po kliknięciu

3:47na remove, ponieważ remove znajduje się w styled wrapper. Więc

3:51zróbmy tak, że możemy przejść do natalki tylko po kliknięciu na górną część,

3:55nie na notatkę i nie na remove. Wystarczy, że przeniesiemy to

3:59do tego miejsca i teraz

4:07możemy przywrócić to co mieliśmy wcześniej, czyli update,

4:11związany z naszym state'em i w

4:17tym momencie jeśli nacisnę remove to powinniśmy nie przejść do notatki

4:21i usunąć notatkę, ale wygląda na to jakby item type, w ogóle nie

4:25było podawane do naszego reducer'a i w takiej sytuacji najlepiej cofnąć

4:29się o krok wstecz i zobaczyć co my tutaj robimy w ogóle. Wysyłamy

4:34item request, a okej, a item success to jest ta

4:38akcja, która obsługuje nam item type, więc tutaj musimy po prostu

4:42zrobić item success i w tym momencie już na

4:47pewno powinno to działać, uwaga wracamy. Roman, usuwamy cię

4:51i Roman co prawda usunął

4:55się, ale nie chciał zniknąć stąd, więc dodałem go jeszcze raz, bo

5:01jak sobie wejdziemy do naszej akcji to widzimy, że tutaj zwracamy then, po

5:05prostu return z obiektem. A my tutaj chcemy przecież dyspatch'ować

5:10rzecz, czyli musimy wrzucić cały ten obiekt do dispatch'a i dopiero

5:14wtedy faktycznie ta akcja zostanie zdyspatchowana. Na przyszłość, żeby

5:19tutaj już zapobiec temu tego typu błędom również

5:24sobie to zdyspatch'ujemy, okej i

5:29w tym momencie jak usunę Romana to powinien zniknąć naszej listy i tak

5:33się właśnie stało, więc udało nam się wprowadzić usuwanie naszych elementów. Została

5:38tylko ostatnia część, dodawanie ich i to zrobimy w następnej lekcji.