React: Jak działa reducer

16.8.x

0:00Cześć, w poprzedniej lekcji na code pen'ie udało nam się stworzyć taki

0:04bardzo prosty store, w którym zaczęliśmy dodawać akcje,

0:08które z kolei przechodzą do reducer'a, który z kolei modyfikuje

0:12nasz store, a przynajmniej powinien modyfikować, bo na

0:17razie zatrzymaliśmy się na consol log'u, który właśnie loguje nam to, co

0:21znajduje się w naszej akcji. Teraz zanim przejdziemy do dalszego

0:25kroku, czyli do modyfikacji naszego store'a, to jeszcze takie krótkie podsumowanie co

0:29po kolei tutaj się dzieje. Przede wszystkim zaimportowaliśmy sobie metodę create store,

0:33którą wyciągnęliśmy z redux'a, stworzyliśmy sobie consta store,

0:39w którym właśnie ją wykorzystujemy, jako argument podajemy reducer,

0:43który jest funkcją przyjmującą state i akcje,

0:47state na samym początku kiedy tworzymy te funkcje nie

0:51istnieje, dlatego musieliśmy podać initial state, żeby zapobiec

0:56błędom i kiedy już reducer wie, że w razie gdyby było

1:00tego state'u to sobie może to zaciągnąć, to zaczyna działać bardzo dobrze, przy

1:04następnych akcjach, które będą do niego podawane kiedy ten state

1:08już będzie istniał on będzie oczywiście brał ten bieżący state, który wyciągnie sobie

1:12za stare'a, a nie ten, który my tutaj ustworzyliśmy, więc to co tutaj się znajduje

1:16jest tylko na ten pierwszy inicjalny raz kiedy reducer się

1:20odpala i jest podawany właśnie do naszego store, następnie

1:26stworzyliśmy sobie akcje, która zawiera typ add note, konwencją

1:31jest na nazywanie akcji właśnie w taki sposób, z podkreślnikami, czyli

1:35tak zwany Snake Case i właśnie wielką literą pisane wszystko i drugim

1:40kluczem w naszym Note Action jest payload, czyli też właśnie zgodnie

1:44z konwencją zawartość tego co chcemy przekazać do store'a, to co my

1:48chcemy tutaj dodać i właśnie skoro na story przetrzymuje notatki to payload'em

1:53naszego Note Action, który zresztą nazywa się add note będzie nic innego

1:57jak prosta, bardzo prosta notatka, ale żeby wysłać

2:01tą notatkę do naszego stare'a musieliśmy wykorzystać metodę dispatch, dispatch

2:06to jest właśnie metoda, która przyjmuje jako argument nazwę akcji, którą mamy wysłać

2:10do naszego reducer'a i kiedy już się dowie jaką akcję mam wysłać to właśnie

2:14dobrze się tym zajmuje, wysyła te akcje, ona jest podawana tutaj w naszym reducerze

2:19jako drugi argument i możemy zrobić z nią naprawdę wiele na

2:24razie ją tylko wylogowaliśmy, ale to co chcemy naprawdę tutaj zrobić

2:28to sprawdzić czy Action Type to

2:34Add Note, w ten sposób konfigurujemy

2:38nasz reducer. Mówimy słuchaj, jeśli ta akcja będzie dodawanie

2:43notatek, to ma zrobić bardzo konkretną rzecz. Masz

2:47zwrócić nam nowy state i oczywiście, nie sztuką byłoby

2:51zwrócić tutaj obiekt z nową notatkę, ale my przecież chcemy, żeby

2:56każda notatka, którą dodajemy do naszego store'u zostawała w nim do póki my jej sami

3:00nie usuniemy, więc nie możemy zrobić po prostu czegoś takiego, że zwrócimy

3:04w naszym reducerze action kropka payload.

3:09A zresztą możemy to zrobić

3:13teraz i pokażę Ci jaki byłby tego efekt. Przede wszystkim taka akcja

3:17nic tam nie da, bo tutaj będzie mieć syntax error, nie możemy w taki sposób wykorzystać kropki,

3:21więc mamy dwa wyjścia albo otworzymy sobie const'a, z którego

3:27wyciągamy sobie payload, w taki sposób naszej akcji albo

3:32możemy zrobić to od razu tutaj do destrukturyzując nasz argument payload

3:38i type potrzebujemy, ponieważ type podajemy tutaj w tym miejscu, w naszym

3:42warunku, więc jeśli type jest add note to zwracamy payload i teraz

3:48to powinno działać i żeby

3:53podejrzeć to, co znajduje się w naszym storze w danej chwili, możemy wykorzystać kolejną

3:58bardzo fajną metodę, nazywa get state, ale

4:02żeby podejrzeć co w niej jest, a właściwie co nam zwraca no to musimy to wrzucić

4:06w console log'a i naszym oczom

4:10ukazał się taki oto obraz. Mamy tutaj payload, który wrzuciliśmy

4:14w naszej akcji. Problem jest taki, że jeśli stworzymy sobie drugą

4:19akcje, na przykład Note Action

4:232, wrzucimy tutaj dwójki żebyśmy się zorientowali,

4:28która jest która i zdispatch'ujemy drugą,

4:32czyli tak naprawdę chcielibyśmy tą akcję tutaj dodać kolejną

4:36notatkę do naszego store'a, ale utrzymując tę pierwszą też, bo tak powinny

4:41działać te akcje, ale tak naprawdę to co się wydarzy to

4:46w naszym storze zostanie zachowana tylko ta druga notatka, wynika

4:50to z tego, że nawet jeśli nawet zidentyfikujemy sobie tutaj naszą

4:55akcję to nadpisujemy cały nasz store nową

4:59akcją, która przyszła. Nie patrzymy w ogóle na to co bierzemy sobie

5:03tutaj jako argument do naszej funkcji w reducerze, a nie

5:08bez powodu przecież nawiązujemy do naszego state'u, bo chcemy stworzyć taką logikę, która

5:12będzie łączyć poprzedni state, który istniał przed wywołaniem jakieś

5:16akcji, z tym payload'em, który przyszedł w nowej akcji i z

5:21racji, że nasz state wygląda w taki sposób, że mamy tutaj zagnieżdżony klucz

5:26notes, który jest pustą tablicą to również tutaj musimy

5:31przygotować taką notację, czyli jeśli chcemy dodać notatkę to

5:35musimy powiedzieć słuchaj zwróć mi tutaj tablice

5:40notes, która będzie zawierać state notes, czyli

5:44te wszystkie notatki, które do tej pory istniały w naszym state'cie, a jako

5:48następną notatkę dodaj mi payload, czyli tę nową

5:52notatkę, która przyszła z naszą akcją i jak

5:57widzisz teraz obie notatki pojawiły się w naszym state'cie,

6:01problem jest niestety taki, że przy takiej notacji tablice

6:06będą nam się ciągle zagnieżdżać. Wynika to z tego, że dodajemy tablice do

6:10tablicy do tablicy do tablicy i w efekcie mamy na przykład takie

6:14coś jak tutaj, więc przy każdej operacji na naszym

6:18storze musimy spłaszczać te tablice za pomocą spread operator'a, a

6:22możemy to zrobić najprościej po prostu wykorzystując spread

6:26operator na całym naszym state'cie związanym z notatkami i teraz jeśli

6:31sobie zobaczysz tutaj na naszego consol log'a to mamy jedną tablicę zawierającą dwa

6:35obiekty, czyli to co chcieliśmy uzyskać.