React: Akcja logowania

16.8.x

0:00Cześć, w tej lekcji zajmiemy się autoryzacją naszego użytkownika. Jak

0:04widzisz przygotowałem już specjalny ekran, zarówno dla logowania jak

0:09i dla rejestracji. Niestety są one takim trochę antypattern'em,

0:13ponieważ zawierają one dokładnie to samo, tylko na dwóch różnych widokach

0:18i specjalnie coś takiego zrobiłem, bo chciałbym żeby, i

0:23specjalnie zrobiłem coś takiego, żeby pokazać

0:27ci jak nie powinno się tego robić i przy okazji zachęcić cię do tego, żeby

0:32na własną rękę samodzielnie wykorzystać wiedzę zdobytą już w tym kursie i sprawić,

0:36żeby te ekrany były trochę bardziej racjonalnie napisane, żeby tego

0:40kodu nie było aż tak dużo, także to jest zadanie domowe dla ciebie, a my teraz

0:45przechodzimy do logowania, żeby zalogować naszego użytkownika

0:49musimy później zapisać jego dane takie jak username i id,

0:55ponieważ będziemy je wykorzystywać w późniejszych request'ach, więc żeby to zrobić

1:00musimy to zapisać w naszym storze i teraz stworzymy sobie akcję,

1:04która pozwoli nam na to. Nazwiemy ją sobie authenticate,

1:11będzie przyjmować username i password i teraz

1:17czas zapoznać się z takim dość ważnym konceptem w

1:21redux'ie jeśli chodzi o zapytanie asynchroniczne ponieważ my

1:25tutaj będziemy robić jakiś request, post do naszego APIi to API

1:30albo nam zwróci, że okej albo że nie jest okej, ale fajnie by było też

1:34przed wysłaniem tego request'a, zainicjować do redux'a, powiedzieć

1:38słuchaj leci request do API i teraz bądź gotów

1:42na to co się stanie, więc zazwyczaj w takiego, więc

1:46zazwyczaj w tego typu sytuacjach wysyła się tak naprawdę trzy takie request'y,

1:51więc zazwyczaj w tego typu sytuacjach można otrzymać trzy,

1:55więc, więc zazwyczaj w tego typu sytuacjach

1:59można otrzymać trzy odpowiedzi authenticate

2:15request, później jeśli nasz axios zwróci,

2:19że jest okej to authenticate success,

2:24a jeśli coś pójdzie nie tak to authenticate

2:29failure, ale

2:43z jednego action creator'a możemy dyspatch'ować tylko jeden typ, więc to

2:48co musimy tutaj zainstalować to tak zwane middleware i teraz czym jest middleware. Wyjaśnię ci

2:52też na przykładzie komentarza. Załóżmy, że

2:56mamy jakąś, załóżmy, że mamy jakąś czynność w naszej

3:01aplikacji która triggeruje. Załóżmy, że mamy jakąś czynność w

3:05naszej aplikacji, która triggeruje akcje, więc pojawia się Action Creator,

3:09który wysyła

3:13do naszego stora'a, a właściwie do reżysera

3:17akcje. Reżyser oczywiście

3:31idzie z tym dalej do store'a i wszystko

3:35jest okej. To zostaje z apdejtowane i mamy nowy store

3:40i mamy nowy stan w naszym storze i teraz to czym

3:45jest middleware i jak się je stosuje to i

4:07teraz

4:20to czym jest reducer i teraz to czym jest middleware i jak

4:25się je stosuje, to po prostu chodzi o to że middleware wchodzi

4:29nam trochę pomiędzy akcje, a reducer w to

4:36miejsce i coś robi z naszą akcją. W jaki sposób ją przetwarza,

4:40zatrzymuje. Po prostu jest to funkcja która przyjmuje akcje i coś potrafi z

4:44nią zrobić. Taki middleware, który my chcemy tutaj zastosować w naszej aplikacji to

4:48redux thunk. Pozwala nam to na tworzenie

4:53i specjalną obsługę zapytań asynchronicznych w naszym redux'ie. Zaraz

5:01pokażę ci na przykładzie jak to działa, najpierw sobie to zainstalujemy. Jak

5:07już zainstalujemy to w naszym storze, musimy to skonfigurować. Na szczęście konfiguracja jest

5:11bardzo prosta, musimy tutaj wyciągnąć sobie metodę apply

5:15middleware z naszego redux'a i w funkcji create store,

