1
00:00:02,110 --> 00:00:07,990
Więc teraz, gdy dodaliśmy przechowywanie, pobieranie, aktualizację i usuwanie, a zatem wszystkie funkcje

2
00:00:07,990 --> 00:00:12,070
crud i chcieliśmy pokazać błąd podczas ładowania i błędy

3
00:00:12,070 --> 00:00:14,020
obsługi, brakuje dwóch rzeczy.

4
00:00:14,020 --> 00:00:20,560
Jednym z nich jest to, że kiedy faktycznie składamy zamówienie, wysyłamy je również na serwer i przechowujemy je również

5
00:00:20,560 --> 00:00:22,900
tam, a nie tylko lokalnie, ponieważ teraz,

6
00:00:22,900 --> 00:00:27,760
gdy coś zamawiamy, widzimy to tutaj, ale zaraz po tym przeładowujemy aplikację, ponieważ

7
00:00:27,760 --> 00:00:30,650
nie przechowujemy jej na serwerze, który został utracony,

8
00:00:30,660 --> 00:00:32,160
więc to jedno.

9
00:00:32,170 --> 00:00:35,130
Drugą rzeczą jest oczywiście to, że pokazujemy tutaj tylko spinner

10
00:00:35,200 --> 00:00:39,570
ładujący i tutaj również obsługujemy błędy. Na ekranie administratora, jeśli coś

11
00:00:39,610 --> 00:00:43,970
pójdzie nie tak, nie otrzymamy błędu, również tutaj, jeśli to edytujemy i

12
00:00:44,080 --> 00:00:47,320
przesyłamy, nie widzimy ładowania tarczy podczas oczekiwania na przesłanie.

13
00:00:47,320 --> 00:00:49,120
To jest coś, co moglibyśmy ulepszyć i

14
00:00:49,150 --> 00:00:51,310
to jest właśnie ta część, od której chcę zacząć.

15
00:00:52,210 --> 00:00:57,670
Więc tutaj na ekranie edycji produktu, gdy wysyłamy aktualizację lub tworzenie, w obu przypadkach

16
00:00:57,670 --> 00:01:04,210
to oczywiście zajmuje trochę czasu i rzeczywiście otrzymujemy obietnicę tutaj, ponieważ zarówno w aktualizacji, jak i tworzeniu

17
00:01:04,600 --> 00:01:10,270
akcji produktu, używamy funkcji Redux Thunk zwracanie tutaj asynchronicznej funkcji wysyłki, która w związku z

18
00:01:10,270 --> 00:01:15,340
tym zwraca obietnicę, która jest zatem zwracana w ramach naszego wywołania funkcji wysyłki

19
00:01:15,520 --> 00:01:20,680
W związku z tym faktycznie otrzymujemy informacje, czy czekamy na odpowiedź, czy otrzymaliśmy

20
00:01:20,710 --> 00:01:22,470
błąd, czy też skończymy, po

21
00:01:22,630 --> 00:01:24,380
prostu musimy go

22
00:01:24,520 --> 00:01:31,300
użyć i oczywiście możemy go użyć w podobny sposób, jak wcześniej, ze stanem użytkowania zaimportowanym z React,

23
00:01:31,300 --> 00:01:37,650
a następnie zarządzając ładowaniem i stanem błędu tutaj. Na marginesie, możesz oczywiście również pracować z

24
00:01:37,650 --> 00:01:43,080
reduktorem, w którym łączysz oba stany razem, jeśli chcesz za pomocą haka reduktora.

25
00:01:43,380 --> 00:01:52,750
Tutaj jednak pozostanę przy isLoading i ustawię isLoading i początkowo oczywiście jest to fałsz, a także mam błąd i

26
00:01:52,750 --> 00:02:02,510
ustawiam tutaj zmienne błędu przy użyciu takiego stanu, który początkowo jest niezdefiniowany, a teraz musimy to ustawić, ponieważ „

27
00:02:02,880 --> 00:02:07,470
ponownie wysyłamy działania lub gdy pojawiają się błędy.

