1
00:00:02,550 --> 00:00:04,670
Aby mieć pewność, że się

2
00:00:04,710 --> 00:00:10,260
załadują, ponownie musimy wrócić do twórcy akcji i dodać nową akcję do twórcy akcji zamówień, przepraszam.

3
00:00:11,590 --> 00:00:18,880
Jednym identyfikatorem, którego potrzebuję, jest ustawianie zamówień, tak jak mieliśmy jeden zestaw produktów do ustawiania załadowanych zamówień,

4
00:00:18,880 --> 00:00:21,340
a tutaj mam mojego kreatora

5
00:00:21,340 --> 00:00:28,120
akcji pobierania zamówień, który nie przyjmuje żadnych argumentów, ale który następnie zwraca moją funkcję asynchronicznej wysyłki,

6
00:00:28,140 --> 00:00:36,580
dzięki Redux Thunk i tam ostatecznie wysyłam lub wysyłam nową akcję, w której typem są ustawione zlecenia i gdzie mam

7
00:00:36,580 --> 00:00:41,250
załadowane zamówienia i oczywiście nie powinna to być pusta tablica.

8
00:00:41,290 --> 00:00:47,050
Zamiast tego możemy wypożyczyć logikę od twórcy akcji produktów, od pobrania tam produktów. Możemy wziąć całą tę

9
00:00:47,110 --> 00:00:55,850
logikę, skopiować ją tutaj i przenieść do twórcy akcji zamówień i

10
00:00:55,850 --> 00:00:57,180
uruchomić

11
00:00:57,410 --> 00:01:04,000
ją przed wysłaniem tutaj. Teraz oczywiście musimy to dostroić, na przykład żądanie musi zostać wysłane do

12
00:01:04,190 --> 00:01:07,940
zleceń / U1 i ponownie, które zostanie później zastąpione wartością dynamiczną, na razie jest

13
00:01:07,940 --> 00:01:13,880
to ustalone na sztywno, aby pobrać zamówienia dla tego użytkownika. To powinno być żądanie, chcę to sprawdzić,

14
00:01:13,880 --> 00:01:14,930
w porządku.

15
00:01:14,930 --> 00:01:16,250
Tutaj mam

16
00:01:16,250 --> 00:01:19,450
dane odpowiedzi, teraz mam załadowane zamówienia, które wydają

17
00:01:19,460 --> 00:01:21,550
się być bardziej odpowiednie, wciąż

18
00:01:21,560 --> 00:01:27,170
przeglądam wszystkie dane, które mam, i chcę ustawić tam załadowane zamówienia, ale teraz jest

19
00:01:27,230 --> 00:01:30,050
jedna ważna różnica, Nie tworzę tutaj

20
00:01:30,050 --> 00:01:34,210
nowych produktów, które dodaję do załadowanych zamówień, zamiast oczywiście muszę

21
00:01:34,340 --> 00:01:37,680
tworzyć nowe zamówienia tutaj i w tym celu

22
00:01:37,890 --> 00:01:43,510
musisz zaimportować zamówienie z modelu zamówienia. Teraz też widzę, że brakuje kędzierzawego nawiasu

23
00:01:43,520 --> 00:01:48,990
klamrowego, teraz zanim przejdę do tego, muszę się upewnić, że wychwycę również wszelkie

24
00:01:49,020 --> 00:01:57,550
błędy, które mogą się pojawiać, i tam chcę rzucić błąd, po prostu go ponownie rzuć, upewnij się dociera do mojego

25
00:01:57,550 --> 00:01:59,220
komponentu i potrzebuję

26
00:01:59,260 --> 00:02:04,530
jeszcze jednego zamykającego nawiasu klamrowego, ale teraz z powrotem do naszej logiki

27
00:02:07,350 --> 00:02:11,480
tutaj, gdzie tworzę nowe zamówienia, tam kluczem jest identyfikator,

28
00:02:11,490 --> 00:02:18,920
podobnie jak w przypadku produktów, elementy można znaleźć w moich danych odpowiedzi, ponieważ w zasadzie odzyskaj to tutaj,

29
00:02:18,920 --> 00:02:24,420
więc dane odpowiedzi będą zawierały kluczowy element karty, na przykład, który przechowuje moje

30
00:02:24,420 --> 00:02:30,360
elementy karty, których potrzebuję. Dane odpowiedzi dla danego klucza i tam,. CardItems, to tam

31
00:02:30,360 --> 00:02:38,200
znajduję moje przedmioty, ponieważ to właśnie wysyłamy tutaj w celu przechowywania elementów karty, wtedy moje zamówienie,

