1
00:00:02,200 --> 00:00:06,570
Zanim przejdziemy do aktualizacji lub edycji danych lub usuwania ich, upewnijmy się

2
00:00:06,680 --> 00:00:10,810
również, że początkowo nie widzimy danych zastępczych, ale faktycznie widzimy ładujący

3
00:00:10,810 --> 00:00:16,660
się spinner, a może także komunikat, jeśli nie ma danych do załadowania lub komunikat o błędzie,

4
00:00:16,840 --> 00:00:19,810
jeśli mamy błąd i w tym celu

5
00:00:19,810 --> 00:00:23,400
zacznijmy od tarczy ładującej. Na ekranie przeglądu produktów

6
00:00:23,470 --> 00:00:28,270
chcę pokazać spinner podczas oczekiwania na dane. W tym celu musimy przede wszystkim

7
00:00:28,270 --> 00:00:32,430
wiedzieć, czy ładujemy, czy nie, i możemy to kontrolować za pomocą stanu użytkowania,

8
00:00:32,440 --> 00:00:34,850
a więc stanu wewnętrznego w tym komponencie.

9
00:00:35,140 --> 00:00:42,910
Tak więc możemy dodać isLoading i ustawić isLoading, a następnie po prostu użyć tutaj stanu w ten sposób i początkowo nie

10
00:00:42,910 --> 00:00:45,890
ładujemy, więc ustawiam stan początkowy na false,

11
00:00:46,630 --> 00:00:51,610
a teraz tutaj, kiedy wysyłamy to, więc tutaj w użyciu efekt, ustawiam isLoading

12
00:00:51,610 --> 00:00:56,130
do true oczywiście, ale kiedy skończymy, chcę ustawić z powrotem na false.

13
00:00:56,170 --> 00:01:03,610
Teraz dobrą rzeczą jest to, że wysyłka tutaj powoduje wysłanie naszej akcji pobierania produktów, a zatem to tutaj daje nam

14
00:01:03,610 --> 00:01:04,780
obietnicę, więc tutaj

15
00:01:04,840 --> 00:01:10,690
mogę dodać, a następnie złapać później, aby zrobić błąd, aby coś zrobić, gdy to nastąpi.

16
00:01:10,870 --> 00:01:15,670
Możesz także użyć funkcji asynchronicznej oczekiwania, ale nie można jej używać w

17
00:01:15,670 --> 00:01:20,910
ten sposób tutaj, w efekcie użycia, to nie jest po prostu sposób użycia efektu użycia.

18
00:01:20,910 --> 00:01:25,910
Więc jeśli chciałbyś użyć tutaj asynchronizacji, musiałbyś zawinąć to w osobną

19
00:01:25,910 --> 00:01:32,720
funkcję, którą musisz stworzyć w swoim efekcie, np. Ładować produkty, które są po prostu obojętną funkcją

20
00:01:32,720 --> 00:01:37,350
opakowania, która wygląda tak, może z ustawionym ładowaniem tam też.

21
00:01:37,350 --> 00:01:43,530
Teraz możesz dodać asynchronizację, a teraz możesz wywołać ładowanie takich produktów od razu, po prostu opakowanie, które

22
00:01:43,530 --> 00:01:46,530
jest wymagane ze względu na sposób działania efektu

23
00:01:46,530 --> 00:01:48,260
użycia, nie może zwrócić

24
00:01:48,300 --> 00:01:54,030
obietnicy, zrobiłoby to, jeśli użyjesz asynchronizacji tutaj i dlatego użycie asynchronizacji nie jest dozwolone, z

25
00:01:54,030 --> 00:01:55,940
drugiej strony jest to dozwolone.

26
00:01:55,950 --> 00:01:57,520
Więc teraz tutaj,

27
00:01:57,540 --> 00:02:03,060
możemy użyć funkcji czekania tutaj, aby poczekać na zakończenie tej wysyłki, co oznacza, że automatycznie

