Zanim przejdziemy do aktualizacji lub edycji danych lub usuwania ich, upewnijmy się
również, że początkowo nie widzimy danych zastępczych, ale faktycznie widzimy ładujący
się spinner, a może także komunikat, jeśli nie ma danych do załadowania lub komunikat o błędzie,
jeśli mamy błąd i w tym celu
zacznijmy od tarczy ładującej. Na ekranie przeglądu produktów
chcę pokazać spinner podczas oczekiwania na dane. W tym celu musimy przede wszystkim
wiedzieć, czy ładujemy, czy nie, i możemy to kontrolować za pomocą stanu użytkowania,
a więc stanu wewnętrznego w tym komponencie.
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
ładujemy, więc ustawiam stan początkowy na false,
a teraz tutaj, kiedy wysyłamy to, więc tutaj w użyciu efekt, ustawiam isLoading
do true oczywiście, ale kiedy skończymy, chcę ustawić z powrotem na false.
Teraz dobrą rzeczą jest to, że wysyłka tutaj powoduje wysłanie naszej akcji pobierania produktów, a zatem to tutaj daje nam
obietnicę, więc tutaj
mogę dodać, a następnie złapać później, aby zrobić błąd, aby coś zrobić, gdy to nastąpi.
Możesz także użyć funkcji asynchronicznej oczekiwania, ale nie można jej używać w
ten sposób tutaj, w efekcie użycia, to nie jest po prostu sposób użycia efektu użycia.
Więc jeśli chciałbyś użyć tutaj asynchronizacji, musiałbyś zawinąć to w osobną
funkcję, którą musisz stworzyć w swoim efekcie, np. Ładować produkty, które są po prostu obojętną funkcją
opakowania, która wygląda tak, może z ustawionym ładowaniem tam też.
Teraz możesz dodać asynchronizację, a teraz możesz wywołać ładowanie takich produktów od razu, po prostu opakowanie, które
jest wymagane ze względu na sposób działania efektu
użycia, nie może zwrócić
obietnicy, zrobiłoby to, jeśli użyjesz asynchronizacji tutaj i dlatego użycie asynchronizacji nie jest dozwolone, z
drugiej strony jest to dozwolone.
Więc teraz tutaj,
możemy użyć funkcji czekania tutaj, aby poczekać na zakończenie tej wysyłki, co oznacza, że automatycznie
poczeka na obietnicę, która tam jest, więc dla żądania HTTP, a następnie ustawimy isLoading na
false, gdy to się stanie.
Teraz, aby pokazać pokrętło, na szczęście React Native ma dla nas jeden, wskaźnik aktywności, który automatycznie
będzie wyglądał dobrze na iOS i
Androida, dzięki czemu automatycznie otrzyma domyślny styl platformy i
teraz możemy to wyrenderować, jeśli się ładujemy. Tak więc tam, zamiast
zwracania płaskiej listy, jeśli isLoading jest prawdą, zwrócę inny kawałek jsx, zwrócę
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.
Teraz, gdy wróciliśmy ten widok ze wskaźnikiem aktywności, możesz
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,
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
dodać styl, który oczywiście możemy ustawić korzystając z arkusza stylów lub tutaj szybko i
brudnie, wygnij justowanie w centrum treści, wyrównaj centrum przedmiotów. Jednak faktycznie użyję tutaj arkusza stylów,
ponieważ będziemy go później potrzebować w innym miejscu.
Więc tutaj będę odwoływał się do stylów, powiedzmy wyśrodkowany i zaimportuj arkusz stylów z React
Native, a następnie zejdź tam, dodaj mój obiekt stylów po skonfigurowaniu
opcji nawigacji, style z Arkuszem stylów. utwórz, dodaj do niej wyśrodkowaną właściwość, która ma tę stylizację z
fleksją uzasadniającą wyrównanie zawartości elementów, a teraz przy tym powinniśmy widzieć wyśrodkowany wskaźnik aktywności podczas ładowania.
Więc jeśli to zapiszę, a to się przeładuje, Firebase jest bardzo szybki, więc nie widzisz go tak długo, ale
przez krótki czas widzisz ten ładujący się spinner, z innym wyglądem na iOS i Androida, oczywiście.
Teraz oczywiście ładowanie to jedno, czasem po prostu nie masz żadnych danych, które można by załadować. Powiedzmy, że w
reduktorze sięgamy do produktu. json, który jest źródłem, do którego nie można
pobrać żadnych danych, dlatego otrzymujemy pusty ekran.
Cóż, to jest coś, co możemy zrobić, ale nie
jest to najlepsza możliwa obsługa, więc chcę dodać kolejną, jeśli sprawdź, gdzie sprawdzam, czy isLoading jest fałszywy, więc
jeśli nie ładujemy już więcej, a moje produkty tutaj, długość jest równa zero, co oznacza, że nie mamy produktów.
W takim przypadku zwrócę tutaj również moją wyśrodkowaną treść, ale tam chcę po prostu
wydrukować tekst, w którym mówię, że nie znaleziono
ż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
style czcionek lub utworzyć domyślny komponent opakowania tekstu, którego używaliśmy we wcześniejszych modułach, na razie po prostu
będę mieć
taki tekst i tak właśnie jest. Oczywiście, jak tylko zmienię to z powrotem
na poprawny adres URL, w którym faktycznie znajdujemy dane, to działa. Wreszcie, możesz także mieć
błąd. Powiedzmy, że nie
mam. tam jest
oczywiście błąd, którego zwykle byśmy unikali, ponieważ jest to po prostu literówka po naszej
stronie, ale niestety serwery Firebase są stosunkowo solidne. Tak więc, aby sfałszować, że na przykład się zepsuł lub
coś
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.
Powodem tego jest fakt, że obecnie nie mamy prawidłowej odpowiedzi. Więc jeśli spojrzymy na naszą akcję tutaj i konsolujemy logujemy te
dane odpowiedzi tutaj, widzimy, że gdy to się ponownie ładuje, pobieranie powinno nastąpić natychmiast,
ale nie otrzymujemy żadnych
danych wyjściowych,
nie widzimy niczego, co zostanie
zarejestrowane to, po prostu dostajemy ostrzeżenie o odrzuceniu obietnicy w pewnym momencie, więc wygląda na to,
że po prostu otrzymujemy błąd, a
teraz nie zajmujemy się błędem.
Teraz, jeśli użyjesz obietnic bez asynchronicznego oczekiwania, po prostu dodasz instrukcję catch.
W tym przypadku
używamy funkcji async oczekuj, więc zawijamy to do bloku try, cały ten kod, który ostatecznie chcemy
uruchomić, jeśli wszystko się powiedzie i wyłapie jakieś błędy
tutaj, więc blok try catch. W tym miejscu pojawia się potencjalny
błąd i teraz, gdy ten błąd został tutaj dostrzeżony, możemy go
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
również go ponownie wyrzucić, oczywiście jeśli wszystko, co robisz, to przepisując go, nie musiałbyś dodawać
tego bloku catch catch, ale zazwyczaj możesz chcieć zrobić więcej tutaj - wyślij na niestandardowy serwer analityczny
lub coś podobnego, jak wspomniałem.
Więc teraz ponownie wyrzucamy błąd, wciąż nie lepiej, nadal
powoduje błąd i oprócz próby złapania tego, powinniśmy dodać tutaj jeszcze jedną
kontrolę przed rozpakowaniem treści odpowiedzi,
powinniśmy również sprawdzić, czy odpowiedź ok, jest źle, jeśli to nieprawda.
OK jest polem dostępnym dla tego obiektu odpowiedzi i jest to po prostu prawda, jeśli odpowiedź
znajduje się w zakresie 200 kodów stanu. Jeśli jest w innym zakresie, na przykład dlatego,
że nie masz uwierzytelnienia ani nic podobnego, domyślnie interfejs API pobierania nie zgłasza błędu.
Jednak w tym przypadku chcę zgłosić błąd, abyśmy zawsze znaleźli się w bloku catch, jeśli mamy
kod statusu 400 lub 500 lub jeśli mamy problem z żądaniem sieci, na przykład jeśli żądanie nie może nawet
opuścić urządzenie.
Więc tutaj i to pobierz API specyficzne do obsługi kodów statusu 400 i 500, które normalnie nie spowodowałyby
błędu, wrzucę tutaj
również nowy błąd w tym przypadku, gdy mówię, że coś poszło nie tak,
oczywiście, że możesz nurkować w w tym przypadku również treść odpowiedzi i dowiedz się, co tam jest nie tak,
ale po prostu wyrzucę ten ogólny błąd, a teraz na pewno będziemy mieli błąd,
jeśli coś pójdzie nie tak, jeśli nie odzyskamy naszych danych, ale nadal, po prostu zwróć błąd tutaj.
Ale miejscem, w którym ostatecznie chcę to obsłużyć, jest mój komponent,
komponent ekranu, ponieważ tam chcę wyświetlić komunikat o błędzie. Tak więc mamy tam swój efekt i tak jak
moglibyśmy użyć catch lub procedury obsługi catch, jeśli użyjesz wtedy i catch lub async czekają z próbą catch
w akcji, my
możemy to zrobić również tutaj.
Tak więc tutaj chcę spróbować wysłać to, ale chcę wyłapać wszelkie potencjalne błędy, które mogą się pojawić.
Więc tutaj wychwytuję
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,
prawda, w końcu błąd nas tutaj dotknie.
Więc teraz ostatecznie skończymy w tym bloku catch i teraz,
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
chcesz.
Początkowo jest to niezdefiniowane, ponieważ początkowo nie mam błędu, ale potem wywołam set error i ustawię to
na error. wiadomość na przykład, więc
do wiadomości o tym błędzie dostaję.
Nadal oczywiście chcę ustawić ładowanie na false, co się nie zmienia, ponieważ zdecydowanie
nie ładujemy
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ć
do sprawdzenia to tutaj. Jeśli mamy
błąd, więc jeśli to prawda, nie muszę nawet kontynuować, zamiast tego chcę tutaj zwrócić moją wyśrodkowaną treść jsx, ale
tam chcę tylko wydrukować
tekst, na którym, na przykład, wystąpił błąd , lubię to. Jeśli teraz to zrobimy, zobaczysz, że widzimy
pokrętło, ale
potem
ten tekst błędu. Teraz oczywiście nie pozwala to użytkownikowi
na wiele, możemy teraz po prostu nawigować dalej, a następnie
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
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
użytkownik zajął się tym, a tam możesz dodać moduł
obsługi onPress i teraz, aby móc ponownie załadować, faktycznie wezmę tutaj tę
funkcję produktów ładujących, usunę ją z efektu i
sprawię, że będzie to regularna funkcja tego komponentu, abym mógł wywoływać ją od
wewnątrz efektu użycia.
Teraz jednak musi to być również zależność i dlatego, aby uniknąć nieskończonej
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ą
wysyłania, możesz również dodaj
zestaw
isLoading i ustaw błąd,
ale wszystkie te funkcje nigdy się nie zmienią, dlatego możesz
je również pominąć i dlatego nigdy nie będzie można go odtworzyć, co jest
dobre, ale teraz możemy używać
ładowanych produktów jako zależności w użyciu, a teraz,
ponieważ nie ma go w środku z funkcji efektu użycia, możemy użyć ładować produkty
gdziekolwiek indziej w tym komponencie, a gdziekolwiek
indziej część jest tutaj, ten przycisk, jeśli go naciśniemy, chcę również ponownie uruchomić ładowanie produktów, a
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
podczas importowania. Tak, mam już zaimportowany przycisk, więc pozbądźmy się drugiego importu, zaimportuj go tylko
raz, a teraz dostaniesz
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
widzimy komunikat o błędzie po prostu dlatego, że nigdy nie usuwamy błędu,
a jeśli mamy błąd, zawsze
go zwracamy, nawet nie ładujemy prządka.
Dlatego powinniśmy upewnić się, że za każdym razem, gdy ładujemy tutaj nasze produkty, ustawiamy błąd
z powrotem na zero, więc resetujemy błąd. Nawiasem mówiąc, wiele wywołań stanu ustawionych obok siebie będzie grupowanych razem
przez React, więc nie doprowadzi to do cykli ponownego renderowania wielu
komponentów, można używać tego w ten sposób.
Jeśli teraz kliknę przycisk „spróbuj ponownie”, możemy spróbować ponownie. Oczywiście nigdy się to nie powiedzie, ponieważ nasz
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
błąd, poprawiając ponownie ten adres URL, a teraz powinno to również
poprawnie załadować nasze dane i wyświetlić je.