React: Wprowadzenie do Reduxa

16.8.x

0:00Cześć, zaczynamy nowy rozdział w kursie w którym opowiem ci jak

0:04działa redux, czym jest właściwie redux, po co go potrzebujemy w naszych projektach

0:08i najłatwiej, żeby to wytłumaczyć mogę pokazać to takiej bardzo

0:13prostej grafice, mamy tutaj póki co trzy takie główne komponenty w

0:17naszej aplikacji notes, twitters i articles. To są trzy osobne widoki,

0:21które póki co te wszystkie rzeczy, które wpisywaliśmy w nich, czyli

0:25to takie dummy data, te takie przykładowe notatki znajdowały się bezpośrednio

0:29w tych komponentach, natomiast od teraz chcemy wprowadzić coś

0:33co będzie takim centralnym repozytorium w naszej aplikacji, co będzie trzymać

0:38wszystkie rzeczy w jednym miejscu i to miejsce nazywa się z store'm

0:42i do stworzenia takiego stara potrzebujemy właśnie redux'a, czyli biblioteki

0:46do zarządzania tym datalayer jak to się nazywa w naszych aplikacjach

0:50i to w jaki sposób redux działa pokażę ci teraz na takiej

0:55nieco bardziej skomplikowanej grafice, ale mimo wszystko jest to naprawdę bardzo

0:59proste. Na początku może być to dość skomplikowane, żeby to zrozumieć

1:03jak to wszystko działa. Natomiast uwierz mi, jest to naprawdę mega, mega

1:07proste i w tym kursie pokażę ci właśnie jak to wszystko poukładać,

1:11żeby miało to ręce i nogi. Zacznijmy od tego, że mamy w aplikacji już ten store

1:15stworzony i on zawiera wszystkie informacje dotyczące notatek,

1:20które znajdują się w naszej aplikacji, więc z naszego store'a, do

1:24komponentu notes wysyłany jest aktualny stan. Powiedzmy, że mamy

1:28na przykład w nim trzy notatki. W komponencie notatek mamy

1:33później możliwość robienia z nimi różnych rzeczy, usuwania, dodawania

1:37edycji tych notatek i to wszystko nazywa się akcjami, akcje

1:43wysyłane są przez tak zwane Action Creators do reducer'ów i

1:47teraz uwaga. Czym jest reducer, bo to jest chyba takie najbardziej skomplikowane

1:51słowo w całym redux'ie. Reducer to nic innego jak taki kawałek dość

1:56prostej logiki, który identyfikuje akcje po jej nazwie, czyli na przykład add note dodaje

2:01notatkę taka akcja add note leci do reducer'a, reducer mówi okej,

2:05ta akcja dodaje notatkę. To co muszę zrobić to muszę wejść do stanu

2:09i dodać to co akcja mi wysłała, bo

2:13akcja zawiera właśnie wszystkie informacje o tych notatkach i w redux'ie

2:18właśnie jesteśmy zamknięci w takim trójkącie gdzie od store'a idziemy do komponentu.

2:22Wysyłamy tam różne dane. Z komponentu możemy wysyłać

2:26akcje, które zawierają jakieś modyfikacje, ale same nie mogą

2:30modyfikować niczego w naszym storze dlatego wysyłają te akcje dole do

2:34reducer'ów i dopiero reducer'y identyfikują te akcje i po identyfikacji

2:38mogą działać na naszym storze, ważne jest też to że nas

2:43store jest niemutowalny. Jeśli nie znasz jeszcze tego pojęcia to pokażę ci to później na przykładzie

2:47o co w nim chodzi, natomiast jeśli znasz to już teraz wiesz, że po prostu obiekty

2:51tablice, wszystkie rzeczy, które się znajdują naszym storze, nie będą mutowane,

2:56nie będą zmieniane tylko będą aktualizowane poprzez specjalne właśnie metody

3:00i póki co pewnie to wszystko może brzmieć jeszcze dość mogliście, ale

3:04wcale się tym nie przejmuj, bo teraz napiszemy naprawdę bardzo prosty store, który

3:08pokażę ci że redux tak naprawdę nie jest niczym skomplikowanym.

3:13Przejdźmy sobie teraz do Code Pena, do którego pobrałem

3:18sobie najnowszą wersję redux'a. Zauważ, że w

3:22ogóle nie importuje tutaj React'a, ponieważ redux wcale nie wymaga

3:26React'a do działania. Możemy to zrobić w zwykłym pliku js i on również wtedy

3:30będzie działał, więc pierwsze co sobie zrobimy to zaimportujemy sobie Create Store z

3:36naszego

3:41redux'a, właściwie nie zaimportujemy tylko wyciągniemy sobie, zdestrukturyzujemy sobie te

3:45funkcje. Teraz stworzymy const'a store, który