28
00:02:03,060 --> 00:02:08,670
poczeka na obietnicę, która tam jest, więc dla żądania HTTP, a następnie ustawimy isLoading na

29
00:02:08,670 --> 00:02:10,300
false, gdy to się stanie.

30
00:02:10,710 --> 00:02:16,380
Teraz, aby pokazać pokrętło, na szczęście React Native ma dla nas jeden, wskaźnik aktywności, który automatycznie

31
00:02:16,380 --> 00:02:18,810
będzie wyglądał dobrze na iOS i

32
00:02:18,840 --> 00:02:21,950
Androida, dzięki czemu automatycznie otrzyma domyślny styl platformy i

33
00:02:22,320 --> 00:02:27,630
teraz możemy to wyrenderować, jeśli się ładujemy. Tak więc tam, zamiast

34
00:02:27,630 --> 00:02:34,740
zwracania płaskiej listy, jeśli isLoading jest prawdą, zwrócę inny kawałek jsx, zwrócę

35
00:02:34,740 --> 00:02:42,040
tutaj nowy widok ze wskaźnikiem aktywności. W tym celu oczywiście musisz również zaimportować widok, więc upewnij się, że jest on również dostępny.

36
00:02:44,480 --> 00:02:49,370
Teraz, gdy wróciliśmy ten widok ze wskaźnikiem aktywności, możesz

37
00:02:49,380 --> 00:02:58,310
ustawić rozmiar na duży i kolor na Kolory. na przykład podstawowy i to oczywiście wymaga, aby stałe kolory były importowane,

38
00:02:58,310 --> 00:03:05,830
więc upewnij się, że jest dostępny i na koniec, ale nie mniej ważne, teraz chcę wyśrodkować ten wskaźnik, więc tutaj możemy

39
00:03:05,830 --> 00:03:10,960
dodać styl, który oczywiście możemy ustawić korzystając z arkusza stylów lub tutaj szybko i

40
00:03:11,020 --> 00:03:18,880
brudnie, wygnij justowanie w centrum treści, wyrównaj centrum przedmiotów. Jednak faktycznie użyję tutaj arkusza stylów,

41
00:03:18,880 --> 00:03:23,010
ponieważ będziemy go później potrzebować w innym miejscu.

42
00:03:23,110 --> 00:03:33,450
Więc tutaj będę odwoływał się do stylów, powiedzmy wyśrodkowany i zaimportuj arkusz stylów z React

43
00:03:33,450 --> 00:03:41,640
Native, a następnie zejdź tam, dodaj mój obiekt stylów po skonfigurowaniu

44
00:03:41,640 --> 00:03:50,890
opcji nawigacji, style z Arkuszem stylów. utwórz, dodaj do niej wyśrodkowaną właściwość, która ma tę stylizację z

45
00:03:50,890 --> 00:03:57,450
fleksją uzasadniającą wyrównanie zawartości elementów, a teraz przy tym powinniśmy widzieć wyśrodkowany wskaźnik aktywności podczas ładowania.

46
00:03:57,570 --> 00:04:03,790
Więc jeśli to zapiszę, a to się przeładuje, Firebase jest bardzo szybki, więc nie widzisz go tak długo, ale

47
00:04:03,790 --> 00:04:09,580
przez krótki czas widzisz ten ładujący się spinner, z innym wyglądem na iOS i Androida, oczywiście.

48
00:04:12,900 --> 00:04:19,110
Teraz oczywiście ładowanie to jedno, czasem po prostu nie masz żadnych danych, które można by załadować. Powiedzmy, że w

49
00:04:19,110 --> 00:04:25,740
reduktorze sięgamy do produktu. json, który jest źródłem, do którego nie można

50
00:04:25,740 --> 00:04:28,750
pobrać żadnych danych, dlatego otrzymujemy pusty ekran.

51
00:04:29,150 --> 00:04:32,920
Cóż, to jest coś, co możemy zrobić, ale nie