32
00:02:38,200 --> 00:02:42,610
które tutaj tworzę, oczywiście również potrzebuje całkowitej kwoty,

33
00:02:42,640 --> 00:02:48,700
otrzymuję to z klucza resData, a następnie tam, jeśli mamy Spójrz na

34
00:02:48,700 --> 00:02:53,290
Firebase, tutaj jest to pole całkowitej kwoty i data.

35
00:02:53,330 --> 00:03:00,520
Cóż, w tym celu tworzę nowy obiekt daty, ale inicjuję go za pomocą klucza resData. data.

36
00:03:00,540 --> 00:03:05,760
Teraz musimy utworzyć nowy obiekt danych, ponieważ klucz resData. data jest tutaj tylko tym ciągiem daty i

37
00:03:05,850 --> 00:03:08,190
potrzebuję obiektu daty, a nie ciągu

38
00:03:08,190 --> 00:03:13,800
daty, dlatego owijamy go, ten ciąg zawijamy tutaj wraz z tworzeniem obiektu daty i dlatego otrzymujemy obiekt

39
00:03:13,800 --> 00:03:14,220
danych

40
00:03:14,250 --> 00:03:17,130
i to jest kolejność, którą tu dodam aby załadować

41
00:03:17,130 --> 00:03:22,470
zamówienia, robimy to dla wszystkich zamówień, które ściągamy, a dzięki temu możemy to wysłać, a teraz

42
00:03:22,470 --> 00:03:24,950
musimy po prostu obsłużyć to w reduktorze zamówień.

43
00:03:25,080 --> 00:03:32,230
Więc jeśli obsłużę ustawione zamówienia i do tego, oczywiście musisz zaimportować ten identyfikator akcji, jedyne, co muszę zrobić, to zwrócić nowy obiekt

44
00:03:32,290 --> 00:03:37,500
stanu, w którym zamówienia są równe akcji. zamówienia i to wszystko, co

45
00:03:37,570 --> 00:03:39,280
musimy zrobić, to

46
00:03:39,280 --> 00:03:40,640
naprawdę proste.

47
00:03:40,720 --> 00:03:42,250
Dlaczego to takie proste?

48
00:03:42,280 --> 00:03:47,530
Ponieważ w kreatorze akcji wykonujemy całą pracę. Tam mapujemy nasze zamówienia, a następnie tutaj,

49
00:03:47,530 --> 00:03:50,290
po prostu mam klucz zamówień w mojej akcji, który

50
00:03:50,440 --> 00:03:53,740
przechowuje wszystkie zamapowane zamówienia, więc właśnie to muszę tutaj przechowywać.

51
00:03:54,150 --> 00:04:03,570
Teraz pozostałym krokiem jest wysłanie zamówień pobierania tutaj na ekranie naszych zamówień. Przejdźmy więc i dodajmy jeszcze raz efekt użycia,

52
00:04:03,840 --> 00:04:10,560
aby to zrobić i wysłać, musimy również zaimportować użycie wysyłki z React

53
00:04:10,560 --> 00:04:14,470
Redux, a następnie tutaj możemy uzyskać dostęp

54
00:04:14,730 --> 00:04:20,050
do tej funkcji wysyłki, wykonując użycie wysyłki, a następnie tutaj

55
00:04:20,250 --> 00:04:28,420
efekt użycia, dodajemy wysyłkę jako zależność, ponieważ tutaj w tej funkcji efektu wysyłam i teraz

56
00:04:28,420 --> 00:04:31,640
potrzebuję swoich akcji zamówień, więc

57
00:04:31,660 --> 00:04:39,730
pozwólcie mi zaimportować wszystko jako akcje zamówień z folderu sklepu, z folderu akcji, z pliku

58
00:04:39,730 --> 00:04:50,840
zamówień iz tym zaimportowanym tutaj , możemy powiedzieć działania zamówień. fetchZamówienia takie, a następnie przejdziemy do realizacji tego żądania i dlatego

59
00:04:51,110 --> 00:04:56,690
teraz, jeśli zapiszemy to i przejdziemy do ekranu zamówień, początkowo jest

60
00:04:56,690 --> 00:05:05,790
puste, ale bardzo szybkie i ładuje wszystkie zamówienia, które przechowaliśmy i są to te trzy zamówienia, które mam tutaj

61
00:05:05,790 --> 00:05:14,260
i oczywiście możemy to rozszerzyć tak jak wcześniej. Teraz ładowanie spinner byłoby również miłe i oczywiście możesz