28
00:02:07,470 --> 00:02:13,530
Więc tutaj, gdy mamy zamiar to wysłać, bez względu na to, czy

29
00:02:13,530 --> 00:02:25,000
edytujemy, czy też tworzymy, chcę ustawić isLoading na true, a także ustawić tutaj błąd na false lub nie na false, na zero , Zresetuj to.

30
00:02:25,190 --> 00:02:30,420
Teraz, gdy skończymy, chcę zrobić coś innego, ale najpierw musimy poczekać na

31
00:02:30,420 --> 00:02:31,840
zakończenie wysyłki.

32
00:02:31,860 --> 00:02:37,770
Teraz możemy zatem ponownie przekształcić to w funkcję asynchroniczną, tak żebym mógł użyć tam, aby

33
00:02:37,770 --> 00:02:44,720
poczekać na słowo kluczowe, alternatywą byłoby nie włączenie tego w funkcji asynchronicznej i po prostu dodanie wtedy

34
00:02:44,770 --> 00:02:45,810
i przechwycenie,

35
00:02:45,810 --> 00:02:52,620
to też działałoby, ale Lubię używać asynchronizacji czekaj. Możemy teraz poczekać na zakończenie obu wysyłek, oczywiście tylko

36
00:02:52,620 --> 00:02:57,230
jeden z nich będzie działał, ponieważ jest to warunek if, ale możemy poczekać

37
00:02:57,330 --> 00:03:00,380
na zakończenie, a zatem po bloku, wiemy, że

38
00:03:00,370 --> 00:03:08,370
zostanie to wykonane, więc tutaj można ustawić isLoading z powrotem na false. Więc to jest stan ładowania, teraz, aby poradzić

39
00:03:08,370 --> 00:03:15,420
sobie z błędami, musimy po prostu owinąć to blokiem catch catch i możemy faktycznie owinąć cały

40
00:03:15,420 --> 00:03:23,250
blok if tutaj za pomocą try catch, więc weźmy to, przenieś tutaj, a następnie złap potencjalny błędy, które

41
00:03:23,250 --> 00:03:29,400
mogą się pojawiać tu i teraz tutaj, oczywiście chcę ustawić mój błąd na

42
00:03:29,400 --> 00:03:30,000
błąd,

43
00:03:33,030 --> 00:03:39,720
który dostaję tutaj lub na komunikat o błędzie, że się tu dostaję Teraz ustawiamy błąd,

44
00:03:39,780 --> 00:03:50,380
ustawiamy ładowanie Stan, oczywiście nie ma to wpływu na ten ekran. Aby więc pokazać ładujący się spinner, musimy zaimportować wskaźnik aktywności

45
00:03:50,410 --> 00:03:54,120
z React Native, wskaźnik aktywności z

46
00:03:54,130 --> 00:03:58,930
React Native i aby pokazać błąd, chcę również rzucić alert,

47
00:03:58,930 --> 00:04:10,540
a do tego musisz upewnić się, że importujesz alert, który już robimy. Teraz, jako kolejny krok, aby obsłużyć stan ładowania, być może tam,

48
00:04:10,540 --> 00:04:19,930
zanim zwrócę formularz, sprawdzę, czy isLoading jest prawdziwy, a jeśli tak, zwrócę mój widok tutaj ze wskaźnikiem aktywności

49
00:04:19,930 --> 00:04:30,010
tam i tam, „ Ustawię rozmiar na duży i ustawię kolor na kolory, a do tego musisz upewnić się,

50
00:04:30,310 --> 00:04:38,980
że importujesz te kolory jako stały podstawowy. Upewnij się więc, że masz tutaj

51
00:04:38,980 --> 00:04:47,480
stałą importowaną kolorystykę, która jest wymagana, a teraz użyję arkusza stylów tutaj, aby dodać

52
00:04:47,500 --> 00:04:55,120
nowy styl, ten styl wyśrodkowany, a dokładniej, tutaj dodam wyśrodkowany i tak, moglibyśmy

53
00:04:55,120 --> 00:04:59,910
również zlecić to oddzielny element owijający, jeśli chcesz.

