React: Łączenie store z komponentem

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć nasz store, ale póki co

0:04nasz react jeszcze nie wie o tym, że mamy cokolwiek wspólnego z redux'em

0:08w tym projekcie. Wynika to z faktu, że jeszcze nie skorzystaliśmy z naszego pluginu,

0:13który zainstalowaliśmy, czyli React Redux, więc teraz postaramy się go

0:17zainstalować, żeby to zrobić musimy wykorzystać provider, który udostępnia

0:21nam właśnie React Redux i opleść naszą aplikację w store,

0:25który stworzyliśmy. Robimy to w taki sposób, że wchodzimy sobie do naszego root'owego

0:30widoku i tutaj musimy zaimportować provider z biblioteki React Redux. Następnie

0:38w tym miejscu, czyli jako najbardziej zewnętrzny element,

0:42oplatamy naszą aplikację i żeby

0:48to zaczęło działać musimy zaimportować jeszcze nasz store. Nasz store importujemy jako Export

0:52Default, więc możemy po prostu zrobić coś takiego jak import store from store

0:57z racji, że to jest plik index js, czyli nie musimy podawać

1:01jego nazwy w taki sposób i skoro już ten store pobraliśmy

1:05to jedyne co musimy zrobić to wpisać store i podać store,

1:09który zaimportowaćliśmy w tym miejscu. Okej i jeśli poprawnie

1:14to zrobiliśmy to teraz jeśli odpalimy sobie naszą aplikację, to ten

1:18console log, który mamy tutaj w reducerze w tej chwili, powinien się pojawić

1:22w naszym tutaj w naszej przeglądarce w konsoli i faktycznie mamy

1:27tutaj nasz console log, póki co nie zwraca żadnej akcji, która

1:32została podana, bo jeszcze żadnej akcji nie wykonaliśmy, więc skoro

1:36udało nam się poprawnie podpiąć nasz relax do React'a, to

1:40teraz możemy zacząć się nim trochę bawić. Przechodzimy więc do takiej

1:44najbardziej ekscytującej moim zdaniem części budowania aplikacji, czyli tego

1:48momentu kiedy interfejs łączy się z tym datalayer. Jest naprawdę fajne,

1:53że te komponenty, które z takim trudem tworzyliśmy nagle ożywają

1:57dzięki tym danym, które propagujemy po prostu w naszej aplikacji, więc

2:01to co teraz musimy zrobić to połączyć sobie jeden z naszych widoków. Załóżmy

2:06że będzie to twitters i wywalimy sobie to co mamy teraz

2:10tutaj w twitters albo zróbmy inaczej. Skopiujemy

2:14sobie te wszystkie dummy date'a, które tu mieliśmy. Po prostu całą

2:18te tablicę, żeby

2:23nie było tak, że jak wkleimy tutaj nasze twitter, to będzie tylko jeden ostatecznie. Niech

2:28będzie ich kilka. Ten błąd przez chwilę się będzie nam tutaj wyświetlał i teraz

2:33to, co chcemy zrobić to chcemy połączyć nasz widok twitters z naszym

2:37redux'em tak, żeby on wiedział co właściwie my chcemy tutaj wrzucić, czyli to twitters,

2:41żeby zaciągnąć z naszego store'a i żeby to zrobić będziemy musieli wykorzystać

2:46dwie rzeczy. Jedna związana z redux'em. Jest to mapStateToProps,

2:50jest to specjalna funkcja, która mapuje nam

2:54właśnie nasz state, które mamy w storze do props'ów, który podajemy

2:58do naszego komponentu. Drugą rzeczą jest Connect, który pozwala nam na

3:02to, że łączymy ze sobą te dwa osobne światy,

3:06czyli świat Redux'a i świat React'a, więc teraz spróbujmy sobie to zaimplementować

3:11i pokażę ci na naszym przykładzie jak możemy sobie ten State stąd wyciągnąć. To

3:17co musimy zaimportować to

3:21Connect z React Redux. Musimy

3:26teraz zadeklarować funkcję mapStateToProps, która

3:30przyjmuje State i która następnie

3:34zwraca nam obiekt z props'em, który zostanie podany do naszego

3:38komponentu, czyli musimy tego props'a jakoś nazwać. Nazwijmy go na przykład twitters i

3:43ten twitters będzie wyciągał sobie dane

3:47z naszego state twitters, więc musimy stworzyć

3:51sobie faktycznie const'a, w którym zdestrukturyzujemy twitters z naszego state'u

3:56i teraz z racji, że mamy tutaj klucz i wartość o takiej samej

4:00nazwie to możemy zastosować po prostu składnię ES6, która mówi,

4:04że jeśli klucz i jej wartość ma taką samą nazwę, to możemy po prostu stworzyć coś takiego

4:08i to jest temu równe, a skoro już jesteśmy przy takim ulepszaniu

4:13naszego kodu, to możemy zrobić jeszcze jedną rzecz. Po prostu wyciągnąć sobie

4:17z naszego store'a twitters i zwrócić twitters. Jeśli ES6

4:27nie jest jeszcze taką twoją super mocną stroną to jeszcze raz wyjaśnię te składnie,

4:31bo wygląda na dość enigmatycznie dla kogoś kto być może tak super dużo

4:35nie korzystał z tej składni. Tutaj podajemy funkcję