62
00:05:14,260 --> 00:05:15,790
również zatrzymać

63
00:05:15,790 --> 00:05:18,830
film tutaj i spróbować tego sam.

64
00:05:18,830 --> 00:05:24,830
Zrobię to szybko tak samo jak poprzednio - zaimportuj stan

65
00:05:24,900 --> 00:05:36,120
użycia z React, a następnie skonfiguruj stan isLoading i ustaw isLoading, wykonując stan use i ustawiając go początkowo na false,

66
00:05:36,120 --> 00:05:42,540
a następnie w efekcie, na końcu chcę na użycie asynchroniczne czekaj.

67
00:05:42,550 --> 00:05:50,920
Teraz powiedziałem, że nie możesz lub nie powinieneś tutaj dodawać asynchronizacji, więc możemy albo użyć tutaj, albo po prostu zawinąć to

68
00:05:50,920 --> 00:05:52,150
w funkcję pomocnika.

69
00:05:52,150 --> 00:06:01,320
Teraz użyję po prostu wywołania then, więc ustawię isLoading na true tutaj, a następnie dodam potem tutaj i kiedy to zostanie zrobione,

70
00:06:01,320 --> 00:06:05,880
wiem, że mamy odpowiedź, więc tutaj ustawię isLoading na false.

71
00:06:05,880 --> 00:06:08,680
Teraz zauważ, że nie mam tutaj obsługi błędów, więc jeśli

72
00:06:08,700 --> 00:06:11,050
to się nie powiedzie, nie zajmiemy się tym,

73
00:06:11,070 --> 00:06:13,530
zamiast tego zawsze będziemy w stanie ładowania, więc

74
00:06:13,530 --> 00:06:18,200
oczywiście możesz rozważyć dodanie obsługi błędów. Po prostu nie zrobię tego tutaj,

75
00:06:18,200 --> 00:06:21,570
ponieważ pokazałem, jak to działa, aby nie przesadzić z tym

76
00:06:21,660 --> 00:06:23,360
modułem zbytnio, nie zaimplementuję go,

77
00:06:23,370 --> 00:06:28,710
ale mogę, ale oczywiście możesz poradzić sobie z błędami tutaj, jeśli chcesz użyć tego, a

78
00:06:28,710 --> 00:06:30,400
następnie podejdź tutaj

79
00:06:30,420 --> 00:06:32,790
dodając catch, możesz to zrobić tutaj absolutnie.

80
00:06:33,430 --> 00:06:35,340
Skupię

81
00:06:35,350 --> 00:06:43,000
się jednak na części ładującej. Teraz, gdy mam wszystko skonfigurowane, możemy zaimportować wskaźnik

82
00:06:43,000 --> 00:06:45,560
aktywności i zaimportować komponent

83
00:06:45,570 --> 00:06:55,340
widoku, a dla niektórych stylów, również zaimportować interfejs API arkusza stylów z React Native, a następnie sprawdzić, czy jesteśmy w

84
00:06:55,370 --> 00:07:04,890
stanie ładowania, w którym to przypadku I chcę zwrócić tutaj mój wyśrodkowany wskaźnik aktywności z rozmiarem dużego i kolorem, który

85
00:07:04,920 --> 00:07:12,180
powinien być kolorami, które należy zaimportować, a zatem podstawowymi, więc upewnij się, że masz dodany

86
00:07:12,220 --> 00:07:23,620
import kolorów i przy dodanym, tutaj dodam styl równy do stylów. wyśrodkowany lub jak chcesz go nazwać, a teraz dodaj ten

87
00:07:23,620 --> 00:07:32,190
obiekt stylów za pomocą arkusza stylów. Utwórz i tam wyśrodkuj powinien

88
00:07:32,840 --> 00:07:44,750
mieć konfigurację Flex One, uzasadnić centrum treści i wyrównać centrum przedmiotów, tak

89
00:07:44,750 --> 00:07:53,980
jak to. Dzięki temu, jeśli go uratujemy, zobaczymy zamówienia, zobaczymy pokrętło. Znowu ładuje się bardzo szybko,

90
00:07:54,010 --> 00:07:59,890
ale możesz to zobaczyć, jeśli przyjrzysz się uważnie, oto błystka na

91
00:07:59,980 --> 00:08:06,850
ułamek sekundy, a następnie zamówienia są ładowane. Teraz to działa, przechowywanie i pobieranie zamówień

92
00:08:07,030 --> 00:08:13,770
również działa, dzięki czemu zaimplementowaliśmy żądania HTTP i używamy serwera do przechowywania danych w tej aplikacji.