1
00:00:02,270 --> 00:00:07,520
Tak więc przechowywanie jest świetne, pobieranie byłoby również słodkie, a na koniec chcę się upewnić,

2
00:00:07,520 --> 00:00:10,510
że kiedy np. Odwiedzimy ekran przeglądu produktów, po prostu

3
00:00:10,580 --> 00:00:15,200
skontaktujemy się z serwerem i uzyskamy stamtąd wszystkie produkty, aby na tym ekranie

4
00:00:15,290 --> 00:00:16,510
, za każdym

5
00:00:16,550 --> 00:00:19,390
razem, gdy go odwiedzamy, ładujemy najnowsze produkty.

6
00:00:19,400 --> 00:00:22,500
Teraz musimy wysłać żądanie HTTP stamtąd, a

7
00:00:22,520 --> 00:00:28,250
zatem w końcu chcę wysłać nową akcję Redux, która dotrze do serwera, stamtąd otrzymam

8
00:00:28,250 --> 00:00:35,590
moje produkty, a następnie ustawię produkty w moim sklepie. Potrzebuję tutaj zupełnie nowej akcji,

9
00:00:35,620 --> 00:00:43,060
ustawiania produktów, których wcześniej nie potrzebowałem, ponieważ pracowaliśmy tylko z produktami pozorowanymi, ale teraz

10
00:00:43,060 --> 00:00:50,660
już tak nie jest, więc gotowe produkty powinny zostać teraz wysłane i będę potrzebował

11
00:00:50,660 --> 00:00:58,110
nowego twórcy akcji które nazywam pobierz produkty. W tym celu nie mam identyfikatora, ponieważ nigdy nie wyślę

12
00:00:58,110 --> 00:01:01,310
tego jako akcji, która powinna dotrzeć do reduktora,

13
00:01:01,310 --> 00:01:06,110
zamiast tego będzie to mój twórca akcji z kodem asynchronicznym z żądaniem HTTP.

14
00:01:06,110 --> 00:01:12,950
Nie będzie potrzebował żadnych argumentów, ale dzięki funkcji Redux Thunk zwraca funkcję, która pobiera tę funkcję wysyłki jako

15
00:01:13,070 --> 00:01:16,470
argument, a tam na koniec chcę wysłać obiekt

16
00:01:16,490 --> 00:01:23,460
akcji, w którym ustawiono typ produktów i gdzie chcę przesłać dalej produkty, ale oczywiście nie powinna to być

17
00:01:23,480 --> 00:01:30,490
pusta tablica, ale produkty, które otrzymuję z mojego API. Możemy więc w pewnym sensie skopiować ten

18
00:01:30,490 --> 00:01:38,610
kod tutaj, w tym tutaj część asynchroniczną wysyłki, aż do miejsca, w którym otrzymujemy dane odpowiedzi, skopiujemy

19
00:01:38,610 --> 00:01:40,590
je z produktu i

20
00:01:40,590 --> 00:01:47,810
zastąpimy tutaj tą częścią, a teraz to, co robimy, to wysyłamy żądanie na ten sam

21
00:01:47,970 --> 00:01:52,530
adres URL, co wcześniej, co ma sens, ponieważ tam

22
00:01:52,530 --> 00:01:54,380
są przechowywane produkty.

23
00:01:54,390 --> 00:01:58,650
Jednak teraz chcę ustawić żądanie pobierania i tak naprawdę jest to domyślne, gdy korzystamy

24
00:01:58,740 --> 00:02:04,380
z funkcji pobierania, więc nie musimy tego ustawiać. W przypadku żądania get nie musisz również ustawiać

25
00:02:04,380 --> 00:02:04,860
żadnych

26
00:02:04,890 --> 00:02:09,150
nagłówków i nie możesz ustawić treści, więc właściwie tutaj możemy całkowicie pozbyć się drugiego

27
00:02:09,150 --> 00:02:12,020
argumentu przy pobieraniu, po prostu wysyłamy takie żądanie pobierania.

28
00:02:12,210 --> 00:02:18,000
Teraz odpowiedź zwróci nasze dane, ale teraz jest jedna ważna cecha formatu tych

29
00:02:18,000 --> 00:02:21,880
danych i najlepiej, jeśli po prostu to zobaczymy.

30
00:02:21,900 --> 00:02:28,470
Pozwól więc, że konsola zarejestruje tutaj dane odpowiedzi i skomentuje to na chwilę lub możemy je tam zostawić, nie

31
00:02:28,470 --> 00:02:29,680
wyrządza to żadnej

32
00:02:29,700 --> 00:02:32,050
szkody, nie robi też nic użytecznego,