4:40strzałkową z której zdestrukturyzujemy sobie twitters, czyli

4:44jeśli nasz state, czyli nasz obiekt state zawiera

4:48klucz twitters, to możemy go sobie zdestrukturyzować wyciągając go

4:52właśnie w tym miejscu. To pewnie już wiesz i następnie

4:57w efekcie naszej funkcji zwracamy tutaj obiekt, który zawiera klucz twitters,

5:01a ten klucz twitters zawiera wartość twitters, czyli

5:05to co w tym miejscu sobie wyciągnęliśmy. Jeśli ta

5:09nazwa byłaby inna, na przykład my twitters, to tutaj również

5:14ten ta wartość byłaby my twitters i wtedy nie moglibyśmy

5:18skrócić tego obiektu, natomiast z racji, że importujemy sobie destrukturyzujemy

5:22sobie twitters z naszego store'a i ta

5:28nazwa jest dokładnie taka sama jak nazwa props'a, który chcemy podać do naszego komponentu, to

5:33możemy sobie to skrócić w taki

5:37sposób. Mam nadzieję, że teraz jest to dla ciebie w stu procentach jasne

5:41i to co musimy zrobić w tym momencie, to połączyć nasz

5:45komponent twitters z naszym mapStateToPropsm żeby

5:49to zrobić musimy użyć funkcji Connect w tym miejscu. Ona

5:54przyjmuje z jednej strony nasz komponent, a z

5:58drugiej strony mapStateToProps i w

6:03tej chwili nasz komponent został połączony z naszą funkcją mapStateToProps, która zwraca nam w

6:08props'ie nasze twitter'y. Wywalmy

6:12sobie na sekundę to co mamy tutaj w tym miejscu i w naszym komponencie twitters

6:16wyciągniemy sobie props'y i zróbmy z nich consol

6:21log'a. Chcę ci pokazać co się wydarzyło w momencie

6:26kiedy ta funkcja Connect została użyta. Musimy

6:33wejść sobie do naszego widoku twitters. Okej,

6:37coś tutaj poszło nie tak. Zaraz sobie zaczniemy to debugować. To

6:42jest właśnie urok tego kursu, że wpadamy na różne pułapki i możemy sobie je

6:46razem zweryfikować, co tam się dzieje. Spróbujmy

6:51w taki sposób. Okej, już widzę jeden błąd. Nie

6:56oplotłem tego console log'a w klamry, więc

7:00jakim cudem on miał niby działać. Dobra, sprawdźmy teraz naszego console log'a

7:05i widzimy, że

7:09na trzynastej linijce, czyli tutaj niżej state

7:13jest undefined, a tutaj w obiekcie mamy

7:18co prawda twitters, czyli ten obiekt został podany do props'ów, ale

7:22on również ma undefined, no bo podaliśmy tutaj nasz state, więc

7:26coś z tym state'em jest nie tak i przejdźmy sobie może po kolei to

7:31jak tworzy się nasz store, bo wydaje mi się, że może gdzieś zrobiłem jakiś

7:35błąd w moim

7:39storze, otworzę sobie

7:43tutaj store, za pomocą tej funkcji, podaj reducer, a reducer

7:48jest odpowiedzialny za tworzenie takiej inicjalnej wersji store'a, bo jest podawany

7:53do tego, do tej funkcji Create Store, więc to od niego powinien

7:57ten State wyjść,a my go tutaj nie zwracamy. Przecież

8:04jeśli nie zwrócimy naszego state'u do naszego stora, no

8:08to skąd ten store twitters miałby cokolwiek wiedzieć. Już widzimy,

8:12że zniknął nam undefined, więc chyba trafiłam w dziesiątkę. Dobra,

8:17to teraz na szybko twitters, wyciągamy

8:21z naszego state'u i zwracamy twitters. Wchodzimy

8:29do props'ów naszego komponentu, bingo i mamy nasze

8:33twitter'y, więc teraz sobie odkomentujemy to,

8:37co mieliśmy w tym miejscu. Wywalimy console log'a, wywalimy

8:41fragment, bo już nam nie jest potrzebny. Ten fragment wrzuciłem tylko po to, żeby

8:45po prostu nam w prettier nie formatował tego na jedną linijkę. Tutaj

8:51spokojnie możemy sobie wyciągnąć twitters, bo żadnego

8:55innego props'a w tym komponencie nie używamy i jak widzisz nasze

9:01to twitter'y zostały zaczytane, ale tym razem wzięły

9:05się one z naszego redux'a z naszego stare'a, więc udało nam

9:10się podpiąć store pod nasz pierwszy widok i teraz twoim zadaniem będzie

9:14dodanie tego samego do articles i do notes. Spróbuj połączyć to

9:18wszystko razem. Wywal te dummy data stąd, bo już

9:22nie jest to potrzebne. Możesz przenieść te obiekty, jeśli chcesz mieć także kilka notatek

9:26na notes'ach i na articles. To możesz przenieść tutaj do reducer'a, a

9:30w następnej lekcji pokażę ci co możemy zrobić, żeby w na przyszłość

9:34debugować naszą aplikacje w trochę bardziej cywilizowany sposób. No, bo używanie

9:39wszędzie console log'ów nie jest chyba najbardziej wygodną drogą, którą moglibyśmy

9:43obrać. Także wszystko przed nami następnej lekcji.