3:51właśnie wywoła nam te funkcje, ale tutaj się jeszcze nic nie wydarzy, ponieważ create store

3:56jako argument przyjmuje reducer, czyli

4:00właśnie tego, nazwijmy go takiego robota, który ma do niego wjazd i który

4:04może obsługiwać to co w tym storze się znajduje, więc

4:08teraz stworzymy sobie funkcje, która się nazywa my reducer i reducer'y

4:17zawsze przyjmują dwie rzeczy. State, czyli

4:21ten obecny state, który już istnieje oraz

4:27akcje, którą ma wykonać na naszym storze i tutaj jest jeden

4:31problem. Jeśli my podamy tutaj my reducer to state

4:35nie istnieje. W tym momencie nie mamy jeszcze żadnego state'u, nie

4:40wykonaliśmy żadnej akcji, a już podajemy state jako argument do funkcji

4:44create store, co możemy zrobić w takiej sytuacji, a możemy zainicjować

4:49nasz state, w taki sposób, stworzymy

4:55sobie obiekt, bo nasz store będzie obiektem i w

4:59naszym storze zrobimy sobie notes

5:04i to będzie pusta tablica po prostu utworzymy

5:08nam tutaj miejsce do którego później będziemy mogli dodać notatki. Jak

5:13już stworzymy sobie takiego const'a initial state, to dzięki

5:17składni ES6 możemy powiedzieć, że słuchaj jeśli state jest undefined,

5:22to wykorzystaj wtedy initial state, ta składnia

5:26w tym miejscu to jest dokładnie jak byśmy zrobili if type

5:30of state równa się defined to

5:35wtedy state równa się initial state, więc

5:40to jest taki skrót. jeśli go nie znasz, no to polecam, jest naprawdę fajny. Dlatego

5:44właśnie warto znać ES6 kiedy piszemy już w React'cie i w tych nowych technologiach,

5:48bo pełno jest takich skrótów, które pomagają nam po prostu w pracy, więc

5:52kiedy mamy już zainicjowany state, w momencie kiedy podajemy nasz reducer do creator store to

5:57teraz możemy sobie zobaczyć, co możemy zrobić z tym naszym storem. Tak

6:02jak już mówiłem do naszych reducer'ów możemy podawać akcje, które odpowiednio

6:07obsłużone mogą apdejtować nasz store, więc teraz stwórzmy sobie jakąś akcję.

6:11Nazwiemy ją note action i akcje zawierają

6:15przynajmniej dwie rzeczy, type i tutaj

6:20możemy teraz i na przykład Add Note oraz payload i payload

6:26to jest to co zawiera akcja, co chcemy przekazać do naszego store'a, w tym przypadku

6:30może być to na przykład tytuł i jakiś

6:36content i teraz w momencie kiedy stworzyliśmy już sobie nasz store tutaj, w

6:40tym miejscu to posługując się constem store mamy dostęp do

6:44kilku bardzo fajnych metod. Pierwszą z

6:48nich, którą chcę ci pokazać jest dispatch, dispatch

6:52służy właśnie do jak sama nazwa wskazuje dispatchowania akcji, czyli wysyłanie

6:57akcji do reducer'a i teraz zanim ją wyślemy to jeszcze

7:01taka krótka uwaga, bo możesz się zastanawiać dlaczego tu jest obiekt,

7:05dlaczego on ma klucz title i klucz content. Jest to po prostu kształt

7:09naszej notatki, więc to co podajemy w akcji qdd note to jest

7:14najzwyklejsza w świecie notatka w formie obiektu, którą pokazywałem

7:18ci już na przykład w komponencie twitter albo note,

7:22mam je tutaj title, content,

7:26tu mam jeszcze created i id, które na razie sobie omijamy, ale generalnie jest

7:31to po prostu najzwyklejszy kształt naszej notatki i to właśnie wysyłamy w payloadzie

7:36naszej akcji, więc teraz podajmy sobie dispatch'ujmy

7:40sobie naszą akcję Note Action i w

7:44momencie kiedy to zrobiliśmy, do reducer'a została podana nasza akcja

7:48i możemy ją sobie wylogować właśnie tutaj przygotowałem consol loga,

7:53który nam to pokazuje, a więc ta metoda dispatch może

7:57na początku wydawać się magiczna, bo jakim cudem to co pisaliśmy tutaj pojawia

8:01się nagle tutaj, ale właśnie o to w tym chodzi, że podając argument

8:05w postaci akcji do metody dispatch ta metoda dispatch

8:09wie co z nią zrobić ona po prostu wysyła to do redecer'a, mówi słuchaj mamy tutaj taką akcję

8:14co my z nią dalej robimy i to właśnie reducer jest odpowiedzialny

8:18za to co my dalej z nią zrobimy, ale o tym opowiem ci w następnej

8:22lekcji.