54
00:05:00,010 --> 00:05:08,300
Tam ustawię flex na jeden, wyjustuję zawartość do środka, a także wyrównam elementy do środka, w ten sposób.

55
00:05:08,410 --> 00:05:15,250
Teraz możemy zastosować ten wyśrodkowany styl tutaj do widoku, który owijam wokół wskaźnika aktywności, ustawiając

56
00:05:15,250 --> 00:05:19,990
tutaj styl na style. wyśrodkowany.

57
00:05:20,040 --> 00:05:26,460
Teraz powinniśmy to zobaczyć podczas ładowania i na marginesie, nie powinniśmy też nawigować wstecz,

58
00:05:26,460 --> 00:05:27,480
zanim skończymy.

59
00:05:27,840 --> 00:05:33,700
Więc jeśli dodam lub usunę ten wykrzyknik, a następnie pozostawię to wejście, aby zostało przesłane, i

60
00:05:33,700 --> 00:05:34,640
kliknę przycisk

61
00:05:34,770 --> 00:05:38,400
Zapisz, zobaczyłeś ładowanie tarczy i my nawigujemy tylko po tym.

62
00:05:38,400 --> 00:05:42,180
Teraz Firebase jest super szybki, ale tak właśnie się stało.

63
00:05:42,330 --> 00:05:52,970
Teraz, aby zasymulować błąd, przejdę do działań dotyczących produktów, a tutaj w aktualizacji produktu, usunę to tutaj ponownie, aby wymusić błąd, a także dodam coś innego,

64
00:05:52,970 --> 00:05:58,310
teraz przechowuję odpowiedź tutaj w stały, ponieważ teraz naprawdę mnie to obchodzi, chcę

65
00:05:58,400 --> 00:06:03,130
się upewnić, że jeśli odpowiedź nie jest w porządku, więc jeśli

66
00:06:03,200 --> 00:06:07,240
mamy kod statusu 400 lub 500, również rzucam nowy

67
00:06:07,250 --> 00:06:14,360
błąd, gdy mówię, że coś poszło nie tak lub gdzie popełnisz błąd obsługi, którą chcesz zrobić, abyśmy

68
00:06:14,360 --> 00:06:20,200
również zgłaszali błąd w tym przypadku. Nawiasem mówiąc, zrobię to

69
00:06:20,210 --> 00:06:25,620
samo, aby usunąć przed przetestowaniem tego wymuszonego błędu, który zaimplementowałem.

70
00:06:25,670 --> 00:06:29,150
Więc tutaj, aby usunąć, chcę to sprawdzić i oczywiście tutaj,

71
00:06:29,360 --> 00:06:36,120
muszę również uzyskać odpowiedź, czekając na pobranie tutaj. OK, z tym, zobaczmy, czy ten

72
00:06:36,120 --> 00:06:40,400
wymuszony błąd aktualizacji z powodu odrzucenia jest tutaj,

73
00:06:40,470 --> 00:06:46,680
jeśli to ma wpływ. Jeśli teraz wrócę tutaj do administratora, zacznę to

74
00:06:46,680 --> 00:06:48,010
dodawać, dodam wykrzyknik

75
00:06:48,030 --> 00:06:54,150
i klikam to, a teraz zobaczysz, że aktualizacja jest po prostu odrzucona, więc nie widzimy tutaj wykrzyknika,

76
00:06:54,240 --> 00:07:00,230
ale także nie otrzymuję komunikatu o błędzie, co ma sens, ponieważ nie mam logiki, aby to zrobić.

77
00:07:00,310 --> 00:07:01,700
Jak możemy sobie z tym poradzić?

78
00:07:01,720 --> 00:07:04,310
Jak powiedziałem, chcę rzucić

79
00:07:04,330 --> 00:07:10,610
alert i dlatego użyję efektu użycia, aby użyć haka efektu, który oferuje React, które

80
00:07:10,690 --> 00:07:16,690
tu znajdujemy, chcę go użyć i mogę go po prostu zaimplementować po zainicjowaniu

