React: Pobieranie danych z backendu

16.8.x

0:00Cześć, z racji, że nasz user id już siedzi

0:04w naszym storze, to teraz możemy pobrać sobie konkretny typ notatek do

0:08konkretnego widoku i zrobimy to też za pomocą redux'a, generalnie

0:12mechanizm będzie taki, że wchodząc na jakieś widok po raz pierwszy pobieramy

0:16sobie notatki do redux'a, do store'a i później już z tego store'a

0:20to serwujemy. Wejdźmy sobie zatem na przykład do twitter'ów i stwórzmy

0:24logikę, która będzie za to odpowiadać, to co chcemy zrobić to stworzyć

0:29sobie z tego komponentu klasę, nasze twitter'y nadal będziemy pobierać sobie

0:33z props'ów, ponieważ to już mamy podłączone do store'a, natomiast chcę tutaj zrobić

0:37jeszcze jedną rzecz, a mianowicie dodać component did mount i

0:41to właśnie wewnątrz tej metody chciałbym dokonać dispatch'a

0:46do konkretnej akcji, która będzie nam pobierać nasze notatki, więc

0:50teraz oprócz mapStateToProps chciałbym jeszcze zrobić map dispatch

0:54to props w którym zwrócimy sobie fetch twitters. Na

1:00razie nic tutaj nie wrzucimy, ponieważ musimy tę akcję najpierw stworzyć, więc teraz

1:04wejdziemy sobie do naszego pliku z akcjami i stworzymy sobie consta

1:08fetch items. Będzie zawierać item type a teraz

1:13tutaj w naszym dispatch'u, tak jak wcześniej korzystaliśmy z redux thunk,

1:19tak teraz tutaj jako drugi parametr możemy sobie wyciągnąć jeszcze

1:23get state. Pamiętasz to na pewno w pierwszych lekcji o redux'ie, get state

1:27będzie nam zwracać obecny stan naszego store'a i wtedy będziemy mogli

1:31sobie pobrać ten user id, który będzie nam potrzebny do tego zapytania. Możemy

1:35sobie skopiować nawet te const'y i skopiujemy

1:41sobie też strukturę tego zapytania, bo ona będzie bardzo podobna, tylko

1:50tutaj zamiast AUTH zrobimy sobie FETCH i teraz

1:54jeśli zerkniemy sobie na nasz endpoint, w tym miejscu, to

2:01podajemy jako query params dwie rzeczy, user id i type, endpoint

2:08wygląda w ten sposób, tym razem jest

2:12to get, a nie post i w

2:16get'ie robimy dodatkowy obiekt z konfiguracją

2:20i tutaj dopiero podajemy params i podajemy parametry,

2:25które potrzebujemy. W tym przypadku będzie to type,

2:30gdzie podamy item type, a drugim parametrem będzie

2:34user id. Możemy je wyciągnąć za pomocą właśnie funkcji get state user id i

2:39teraz skoro już te akcje przygotowaliśmy. Na razie nic w naszym reducerze

2:43jeszcze nie robimy, będziemy sobie wypluwać payload, który tutaj wpisaliśmy.

2:47Zobaczymy czy to działa, więc teraz przechodzimy

2:51do twitter'ów i w map dispatch to props, które możemy

2:56już podać do naszego connect'a, stworzymy sobie funkcje strzałkową, tym

3:00razem pustą, która będzie nam dispatch'ować akcje,

3:05którą zaimportujemy, akcja nazywa się fetch

3:15items i fetch items w naszym widoku będzie przyjmować twitters. Teraz

3:20to, co chcemy zrobić to na component did mount wywołać this props fetch items. Odpalimy

3:31sobie naszą konsolę, wejdziemy do twitter'ów, okej

3:35i mam jakiś błąd i widzimy,

3:42że dispatch is not the function, więc pierwsza lampka jaka powinna nam się zapalić to

