React: Konfiguracja React Redux

16.8.x

0:01Cześć, w tej lekcji i zainstalujemy i skonfigurujemy sobie redux'a, ale

0:05zanim to zrobimy chciałbym ci pokazać jaki progres poczyniła nasza

0:10apka, a właściwie ja w niej poczyniłem, między naszymi działami, czyli zatrzymaliśmy

0:14się w miejscu gdzie mieliśmy dashboard z różnymi notatkami, ale jak wchodziliśmy

0:18do notatki to nie było nic widać i to było twoje zadanie, żeby ją ostylować.

0:23Oczywiście, jeśli nie masz ochoty tego robić, może skopiować kod z tej lekcji,

0:27więc teraz odpalimy sobie, więc

0:32teraz odpalimy sobie nasz Development Server i zobaczymy

0:36jak wygląda apka w tej chwili. Jeśli

0:55wejdę teraz sobie w dowolną notatkę, to wygląda ona w ten sposób. Każda

1:01notatka z naszych widoków dostosowuje się do tego co

1:06powinna zawierać i jak powinna wyglądać. Zauważ, że twittery na przykład mają avatar, notatki mają

1:11dodatkowy link do otwierania artykułów, a nasze notatki

1:15są takie super proste. Oczywiście ciągle otwiera się ta sama notatka,

1:19ponieważ jeszcze nie mamy wdrożonej logiki związanej właśnie ze store'em. Tym zajmiemy

1:23się w tej części kursu. Natomiast te wizualną część już mamy za sobą. Teraz

1:28pokażę ci w kodzie jak to wygląda. Pojawiły

1:37się takie dwa duże bloki kodu, jeden to details page i

1:48details page

1:55to jest taki pseudo inteligentny komponent, który po prostu rozpoznaje na

2:00jakiej ścieżce jest i na tej podstawie wie jaki Page Type przekazać

2:04do template'u, żeby ten mógł dostosować właśnie wygląd tego co

2:08zawiera strona. W ten sposób jeśli wejdziemy

2:12sobie do naszego głównego root'owego widoku to zobaczymy,

2:16że mamy tutaj jeden komponent odpowiadający za wyświetlanie

2:21detali każdej z notatek, czy to taki zwykłej notatki czy

2:25artykułu czy twittera. Jest to tyle fajne, że zaoszczędziliśmy trochę kodu, nie musieliśmy

2:29pisać trzech różnych stron dla trzech różnych typów notatki. Natomiast

2:37ten kod wymaga na pewno jeszcze kilku usprawnień, ale to

2:41już ci pokażę w dalszej części kursu, bo chcę ci właśnie też pokazać jak możemy iterować

2:46na tym naszym kodzie, jak możemy go ulepszyć. Na pewno to nazwałbym spaghetti

2:50kodem, jeśli widziałbym coś takiego w Code Review. To prawdopodobnie by to nie przeszło. Na

2:54pewno są lepsze sposoby na zrobienie tego i właśnie takie pokazywanie

2:58często błędnych podejść jest też fajne, bo dzięki

3:03temu możesz zrozumieć co można zrobić łatwiej, lepiej, może

3:07nieco bardziej skutecznie. Zerknijmy sobie teraz na details

3:11template i tutaj mamy jak zwykle sporo styled-components.

3:18Natomiast on po prostu wyciąga sobie wszystkie props'y związane

3:23z wyświetlaniem notatki, na podstawie Page Type ustala, co

3:28ma wyświetlić i właściwie to jest już cała filozofia. Tak

3:55więc wszystko co związane z wyświetlaniem notatek mamy już zrobione. Nie mamy jeszcze

3:59modułu, który pozwala nam na dodawanie tych notatek, tutaj z prawej strony

4:03będzie mieć taki komponent. Natomiast on się pojawi też w tym dziale, ale

4:07za kilka lekcji. Na razie skonfigurujemy sobie naszego redux'a i pierwsze

4:12co musimy zrobić to zainstalować w naszym projekcie redux'a

4:17i React Redux. Okej,

4:28mamy to już zainstalowane. Podstawy redux'a pokazałem ci już w poprzednich lekcjach. Natomiast React Redux

4:34to jest taki łącznik między React'em a redux'em, który właśnie pozwala

4:38nam na przykład integrację naszego store'a z komponentami, które wykorzystujemy

4:43w React'cie, więc teraz posłużymy się trochę dokumentacją. Chcę ci też pokazać

4:47jak możemy się po niej poruszać i dzięki niej stworzymy sobie nasz store. Pierwsze

4:52co zrobimy to stworzymy sobie folder store, w którym

4:58stworzymy plik index js. I teraz

5:02jak zerkniemy sobie na naszą dokumentację, to możemy sobie skopiować

5:07ten kod i teraz tak jak już pamiętasz, nasz Create Store

5:11potrzebuje jednej rzeczy, a mianowicie reducer'ów i reducer'y też

5:16stworzymy sobie w osobnym folderze. Nie zdziwi cię pewnie nazwa, my

5:20nazwiemy go reducers. W nim stworzymy sobie indeks js,

5:25który będzie zawierał taki tak zwany root reducer dla

5:29naszego root reducer'a musimy stworzyć sobie jeszcze initial state, który

5:36zostanie pobrany w momencie tej właśnie inicjalnej takiej

5:40próby odpalenia stare'a, który, który jeszcze będzie istniał i które nie będzie miał żadnych danych,

5:44więc teraz stworzymy sobie coś co będzie przypominało trochę nasze dummy data

5:48i tak oczywiście później nie powinniśmy już tego robić bo store teoretycznie powinien

5:53być pusty. Zwłaszcza jak będziemy sobie zaciągać dane z API, ale na razie

5:57zrobimy to tylko po to, żeby móc wyświetlać po prostu jakieś elementy. Ok

6:02i ten initial state teraz możemy sobie podać tutaj. Puścimy jakiegoś

6:07console log'a, żeby zobaczyć co się będzie działo w momencie jak będziemy dispatch'ować jakieś

6:11akcje i teraz przejdźmy sobie do naszego store'a. Możemy

6:16tutaj zaimportować nasz reducer. Z racji, że jest to Export

6:21Default to możemy zaimportować to z jakąś inną nazwą. Na przykład notes app

6:25i podać go w tym miejscu i w

6:30tym momencie nasz store został utworzony. W następnej

6:35lekcji postaramy się zrobić coś, żeby zmienić jego stan albo chociaż

6:39wyświetlić to, co w sobie zawiera.