5:20po tym jak dodajemy sobie ten nasz plugin

5:24dotyczący devtools'ów, wpisujemy

5:29apply middleware thunk. Oczywiście po thunk'u musimy

5:36jeszcze sobie zaimportować z redux thunk

5:40i widzę,

5:45że coś tam tutaj nie poszło, ale zaraz zobaczymy, bo wydaje mi się, że coś z tym devtools'ami

5:49tutaj jest nie tak. Zresztą jak byśmy je sobie usunęli, to nasza

5:56aplikacja będzie działać, więc na pewno jest tu coś z tymi devtools'ami, ale

6:00tutaj widzę, że w tej konfiguracji jest napisane co trzeba zrobić, więc

6:06teraz sobie zobaczymy. Jeśli

6:10wybieramy middleware, to musimy zrobić coś takiego. I z naszego redux'a

6:16jeszcze tylko musimy wyciągnąć sobie compose. Wydajemi

6:20się, że teraz możemy po prostu podmienić jeden store z drugim, nie

6:26zapominając, że nasz reducer się nazywa. Może nas, może

6:30zmienimy tę nazwę on jest do końca fortunna, rootReducer. OK, middleware

6:35is not defined, ponieważ my tutaj używamy konkretnego middleware, czyli thunk

6:40i teraz okej. Nasza aplikacja działa, devtools'y

6:47też działają. Więc wszystko się zgadza, możemy przejść sobie z powrotem do akcji i

6:51teraz, to co umożliwił nam thunk to jeśli stworzymy

6:55sobie faktycznie nasz const authenticate. Podamy

7:05do niego user password, username

7:09i password, to możemy

7:13zwrócić tej funkcji kolejną funkcję, która przyjmuje dispatch i

7:18jak już wiesz dispatch pozwala nam dyspatch'ować

7:22inne akcje i w takiej sytuacji możemy

7:27zrobić coś takiego, że jeśli w ogóle athenticate się odpala to my dyspatch'ujemy

7:31teraz authenticate request, czyli

7:35informujemy nasz store, a właściwie nasze reducer'y, że

7:39poszedł taki, takie zapytanie do API i teraz

7:44w tym momencie dopiero możemy sobie zaimportować tutaj axios'a,

7:49w którym

7:53stworzymy sobie post jako

7:57data oczywiście przekazujemy username i password i teraz tak jak już mówiłem

8:01wcześniej możemy sobie zrobić then, który przyjmuje

8:05result i wtedy dopiero w tym

8:10result możemy dyspatch'ować nową akcje o nazwie

8:16authenticate success, a

8:21jako payload damy tutaj

8:25właśnie ten result, czyli możemy tutaj to nazwać

8:29payload i jeśli

8:33coś pójdzie nie tak, to możemy jeszcze zrobić catch i

8:38tutaj również dispatch'czujemy sobie akcje o typie

8:42authenticate failure

8:46i teraz to co jest bardzo ważne, żeby to działało to,

8:50żeby przed tym axios dodać jeszcze return, bo to musi być wszystko zwrócone

8:55z tej funkcji i teraz na szybko, żeby sprawdzić

8:59czy to wszystko działa to sobie jeszcze tutaj wrzucimy klamry i

9:04wylogujemy sobie payload. Przejdźmy

9:13teraz do naszego login page. Użyjemy

9:17tutaj znanego już connect, połączymy

9:24nasz login page map

9:28dispatch to props i tutaj

9:32użyjemy sobie authenticate, ona

9:39oczywiście przyjmuje username i password i będzie

9:44nam dyspatchował akcje, którą zaimportujemy

9:48sobie tutaj w tym miejscu i teraz wystarczy,

9:52że użyjemy jej tutaj na dole. Podamy username i password,

9:57a następnie zdestrukturyzujemy ją

10:05sobie tutaj i użyjemy

10:09on submit i w tym momencie, jeśli

10:13wypełnię mój formularz to w naszej

10:17konsoli coś powinno się pojawić. Tak,

10:28pojawiły się 403, czyli ten axios faktycznie

10:32podziałał, dostaliśmy console log'a z error

10:37w tym miejscu, więc on wskoczył, podałem nieprawdziwe

10:41hasło, więc poszło do cache'a, a teraz

10:45jak wpisze password raz dwa trzy. To

10:50dostajemy normalnie odpowiedź serwera z user

10:55id, które możemy zapisać do redux'a, do store'a, ale to zrobimy już następnej

10:59lekcji.