52
00:04:33,060 --> 00:04:39,540
jest to najlepsza możliwa obsługa, więc chcę dodać kolejną, jeśli sprawdź, gdzie sprawdzam, czy isLoading jest fałszywy, więc

53
00:04:41,530 --> 00:04:48,190
jeśli nie ładujemy już więcej, a moje produkty tutaj, długość jest równa zero, co oznacza, że nie mamy produktów.

54
00:04:48,190 --> 00:04:54,340
W takim przypadku zwrócę tutaj również moją wyśrodkowaną treść, ale tam chcę po prostu

55
00:04:54,340 --> 00:04:58,230
wydrukować tekst, w którym mówię, że nie znaleziono

56
00:04:58,240 --> 00:05:08,530
żadnych produktów, być może zacznij dodawać niektóre i oczywiście musisz upewnić się, że importujesz komponent tekstowy, a ty mogę również przypisać tam swoje

57
00:05:08,530 --> 00:05:15,880
style czcionek lub utworzyć domyślny komponent opakowania tekstu, którego używaliśmy we wcześniejszych modułach, na razie po prostu

58
00:05:15,880 --> 00:05:17,140
będę mieć

59
00:05:17,140 --> 00:05:22,900
taki tekst i tak właśnie jest. Oczywiście, jak tylko zmienię to z powrotem

60
00:05:22,900 --> 00:05:31,360
na poprawny adres URL, w którym faktycznie znajdujemy dane, to działa. Wreszcie, możesz także mieć

61
00:05:31,360 --> 00:05:33,680
błąd. Powiedzmy, że nie

62
00:05:33,700 --> 00:05:35,850
mam. tam jest

63
00:05:35,860 --> 00:05:41,610
oczywiście błąd, którego zwykle byśmy unikali, ponieważ jest to po prostu literówka po naszej

64
00:05:41,620 --> 00:05:48,010
stronie, ale niestety serwery Firebase są stosunkowo solidne. Tak więc, aby sfałszować, że na przykład się zepsuł lub

65
00:05:48,010 --> 00:05:48,520
coś

66
00:05:48,550 --> 00:05:54,850
poszło nie tak, po prostu zepsuję adres URL w ten sposób, który jest nieprawidłowym adresem URL, a teraz widzimy nieskończony spinner.

67
00:05:55,120 --> 00:06:04,340
Powodem tego jest fakt, że obecnie nie mamy prawidłowej odpowiedzi. Więc jeśli spojrzymy na naszą akcję tutaj i konsolujemy logujemy te

68
00:06:04,340 --> 00:06:10,490
dane odpowiedzi tutaj, widzimy, że gdy to się ponownie ładuje, pobieranie powinno nastąpić natychmiast,

69
00:06:14,420 --> 00:06:16,220
ale nie otrzymujemy żadnych

70
00:06:19,170 --> 00:06:20,950
danych wyjściowych,

71
00:06:21,060 --> 00:06:23,130
nie widzimy niczego, co zostanie

72
00:06:23,160 --> 00:06:29,760
zarejestrowane to, po prostu dostajemy ostrzeżenie o odrzuceniu obietnicy w pewnym momencie, więc wygląda na to,

73
00:06:29,970 --> 00:06:32,470
że po prostu otrzymujemy błąd, a

74
00:06:32,820 --> 00:06:34,870
teraz nie zajmujemy się błędem.

75
00:06:34,890 --> 00:06:39,990
Teraz, jeśli użyjesz obietnic bez asynchronicznego oczekiwania, po prostu dodasz instrukcję catch.

76
00:06:39,990 --> 00:06:41,720
W tym przypadku

77
00:06:41,720 --> 00:06:48,660
używamy funkcji async oczekuj, więc zawijamy to do bloku try, cały ten kod, który ostatecznie chcemy

78
00:06:48,660 --> 00:06:52,960
uruchomić, jeśli wszystko się powiedzie i wyłapie jakieś błędy