33
00:02:32,100 --> 00:02:37,200
nie obsługujemy tego w reduktorze ale zalogujmy się i przejdźmy teraz do ekranu przeglądu

34
00:02:37,200 --> 00:02:44,230
produktów i upewnijmy się, że tam wysyłamy akcję pobierania produktów. Teraz, na szczęście, mam już dostęp do

35
00:02:44,230 --> 00:02:48,670
funkcji wysyłania Redux w przeglądzie produktów, więc teraz muszę

36
00:02:48,850 --> 00:02:55,210
tylko dodać efekt użycia, aby móc go uruchomić po każdym załadowaniu tego komponentu.

37
00:02:55,210 --> 00:03:04,760
Więc tutaj mogę dodać efekt użycia, a tutaj w mojej funkcji mogę wywołać wysyłkę i teraz sięgnąć do

38
00:03:04,790 --> 00:03:08,510
moich akcji produktu, które dlatego muszę zaimportować

39
00:03:08,510 --> 00:03:22,210
jako akcje produktów z akcji sklepu produkty takie jak ten, które powinny być akcjami i teraz użyj akcje produktów tutaj, aby uruchomić akcję pobierania produktów, która

40
00:03:22,250 --> 00:03:29,240
w końcu spowoduje żądanie HTTP i ten efekt powinien być uruchamiany za każdym

41
00:03:29,240 --> 00:03:36,260
razem, gdy mój komponent zostanie załadowany. Mogę więc dodać pustą tablicę i dodać moją jedyną zależność,

42
00:03:36,260 --> 00:03:38,300
którą mam, czyli wysyłanie, tutaj

43
00:03:38,310 --> 00:03:44,070
jest to jedyna zależność, którą definiujemy wewnątrz naszego komponentu, tak że tak naprawdę nigdy się nie uruchomi.

44
00:03:44,150 --> 00:03:48,350
Uruchamia się on tylko wtedy, gdy ten komponent jest załadowany i dokładnie tak

45
00:03:48,410 --> 00:03:49,830
powinno być, za każdym

46
00:03:49,850 --> 00:03:52,950
razem, gdy odwiedzę ekran, chcę tutaj uruchomić ten efekt.

47
00:03:53,270 --> 00:03:57,410
Więc jeśli teraz to zapiszę, zapiszmy to, a teraz, gdy się

48
00:03:57,440 --> 00:04:03,780
ładuje, zobaczysz tutaj w dzienniku, to właśnie stało się tutaj zarówno na Androidzie, jak i iOS, dlatego

49
00:04:03,790 --> 00:04:05,520
widzę to dwa razy.

50
00:04:05,560 --> 00:04:07,460
To właśnie otrzymałem w

51
00:04:07,510 --> 00:04:09,900
końcu, ten obiekt został zwrócony przez Firebase.

52
00:04:09,910 --> 00:04:15,970
Jest to obiekt ze wszystkimi moimi produktami i mam tylko jeden, dlatego widzę tutaj tylko jeden i każdy obiekt

53
00:04:15,970 --> 00:04:18,190
jest dopasowany do jego unikalnego identyfikatora, ale

54
00:04:18,700 --> 00:04:19,510
to ważne.

55
00:04:19,510 --> 00:04:25,210
Nie wracamy do tablicy, otrzymujemy obiekt z unikatowymi identyfikatorami jako klucze, a wartości tych kluczy

56
00:04:25,210 --> 00:04:30,760
są wtedy danymi mojego obiektu i musimy tylko wiedzieć, że do prawidłowej obsługi.

57
00:04:30,760 --> 00:04:32,050
Wracając do naszej

58
00:04:32,050 --> 00:04:34,200
akcji, tak wyglądają dane odpowiedzi,

59
00:04:34,270 --> 00:04:38,790
oczywiście w mojej aplikacji pracuję jednak z tablicą, więc muszę to przekształcić.

60
00:04:38,950 --> 00:04:43,980
Więc moje załadowane produkty lub jakkolwiek chcesz to tutaj nazwać, powinny

61
00:04:44,200 --> 00:04:49,580
być pustą tablicą, a teraz możemy zapętlić ten obiekt, aby odwzorować

62
00:04:49,610 --> 00:04:54,570
dane obiektu, produkty w obiekcie na produkty w tablicy.

63
00:04:54,570 --> 00:05:00,490
Jest to stosunkowo proste, możemy dodać tutaj pętlę for / in za pomocą naszego klucza,

64
00:05:00,490 --> 00:05:09,190
w którym przeglądamy wszystkie dane odpowiedzi, które pobraliśmy tutaj na końcu, a następnie tutaj dodam każdy produkt do moich załadowanych produktów za pomocą