3:46czy mamy dobrą kolejność w connect'ie, bo pamiętamy, że mapstatetoprops zawsze

3:50musi być pierwsza. Jak widzimy, było drugie, więc teraz

3:54jest okej i problem jest tylko taki, że

4:00za każdym razem kiedy odświeżamy naszą stronę to nasz store

4:04ginie, więc musimy podawać na nowo user

4:08id i teraz jak się zalogowaliśmy i nie odświeżyliśmy naszej strony, możemy

4:12wejść do twitter'ów i zobaczymy, że pobraliśmy tutaj

4:16dwa różne twitter'y, więc możemy sobie przejść

4:21do naszego pliku z actions, upewnić

4:25się, że wszystko tutaj jest okej. Widzę, że tak, więc teraz możemy przyjść do reducers

4:29i stworzymy sobie coś takiego, zaimportujemy

4:37sobie tylko te typy akcji, które nam tutaj doszły. Teraz

4:47już na pewno możemy sobie wywalić naszego consta z dummy data, initial state

4:52stworzymy jako pustą tablicę, jako pusty obiekt

4:57właściwie i teraz stwórzmy sobie tutaj akcje

5:02dla fetch success. Wrzucamy oczywiście

5:06poprzedni stan i teraz tutaj również potrzebowalibyśmy tego dynamicznego

5:10klucza, który pozwoli nam dodać nasza item do konkretnej tablicy, więc

5:15możemy je sobie wyciągnąć teoretycznie z jakiegoś elementu, który dostajemy

5:19backend'u na przykład type twitters tutaj mamy, ale równie dobrze moglibyśmy

5:24to po prostu obsłużyć dla naszej akcji w taki

5:28sposób, że wyciągniemy sobie data naszego z naszego

5:34response'a, następnie wprowadzimy tutaj spread operator z tym date

5:38i dodatkowo jeszcze podamy tutaj nasz item type

5:43i w poprzednim reducerze to to się

5:47nazywało item type, więc

5:52będziemy mieć spójność w tym miejscu, więc teraz możemy sobie

5:56zastosować dokładnie tą samą składnię, którą mieliśmy tutaj i biorąc

6:00pod uwagę, że nasza odpowiedź serwera będzie nadpisywać wszystkie itemy, które mamy w naszym storze,

6:04nie będziemy tu tworzyć logiki, która porównuje na przykład te item'y i pobiera tylko te, które są

6:08potrzebne. W takim razie możemy po prostu stworzyć sobie action

6:13payload data. Okej, mamy błąd, ponieważ

6:17data nie jest iterable, czyli nie jest tablicą. Zaraz zobaczymy, wróćmy

6:22sobie do naszej akcji i spróbujemy skonsologować nasze data.

6:26Okej, to jest właśnie

6:30ten problem, o którym mówiłem, musimy być zalogowani i w

6:36tej chwili mamy data, które jest tablicą i ta tablica

6:40ma dwa obiekty, więc teoretycznie możemy użyć sobie data bez tego spread

6:44operator'a i item type po prostu będzie osobno, okej

6:49w tej chwili to składnia powinna działać. Zaraz zobaczymy, okej,

7:01coś się pojawiło i coś się zepsuło. Zaraz zobaczymy. Wszystko rozbija się głównie

7:05o to, że id, które tutaj mamy, teraz jest z podkreślnikiem, ponieważ

7:09w takiej formie dodaje to id nasz backend i nie będziemy się tym za

7:13bardzo przejmować. Możemy to użyć w taki sposób i dodatkowo tutaj

7:17mapujemy, to również to id powinna być z podkreślnikiem, chociaż

7:21na to akurat będzie sposób, żeby tego uniknąć. Dobra, ale udało nam się pobrać

7:25nasze dwa item'y z naszego backend'u i wyświetlić

7:30je mimo tych kilku niewinnych błędów, które naprawimy sobie następnej lekcji.