79
00:06:52,960 --> 00:06:57,340
tutaj, więc blok try catch. W tym miejscu pojawia się potencjalny

80
00:06:57,340 --> 00:07:00,820
błąd i teraz, gdy ten błąd został tutaj dostrzeżony, możemy go

81
00:07:00,820 --> 00:07:06,460
obsłużyć, na przykład wysłać go na nasz własny serwer analityczny lub zrobić wszystko, co chcemy, a następnie może

82
00:07:06,670 --> 00:07:11,740
również go ponownie wyrzucić, oczywiście jeśli wszystko, co robisz, to przepisując go, nie musiałbyś dodawać

83
00:07:11,740 --> 00:07:17,080
tego bloku catch catch, ale zazwyczaj możesz chcieć zrobić więcej tutaj - wyślij na niestandardowy serwer analityczny

84
00:07:17,080 --> 00:07:18,930
lub coś podobnego, jak wspomniałem.

85
00:07:19,150 --> 00:07:23,800
Więc teraz ponownie wyrzucamy błąd, wciąż nie lepiej, nadal

86
00:07:23,860 --> 00:07:29,890
powoduje błąd i oprócz próby złapania tego, powinniśmy dodać tutaj jeszcze jedną

87
00:07:29,890 --> 00:07:32,890
kontrolę przed rozpakowaniem treści odpowiedzi,

88
00:07:32,890 --> 00:07:38,770
powinniśmy również sprawdzić, czy odpowiedź ok, jest źle, jeśli to nieprawda.

89
00:07:38,770 --> 00:07:44,670
OK jest polem dostępnym dla tego obiektu odpowiedzi i jest to po prostu prawda, jeśli odpowiedź

90
00:07:44,680 --> 00:07:50,800
znajduje się w zakresie 200 kodów stanu. Jeśli jest w innym zakresie, na przykład dlatego,

91
00:07:50,800 --> 00:07:55,360
że nie masz uwierzytelnienia ani nic podobnego, domyślnie interfejs API pobierania nie zgłasza błędu.

92
00:07:55,360 --> 00:08:01,000
Jednak w tym przypadku chcę zgłosić błąd, abyśmy zawsze znaleźli się w bloku catch, jeśli mamy

93
00:08:01,450 --> 00:08:07,780
kod statusu 400 lub 500 lub jeśli mamy problem z żądaniem sieci, na przykład jeśli żądanie nie może nawet

94
00:08:07,780 --> 00:08:08,790
opuścić urządzenie.

95
00:08:08,980 --> 00:08:15,250
Więc tutaj i to pobierz API specyficzne do obsługi kodów statusu 400 i 500, które normalnie nie spowodowałyby

96
00:08:15,250 --> 00:08:16,590
błędu, wrzucę tutaj

97
00:08:16,600 --> 00:08:21,350
również nowy błąd w tym przypadku, gdy mówię, że coś poszło nie tak,

98
00:08:21,370 --> 00:08:27,850
oczywiście, że możesz nurkować w w tym przypadku również treść odpowiedzi i dowiedz się, co tam jest nie tak,

99
00:08:28,150 --> 00:08:32,910
ale po prostu wyrzucę ten ogólny błąd, a teraz na pewno będziemy mieli błąd,

100
00:08:32,920 --> 00:08:38,750
jeśli coś pójdzie nie tak, jeśli nie odzyskamy naszych danych, ale nadal, po prostu zwróć błąd tutaj.

101
00:08:38,770 --> 00:08:43,020
Ale miejscem, w którym ostatecznie chcę to obsłużyć, jest mój komponent,

102
00:08:43,030 --> 00:08:50,640
komponent ekranu, ponieważ tam chcę wyświetlić komunikat o błędzie. Tak więc mamy tam swój efekt i tak jak

103
00:08:50,830 --> 00:08:58,330
moglibyśmy użyć catch lub procedury obsługi catch, jeśli użyjesz wtedy i catch lub async czekają z próbą catch

104
00:08:58,330 --> 00:08:59,860
w akcji, my

