Więc teraz, gdy dodaliśmy przechowywanie, pobieranie, aktualizację i usuwanie, a zatem wszystkie funkcje
crud i chcieliśmy pokazać błąd podczas ładowania i błędy
obsługi, brakuje dwóch rzeczy.
Jednym z nich jest to, że kiedy faktycznie składamy zamówienie, wysyłamy je również na serwer i przechowujemy je również
tam, a nie tylko lokalnie, ponieważ teraz,
gdy coś zamawiamy, widzimy to tutaj, ale zaraz po tym przeładowujemy aplikację, ponieważ
nie przechowujemy jej na serwerze, który został utracony,
więc to jedno.
Drugą rzeczą jest oczywiście to, że pokazujemy tutaj tylko spinner
ładujący i tutaj również obsługujemy błędy. Na ekranie administratora, jeśli coś
pójdzie nie tak, nie otrzymamy błędu, również tutaj, jeśli to edytujemy i
przesyłamy, nie widzimy ładowania tarczy podczas oczekiwania na przesłanie.
To jest coś, co moglibyśmy ulepszyć i
to jest właśnie ta część, od której chcę zacząć.
Więc tutaj na ekranie edycji produktu, gdy wysyłamy aktualizację lub tworzenie, w obu przypadkach
to oczywiście zajmuje trochę czasu i rzeczywiście otrzymujemy obietnicę tutaj, ponieważ zarówno w aktualizacji, jak i tworzeniu
akcji produktu, używamy funkcji Redux Thunk zwracanie tutaj asynchronicznej funkcji wysyłki, która w związku z
tym zwraca obietnicę, która jest zatem zwracana w ramach naszego wywołania funkcji wysyłki
W związku z tym faktycznie otrzymujemy informacje, czy czekamy na odpowiedź, czy otrzymaliśmy
błąd, czy też skończymy, po
prostu musimy go
użyć i oczywiście możemy go użyć w podobny sposób, jak wcześniej, ze stanem użytkowania zaimportowanym z React,
a następnie zarządzając ładowaniem i stanem błędu tutaj. Na marginesie, możesz oczywiście również pracować z
reduktorem, w którym łączysz oba stany razem, jeśli chcesz za pomocą haka reduktora.
Tutaj jednak pozostanę przy isLoading i ustawię isLoading i początkowo oczywiście jest to fałsz, a także mam błąd i
ustawiam tutaj zmienne błędu przy użyciu takiego stanu, który początkowo jest niezdefiniowany, a teraz musimy to ustawić, ponieważ „
ponownie wysyłamy działania lub gdy pojawiają się błędy.
Więc tutaj, gdy mamy zamiar to wysłać, bez względu na to, czy
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.
Teraz, gdy skończymy, chcę zrobić coś innego, ale najpierw musimy poczekać na
zakończenie wysyłki.
Teraz możemy zatem ponownie przekształcić to w funkcję asynchroniczną, tak żebym mógł użyć tam, aby
poczekać na słowo kluczowe, alternatywą byłoby nie włączenie tego w funkcji asynchronicznej i po prostu dodanie wtedy
i przechwycenie,
to też działałoby, ale Lubię używać asynchronizacji czekaj. Możemy teraz poczekać na zakończenie obu wysyłek, oczywiście tylko
jeden z nich będzie działał, ponieważ jest to warunek if, ale możemy poczekać
na zakończenie, a zatem po bloku, wiemy, że
zostanie to wykonane, więc tutaj można ustawić isLoading z powrotem na false. Więc to jest stan ładowania, teraz, aby poradzić
sobie z błędami, musimy po prostu owinąć to blokiem catch catch i możemy faktycznie owinąć cały
blok if tutaj za pomocą try catch, więc weźmy to, przenieś tutaj, a następnie złap potencjalny błędy, które
mogą się pojawiać tu i teraz tutaj, oczywiście chcę ustawić mój błąd na
błąd,
który dostaję tutaj lub na komunikat o błędzie, że się tu dostaję Teraz ustawiamy błąd,
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
z React Native, wskaźnik aktywności z
React Native i aby pokazać błąd, chcę również rzucić alert,
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,
zanim zwrócę formularz, sprawdzę, czy isLoading jest prawdziwy, a jeśli tak, zwrócę mój widok tutaj ze wskaźnikiem aktywności
tam i tam, „ Ustawię rozmiar na duży i ustawię kolor na kolory, a do tego musisz upewnić się,
że importujesz te kolory jako stały podstawowy. Upewnij się więc, że masz tutaj
stałą importowaną kolorystykę, która jest wymagana, a teraz użyję arkusza stylów tutaj, aby dodać
nowy styl, ten styl wyśrodkowany, a dokładniej, tutaj dodam wyśrodkowany i tak, moglibyśmy
również zlecić to oddzielny element owijający, jeśli chcesz.
Tam ustawię flex na jeden, wyjustuję zawartość do środka, a także wyrównam elementy do środka, w ten sposób.
Teraz możemy zastosować ten wyśrodkowany styl tutaj do widoku, który owijam wokół wskaźnika aktywności, ustawiając
tutaj styl na style. wyśrodkowany.
Teraz powinniśmy to zobaczyć podczas ładowania i na marginesie, nie powinniśmy też nawigować wstecz,
zanim skończymy.
Więc jeśli dodam lub usunę ten wykrzyknik, a następnie pozostawię to wejście, aby zostało przesłane, i
kliknę przycisk
Zapisz, zobaczyłeś ładowanie tarczy i my nawigujemy tylko po tym.
Teraz Firebase jest super szybki, ale tak właśnie się stało.
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,
teraz przechowuję odpowiedź tutaj w stały, ponieważ teraz naprawdę mnie to obchodzi, chcę
się upewnić, że jeśli odpowiedź nie jest w porządku, więc jeśli
mamy kod statusu 400 lub 500, również rzucam nowy
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
również zgłaszali błąd w tym przypadku. Nawiasem mówiąc, zrobię to
samo, aby usunąć przed przetestowaniem tego wymuszonego błędu, który zaimplementowałem.
Więc tutaj, aby usunąć, chcę to sprawdzić i oczywiście tutaj,
muszę również uzyskać odpowiedź, czekając na pobranie tutaj. OK, z tym, zobaczmy, czy ten
wymuszony błąd aktualizacji z powodu odrzucenia jest tutaj,
jeśli to ma wpływ. Jeśli teraz wrócę tutaj do administratora, zacznę to
dodawać, dodam wykrzyknik
i klikam to, a teraz zobaczysz, że aktualizacja jest po prostu odrzucona, więc nie widzimy tutaj wykrzyknika,
ale także nie otrzymuję komunikatu o błędzie, co ma sens, ponieważ nie mam logiki, aby to zrobić.
Jak możemy sobie z tym poradzić?
Jak powiedziałem, chcę rzucić
alert i dlatego użyję efektu użycia, aby użyć haka efektu, który oferuje React, które
tu znajdujemy, chcę go użyć i mogę go po prostu zaimplementować po zainicjowaniu
reduktora, powiedzmy: dokładna pozycja nie ma większego znaczenia. Użyj tutaj efektu, który powinien się ponownie uruchamiać za
każdym razem, gdy błąd się zmienia, więc jeśli
ustawimy go jako błąd, aby nie był błędem, tutaj sprawdzam, czy błąd jest prawdziwy,
więc jeśli mamy błąd i jeśli go mamy, to ja
może wysłać alert, wystąpił błąd.
Chcę wypisać tutaj mój błąd i powinien to być komunikat o błędzie, ponieważ to właśnie tutaj ustawiam,
ustawiam swój błąd na komunikat, aby powinien być ciągiem, który mogę wypisać, a następnie
dodam przycisk gdzie mówię OK, co po prostu to odrzuca. Teraz również ważne, jeśli otrzymamy błąd,
nie chcę odejść. Aby uniknąć tego, chcę się upewnić, że
tutaj, to rekwizyty, ta nawigacja tutaj jest faktycznie wykonywana tylko wtedy, gdy nie znajdziemy się w tym bloku catch.
Zasadniczo tutaj po bloku if else, ale wciąż w bloku try, tam chcę przejść dalej.
A teraz spróbujmy jeszcze raz, wróćmy
tutaj, edytuj to, dodaj
wykrzyknik, kliknij gdzieś indziej, kliknij zapisz, a teraz dostaję komunikat
o błędzie i zostaję na tej stronie, a także resetuje się. Mogę to dodać ponownie, kliknij
tutaj i zniknęło.
Z drugiej strony, jeśli teraz naprawimy ten błąd tutaj w działaniach, czytając go tutaj i wrócimy i
przyjrzymy się temu jeszcze raz, jeśli go
edytuję, dodaj mój wykrzyknik, kliknij gdzieś indziej i kliknij zapisz, teraz
to wszystko działa tak jak powinno.
Więc teraz to naprawdę działa i teraz zachowuje się tak, jak powinno.
Teraz możesz oczywiście dodać do ekranu produktu użytkownika także spinner ładujący i moduł
obsługi błędów.
Więc jeśli usuniesz to, czego nie zrobię tutaj, ale jeśli je usuniesz, obecnie nie dostaniesz
przędzarki, ładującej przędzarki,
również nie dostaniesz błędu, jeśli się nie powiedzie. Aby zaoszczędzić trochę czasu, nie zaimplementuję tego tutaj,
ale możesz to zaimplementować w dokładnie ten sam sposób, co poprzednio, jeśli chcesz.
Więc to zdecydowanie możesz zrobić.