81
00:07:16,710 --> 00:07:24,490
reduktora, powiedzmy: dokładna pozycja nie ma większego znaczenia. Użyj tutaj efektu, który powinien się ponownie uruchamiać za

82
00:07:24,880 --> 00:07:28,670
każdym razem, gdy błąd się zmienia, więc jeśli

83
00:07:28,750 --> 00:07:34,510
ustawimy go jako błąd, aby nie był błędem, tutaj sprawdzam, czy błąd jest prawdziwy,

84
00:07:34,510 --> 00:07:39,010
więc jeśli mamy błąd i jeśli go mamy, to ja

85
00:07:39,010 --> 00:07:41,380
może wysłać alert, wystąpił błąd.

86
00:07:41,380 --> 00:07:48,920
Chcę wypisać tutaj mój błąd i powinien to być komunikat o błędzie, ponieważ to właśnie tutaj ustawiam,

87
00:07:48,920 --> 00:07:55,270
ustawiam swój błąd na komunikat, aby powinien być ciągiem, który mogę wypisać, a następnie

88
00:07:55,270 --> 00:08:04,610
dodam przycisk gdzie mówię OK, co po prostu to odrzuca. Teraz również ważne, jeśli otrzymamy błąd,

89
00:08:04,610 --> 00:08:11,180
nie chcę odejść. Aby uniknąć tego, chcę się upewnić, że

90
00:08:11,210 --> 00:08:19,670
tutaj, to rekwizyty, ta nawigacja tutaj jest faktycznie wykonywana tylko wtedy, gdy nie znajdziemy się w tym bloku catch.

91
00:08:19,700 --> 00:08:27,390
Zasadniczo tutaj po bloku if else, ale wciąż w bloku try, tam chcę przejść dalej.

92
00:08:27,410 --> 00:08:29,300
A teraz spróbujmy jeszcze raz, wróćmy

93
00:08:29,300 --> 00:08:30,710
tutaj, edytuj to, dodaj

94
00:08:30,710 --> 00:08:33,920
wykrzyknik, kliknij gdzieś indziej, kliknij zapisz, a teraz dostaję komunikat

95
00:08:33,920 --> 00:08:40,730
o błędzie i zostaję na tej stronie, a także resetuje się. Mogę to dodać ponownie, kliknij

96
00:08:40,760 --> 00:08:43,430
tutaj i zniknęło.

97
00:08:43,700 --> 00:08:50,150
Z drugiej strony, jeśli teraz naprawimy ten błąd tutaj w działaniach, czytając go tutaj i wrócimy i

98
00:08:50,150 --> 00:08:52,960
przyjrzymy się temu jeszcze raz, jeśli go

99
00:08:52,970 --> 00:08:57,170
edytuję, dodaj mój wykrzyknik, kliknij gdzieś indziej i kliknij zapisz, teraz

100
00:08:57,170 --> 00:08:59,880
to wszystko działa tak jak powinno.

101
00:08:59,900 --> 00:09:04,200
Więc teraz to naprawdę działa i teraz zachowuje się tak, jak powinno.

102
00:09:04,220 --> 00:09:09,890
Teraz możesz oczywiście dodać do ekranu produktu użytkownika także spinner ładujący i moduł

103
00:09:09,890 --> 00:09:10,840
obsługi błędów.

104
00:09:10,850 --> 00:09:15,800
Więc jeśli usuniesz to, czego nie zrobię tutaj, ale jeśli je usuniesz, obecnie nie dostaniesz

105
00:09:15,800 --> 00:09:17,300
przędzarki, ładującej przędzarki,

106
00:09:17,300 --> 00:09:22,610
również nie dostaniesz błędu, jeśli się nie powiedzie. Aby zaoszczędzić trochę czasu, nie zaimplementuję tego tutaj,

107
00:09:22,610 --> 00:09:26,590
ale możesz to zaimplementować w dokładnie ten sam sposób, co poprzednio, jeśli chcesz.

108
00:09:26,600 --> 00:09:28,670
Więc to zdecydowanie możesz zrobić.