105
00:08:59,920 --> 00:09:01,800
możemy to zrobić również tutaj.

106
00:09:01,840 --> 00:09:09,380
Tak więc tutaj chcę spróbować wysłać to, ale chcę wyłapać wszelkie potencjalne błędy, które mogą się pojawić.

107
00:09:09,400 --> 00:09:10,830
Więc tutaj wychwytuję

108
00:09:10,840 --> 00:09:16,810
błędy, które mogą się pojawić, a ponieważ ponownie tam wrzuciłem swój błąd, właśnie to właśnie zrobiłem tutaj,

109
00:09:16,840 --> 00:09:19,370
prawda, w końcu błąd nas tutaj dotknie.

110
00:09:19,400 --> 00:09:22,750
Więc teraz ostatecznie skończymy w tym bloku catch i teraz,

111
00:09:23,080 --> 00:09:29,740
aby wyświetlić nasze dane o błędach, możemy dodać inny stan - błąd i ustawić błąd, możesz nazwać go tak, jak

112
00:09:29,740 --> 00:09:30,250
chcesz.

113
00:09:30,340 --> 00:09:38,690
Początkowo jest to niezdefiniowane, ponieważ początkowo nie mam błędu, ale potem wywołam set error i ustawię to

114
00:09:38,690 --> 00:09:41,540
na error. wiadomość na przykład, więc

115
00:09:41,540 --> 00:09:43,670
do wiadomości o tym błędzie dostaję.

116
00:09:46,500 --> 00:09:51,330
Nadal oczywiście chcę ustawić ładowanie na false, co się nie zmienia, ponieważ zdecydowanie

117
00:09:51,330 --> 00:09:52,330
nie ładujemy

118
00:09:52,350 --> 00:09:58,920
się już, nawet jeśli wystąpił błąd, ale teraz mamy również ten stan błędu, którego możemy użyć, możemy go użyć

119
00:09:58,920 --> 00:10:01,490
do sprawdzenia to tutaj. Jeśli mamy

120
00:10:01,500 --> 00:10:08,820
błąd, więc jeśli to prawda, nie muszę nawet kontynuować, zamiast tego chcę tutaj zwrócić moją wyśrodkowaną treść jsx, ale

121
00:10:08,820 --> 00:10:10,130
tam chcę tylko wydrukować

122
00:10:10,140 --> 00:10:18,620
tekst, na którym, na przykład, wystąpił błąd , lubię to. Jeśli teraz to zrobimy, zobaczysz, że widzimy

123
00:10:18,650 --> 00:10:20,290
pokrętło, ale

124
00:10:20,320 --> 00:10:21,370
potem

125
00:10:21,380 --> 00:10:24,990
ten tekst błędu. Teraz oczywiście nie pozwala to użytkownikowi

126
00:10:24,990 --> 00:10:27,800
na wiele, możemy teraz po prostu nawigować dalej, a następnie

127
00:10:29,820 --> 00:10:36,820
wrócić, ale możemy chcieć dać użytkownikowi możliwość ponownej próby, może dodając tutaj przycisk. Więc teraz, z zaimportowanym przyciskiem, możemy przejść do

128
00:10:36,820 --> 00:10:45,860
tego miejsca, a następnie dodać ten składnik przycisku z tytułem ponownej próby i oczywiście to od Ciebie zależy, jak chcesz, aby

129
00:10:45,870 --> 00:10:49,810
użytkownik zajął się tym, a tam możesz dodać moduł

130
00:10:49,920 --> 00:10:55,260
obsługi onPress i teraz, aby móc ponownie załadować, faktycznie wezmę tutaj tę

131
00:10:55,350 --> 00:10:58,770
funkcję produktów ładujących, usunę ją z efektu i

132
00:10:58,770 --> 00:11:04,290
sprawię, że będzie to regularna funkcja tego komponentu, abym mógł wywoływać ją od

133
00:11:04,290 --> 00:11:06,030
wewnątrz efektu użycia.

