React: Usuwanie elementów ze store

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć prostą akcje, która będzie usuwać wybrany

0:04element z naszych notatek czy to będą notatki czy twittery czy artykuły, to

0:08nie ważne, ponieważ mamy tutaj dynamiczny klucz, który podajemy w naszym reducerze,

0:13w tym miejscu, więc teraz to wszystko podłączymy do naszego

0:17komponentu card, który powinien zajmować się właśnie usuwaniem tych

0:21notatek z racji, że ma tutaj swój button remove, więc teraz użyjemy

0:26sobie znanej ci już biblioteki React Redux i zaimportujemy z niej Connect,

0:31a dodatkowo

0:37do naszego komponentu zaimportujemy sobie naszą akcję, która nazywa się remove item. Znajduje

0:44się ona w Actions i teraz to, co musimy zrobić, to

0:48użyć Connect w taki sam sposób, jak ostatnio używaliśmy do mapStateToProps

0:53i teraz to co jest ważne w Connect to to, że ta

0:57funkcja przyjmuje normalnie dwa argumenty. Pierwsza to mapStateToProps,

1:01a druga to

1:05funkcja, której teraz potrzebujemy, czyli mapDispatchToProps, oczywiście

1:10musimy ją utworzyć. Z tym, że nie potrzebujemy tutaj w tym komponencie mapStateToProps,

1:14ale żeby Connect wiedział że podajemy to mapDispatchToProps

1:19jako drugi argument, to musi być drugi argument to ten pierwszy musi

1:23się pojawić i skoro tutaj nic nie podajemy to możemy po prostu podać

1:27null'a. Żadnej krzywdy nam to nie zrobi, a w ten sposób Connect będzie wiedział, że podajemy

1:32akcje do dyspatcho'owania w naszym storze i teraz oczywiście musimy

1:36sobie stworzyć mapDispatchToProps i teraz

1:40podobnie jak mapStateToProps przyjmował state jako nasz parametr

1:45w tym miejscu, bo state został podawany później do naszej

1:49funkcji mapStateToProps przez Connect, tak samo Connect pozwala

1:53nam na podanie tutaj do naszej funkcji czegoś co się nazywa dispatch i

1:58dispatch to jest po prostu metoda, która pozwala nam na dyspatch'owanie

2:03funkcji do naszych reducer'ów i nasz mapDispatchToProps będzie

2:07zwracać obiekt, w którym musimy sobie stworzyć klucz. Ten klucz będzie

2:11nazwą funkcji, którą podamy tutaj do naszego button'a na onclick, więc

2:16na razie zrobię ją nieco inną niż docelowo będę

2:20chciał, tylko po to, żeby coś ci pokazać pokazać żeby ci się nie myliłp, więc

2:24teraz zrobimy sobie tutaj na przykład my function, nasza

2:30funkcja może przyjmować argument a i argument b. Zaraz

2:36to wszystko stanie się jasne, nie martw się i ta

2:42nasza funkcja będzie zwracać nam dispatch, w którym

2:47wywołany sobie zaimportowane remove item i nasze

2:54remove item przyjmuje dwa argumenty, item type

2:58i id, więc te argumenty, które zostaną podane

3:02do my function mogą nam posłużyć jako argumenty w naszym

3:07remove item. Oczywiście, żeby nam się to nie myliło i żebyśmy

3:11wiedzieli co podajemy, to wszystko powinno nazywać się tak samo. Czyli ta funkcja,

3:15którą wykorzystano w naszym JSX'ie również powinna nazywać się remove item, chociaż

3:19to nie jest to, co tutaj wywołujemy. To jest po prostu nazwa naszego props'a i podobnie

3:24nazwy naszych argumentów też powinny być takie same, czyli item type i id. Mam

3:30nadzieję, że to jest dla ciebie jasne, jak to działa i zaraz pokażę ci, że to faktycznie działa.

3:35Przenieśmy się teraz do naszego JSX'a i jak

3:39już wiesz funkcja Connect pozwala nam na dodanie właśnie

3:44tego co tutaj stworzyliśmy do naszego JSX'a, więc remove item stało

3:48się po prostu naszym props'em, który jest funkcją. Po

3:53przecinku możemy sobie zdestrukturyzować nasze remove item, żeby nie pisać this props

3:57remove item, tylko samo remove item. W naszym button'ie,

4:02na kliknięcie, wywołany

4:06sobie właśnie nasze remove item, ale z racji, że remove item przyjmuje

4:10dwa argumenty, id i card type, w naszym przypadku, to

4:14musimy tutaj stworzyć funkcję strzałkową, która zwraca nam dopiero naszą

4:19funkcję, którą chcemy wykonać po kliknięciu. Ta składnia powinna być ci znana

4:23już z poprzedniego kursu, więc nie będzie, nie będziemy się przy niej dłużej zatrzymywać i

4:27tutaj props type nazywa się inaczej niż item type, ale

4:32wiemy, że jakby nazwa, którą tutaj podajemy jest dokładnie taka sama. W

4:36następnej lekcji zaczniemy już powoli uściślać to jak

4:40nazywa się ten props i skąd go będziemy pobierać, ponieważ zastosujemy sobie context w całej

4:45naszej aplikacji, w celu właśnie podniesienia readability, czyli

4:49czytelności naszego kodu, ale teraz podajemy po prostu do remove item card type

4:54oraz id. Jeśli wszystko dobrze zrobiliśmy, jeśli

4:59to remove item zostało podpięte do stare'a. Jeśli te parametry się zgadzają

5:03tutaj, to po kliknięciu na remove nasz Hello

5:07Roman powinien zniknąć i tak

5:12właśnie się stało. Jeśli po poprzedniej lekcji udało ci się podłączyć pod store

5:16pozostałe widoki, to tutaj również będzie to działać i możemy

5:21sobie usunąć wszystkie notatki w naszej aplikacji i to

5:25teraz. No i teraz musimy zacząć je dodawać, więc tym zajmiemy się powoli

5:29w następnej lekcji. Jeszcze czeka nas tylko drobny refaktoring, który podniesie

5:33jakość kodu naszego projektu, ale zanim skończymy te lekcje,

5:37to tutaj jeszcze taka drobna uwaga, bo wiadomo, że każdy popełnia błędy.

5:42Ja właśnie jeden popełniłem i na szczęście mamy ESlinta, który mi o tym

5:46powiedział, że nie możemy mieć zadeklarowanego remove item dwa razy w

5:50tym samym pliku, mimo że jest to jakby w innym scope'ie, więc tutaj

5:54importujemy sobie remove item, a tutaj sobie destrukturyzujemy remove

5:58item, czyli tak naprawdę tak jakbyśmy stworzyli sobie właśnie osobnego consta, więc

6:03musimy te akcje nazwać inaczej, ale ona z kolei jest

6:07eksportowana jako named export, więc nie możemy nazwać jej

6:11podobnie jak importowaniu default'owych ekspertów jakkolwiek. Natomiast,

6:15mamy coś takiego jak has i wtedy możemy zrobić remove item has

6:19remove item action, czyli importujemy remove item, ale

6:23pod tą nazwą. Teraz jedyne, co musimy zrobić to podmienić ją w tym miejscu i wszystko

6:30działa i to tyle, ESlint się od nas odczepił, mówię

6:40jeszcze tylko, że nie walidujemy sobie tego w naszym

6:44prop types, więc szybko to naprawmy. Okej,

6:56jesteśmy gotowi do dalszej pracy.