React: Ekran ładowania wyników

16.8.x

0:00Cześć, w tej lekcji zajmiemy się naprawianiem błędów, które nam

0:04się wyświetliły w poprzedniej lekcji. Natomiast zanim to zrobimy chciałbym tutaj zrobić jedną

0:08rzecz. Ja wiem, że to powinno działać tak, że user się zapamiętuje

0:12w naszej przeglądarce. Natomiast na potrzeby tego kursu nie będziemy tutaj

0:16stosować żadnego zapisywania do local storage albo wykorzystywania redux-persist

0:21do właśnie zapamiętywania naszego store'u, po odświeżeniu. Możesz

0:25to zrobić na własną rękę, to wcale nie jest takie trudne. Natomiast tutaj skupiamy się na zupełnie innych

0:29problemach, więc teraz jutro user id po prostu możemy sobie zapisać

0:33na razie tak, żeby nasza aplikacja to pamiętała i za każdym razem te rzeczy z

0:37backendu nam zwracała. Poza tym i tak będziemy pracować na jednym użytkowniku, chcę ci pokazać

0:41Jak łączyć backend z naszym frontend'em, a niekoniecznie wykorzystaj do tego wszystkie

0:45możliwe narzędzia, ponieważ ten kurs trwałby kilkadziesiąt dni. Jak widzisz

0:55po zapisaniu user is nasze twitter'y wyświetlają się prawidłowo. Teraz

1:03wróćmy sobie do tych błędów, które nam się tutaj wyświetliły i spróbujmy je naprawić, to nie

1:07powinno być aż tak trudne. Polecimy

1:19sobie od samej góry, twitters id

1:25jest oznaczone jako obowiązkowe, a go nie ma. Wynika

1:29to właśnie z faktu, że tutaj mamy id z podkreślnikiem, ale

1:33to co udostępnia nam ES6 i ta destrukturyzacja to to, że możemy podmieniać

1:38sobie nazwy, które dostaliśmy z backend'u, więc jeśli dostajemy id z podkreślnik'iem, to możemy

1:42powiedzieć słuchaj, to jest fajny props, ale chcemy żeby nazywał się tak i w tym momencie, ten

1:47błąd powinien zniknąć. A

1:53jednak nie zniknął, więc teraz

1:57sobie wylogjmy to co dostaje, a jednak

2:05nie zniknął, więc teraz odpalimy sobie nasze devtools'y React'owe i zobaczymy

2:09co ten komponent dostaje tutaj w props'ach. Okej,

3:01wynika to z tego, że id co prawda zamieniamy jako

3:05nazwę, ale ta pierwotna nazwa obowiązuje w prop types'ach, więc tutaj

3:09musimy dodać to co jest z podkreślnik'iem. Nie ważne i nieistotne

3:20jest to jak później zmieniamy tę nazwę, tylko zamiast number,

3:24tutaj musimy dać string, ponieważ backend'zie to się zapisuje jako string, okej.

3:47Teraz created sobie pominiemy, uznajmy,

3:54że to jest takie Nice to have, ale jednak postman DB, czyli w tej wersji

3:58naszej aplikacji niekoniecznie musimy z tego korzystać. W żaden

4:08sposób nie podniosłoby to wartości dydaktycznej tego jak łączy

4:12się właśnie backend z frontend'em. Jest to po prostu dodatkowa praca, jest to dodatkowy ficzer, który

4:16byłby potrzebny do zaimplementowania w tej aplikacji. Okej,

4:23teraz zostały nam te dwa długaśne błędy i zaraz zobaczymy, co się tutaj stało. Przede

4:31wszystkim w naszej

4:41karcie, przede wszystkim w naszej

4:45karcie musimy teraz sobie sprawdzić, ponieważ te prop types'y się zmieniły, id

4:49jest okej tylko, że jest string'iem a created wywalamy

4:54i nie będziemy z niego korzystać, created mamy jeszcze tutaj gdzieś

4:58w tym miejscu, o dokładnie i teraz nasza

5:03konsola jest już wolna od błędów i skoro

5:11z tym się uporaliśmy, to chciałbym Ci w tej lekcji wytłumaczyć kolejny koncept, który jest bardzo istotny

5:15z poziomu widzenia redux'a i teraz skoro z

5:19tym się uporaliśmy to chciałbym ci wyjaśnić kolejny koncept istotny z poziomu widzenia

5:23React'a, ponieważ jeśli ładujemy sobie coś w naszej akcji, to

5:31mamy tutaj jeszcze taką dodatkową akcje jak success failure i

5:35request i teraz

5:40na success oczywiście wyświetlamy wyniki. To już mamy obsłużone, natomiast

5:45co się dzieje w momencie kiedy request leci do reducer'a, failure'm

5:49się nie zajmujemy, failure jest po to, żeby w razie gdyby był jakiś

5:53błąd nasza aplikacja