134
00:11:06,090 --> 00:11:10,740
Teraz jednak musi to być również zależność i dlatego, aby uniknąć nieskończonej

135
00:11:10,800 --> 00:11:19,350
pętli, należy ją zawinąć w wywołanie zwrotne użycia, więc zaimportujmy tutaj wywołanie zwrotne i zawińmy tę funkcję tutaj, gdzie zależność jest moją funkcją

136
00:11:19,350 --> 00:11:20,920
wysyłania, możesz również dodaj

137
00:11:20,980 --> 00:11:21,870
zestaw

138
00:11:21,870 --> 00:11:23,760
isLoading i ustaw błąd,

139
00:11:23,800 --> 00:11:27,600
ale wszystkie te funkcje nigdy się nie zmienią, dlatego możesz

140
00:11:27,640 --> 00:11:32,440
je również pominąć i dlatego nigdy nie będzie można go odtworzyć, co jest

141
00:11:32,440 --> 00:11:34,480
dobre, ale teraz możemy używać

142
00:11:34,630 --> 00:11:37,930
ładowanych produktów jako zależności w użyciu, a teraz,

143
00:11:37,960 --> 00:11:43,120
ponieważ nie ma go w środku z funkcji efektu użycia, możemy użyć ładować produkty

144
00:11:43,120 --> 00:11:45,750
gdziekolwiek indziej w tym komponencie, a gdziekolwiek

145
00:11:45,750 --> 00:11:51,700
indziej część jest tutaj, ten przycisk, jeśli go naciśniemy, chcę również ponownie uruchomić ładowanie produktów, a

146
00:11:52,000 --> 00:12:02,260
także, co nie mniej ważne, dać przycisk kolor kolorów. podstawowy. Dzięki temu wygląda na to, że mam tutaj błąd

147
00:12:02,260 --> 00:12:07,590
podczas importowania. Tak, mam już zaimportowany przycisk, więc pozbądźmy się drugiego importu, zaimportuj go tylko

148
00:12:07,780 --> 00:12:09,480
raz, a teraz dostaniesz

149
00:12:09,520 --> 00:12:16,450
to, że to faktycznie przeładuje, w końcu zgłosić błąd i możesz nacisnąć ponownie, aby go ponownie załadować, jednak zawsze

150
00:12:16,460 --> 00:12:20,810
widzimy komunikat o błędzie po prostu dlatego, że nigdy nie usuwamy błędu,

151
00:12:20,840 --> 00:12:22,850
a jeśli mamy błąd, zawsze

152
00:12:22,850 --> 00:12:25,220
go zwracamy, nawet nie ładujemy prządka.

153
00:12:25,220 --> 00:12:31,010
Dlatego powinniśmy upewnić się, że za każdym razem, gdy ładujemy tutaj nasze produkty, ustawiamy błąd

154
00:12:31,010 --> 00:12:36,780
z powrotem na zero, więc resetujemy błąd. Nawiasem mówiąc, wiele wywołań stanu ustawionych obok siebie będzie grupowanych razem

155
00:12:36,800 --> 00:12:39,550
przez React, więc nie doprowadzi to do cykli ponownego renderowania wielu

156
00:12:39,560 --> 00:12:41,730
komponentów, można używać tego w ten sposób.

157
00:12:41,750 --> 00:12:46,490
Jeśli teraz kliknę przycisk „spróbuj ponownie”, możemy spróbować ponownie. Oczywiście nigdy się to nie powiedzie, ponieważ nasz

158
00:12:46,490 --> 00:12:53,540
adres URL jest uszkodzony, ale nadal możemy poradzić sobie z tym błędem. Po tym jednak powrócę do moich działań i naprawię ten

159
00:12:53,540 --> 00:12:57,610
błąd, poprawiając ponownie ten adres URL, a teraz powinno to również

160
00:12:57,740 --> 00:13:00,560
poprawnie załadować nasze dane i wyświetlić je.