65
00:05:09,250 --> 00:05:13,240
push, aby to tablica rośnie z czasem, a to,

66
00:05:13,240 --> 00:05:19,420
co tu dodam, to po prostu nowy produkt, korzystający z modelu produktu, który musisz zaimportować, więc

67
00:05:19,420 --> 00:05:20,250
upewnij

68
00:05:20,260 --> 00:05:25,610
się, że masz ten import tutaj, wskazując folder twoich modeli i tam w

69
00:05:26,860 --> 00:05:28,660
pliku produktu, a ja stwórz

70
00:05:29,690 --> 00:05:36,910
tutaj nowy produkt, w którym mój identyfikator jest tym kluczem, ponieważ jest to ten unikalny identyfikator, który mamy w

71
00:05:36,910 --> 00:05:43,820
tym obiekcie, dla którego zapętlamy, a następnie ta rzecz użytkownika, czyli wciąż U1, fałszywe dane, ponieważ nie mamy

72
00:05:43,820 --> 00:05:51,260
żadnych danych użytkownika od czasu do czasu musimy przyjrzeć się obiektowi, który wróciliśmy z Firebase, aby uzyskać tytuł i

73
00:05:51,260 --> 00:05:52,180
tak dalej.

74
00:05:52,220 --> 00:05:58,720
Tak więc tutaj naszym tytułem tego nowego produktu, który tworzymy, jest po prostu resData dla danego klucza. tytuł i to samo oczywiście

75
00:05:58,760 --> 00:06:00,380
tutaj

76
00:06:00,380 --> 00:06:05,920
dla imageUrl, więc. imageUrl. Do opisu

77
00:06:09,440 --> 00:06:19,610
i oczywiście także do ceny, jak ta. To dodaje wszystko do załadowanych produktów, a teraz załadowane produkty będą

78
00:06:19,610 --> 00:06:25,570
zapełnioną tablicą, którą mogę dodać tutaj do akcji, która jest wysyłana, do akcji

79
00:06:25,580 --> 00:06:27,070
zestawu produktów.

80
00:06:27,230 --> 00:06:32,530
Jedyną brakującą rzeczą jest to, że teraz idziemy do reduktora i tam możemy poradzić sobie z zestawami produktów, może tutaj

81
00:06:32,690 --> 00:06:38,080
jako pierwszym przypadku, ale oczywiście pozycja nie ma znaczenia. Dodaj zestaw produktów tutaj i

82
00:06:38,080 --> 00:06:43,660
do tego, upewnij się, że importujesz go z pliku działań, a potem jest

83
00:06:43,670 --> 00:06:49,230
to bardzo trywialna rzecz, którą zamierzamy zrobić. Na koniec muszę tylko przywrócić

84
00:06:49,230 --> 00:06:59,090
nowy stan, w którym dostępne produkty są równe działaniu. produkty, więc do produktów, które otrzymałem tutaj w moim kreatorze

85
00:06:59,330 --> 00:07:05,810
akcji, które dodałem do wysłanej akcji. A dla produktu użytkownika

86
00:07:06,280 --> 00:07:14,210
jest bardzo podobny, tam jest akcja. produkty, po prostu filtrowane dla wszystkich produktów, które mają mój identyfikator użytkownika, więc w

87
00:07:15,450 --> 00:07:20,370
tym momencie i ze względu na mój fałszywy kod tutaj, w którym zapisałem mój identyfikator użytkownika, oznacza to

88
00:07:20,490 --> 00:07:23,670
oczywiście, że wszystkie załadowane produkty są traktowane jak moje produkty.

89
00:07:23,670 --> 00:07:29,790
To zostanie zmienione później, gdy dodamy uwierzytelnianie. Tak więc z tym, teraz, jeśli to

90
00:07:30,080 --> 00:07:35,120
się przeładuje, zobaczysz, że zaczynamy od fałszywych danych, ale wtedy jest to

91
00:07:35,420 --> 00:07:39,830
natychmiast zastępowane tymi załadowanymi danymi. Tak więc ładowanie danych działa

92
00:07:39,830 --> 00:07:44,370
dobrze, możemy z tym pracować tak, jak moglibyśmy z naszymi własnymi danymi tutaj.

93
00:07:44,390 --> 00:07:49,340
Oczywiście nie przechowujemy zamówień na serwerze i nic podobnego, ale jesteśmy w stanie załadować nasze

94
00:07:49,340 --> 00:07:51,410
dane, które wcześniej przechowywaliśmy na serwerze.