Teraz, oczywiście, podczas przechowywania zamówienia, byłoby również miło, gdybyśmy zobaczyli
mały spinner, kiedy klikamy przycisk zamówienia teraz, dopóki nie zostanie to zrobione i możemy
to również wdrożyć, wystarczy przejść do ekranu koszyka, który jest gdzie
wysyłamy tę akcję, aby wysłać zamówienie, tutaj wysyłamy, a teraz wysyłamy tutaj,
oczywiście, w końcu zwraca obietnicę, właśnie dlatego, że usuwamy z koszyka, co ma miejsce po kliknięciu tego przycisku i zamówienie, dodaj
zamówienie zwróci obietnica ostatecznie dzięki naszej zmianie, więc wysyłka zwróci obietnicę,
więc tutaj możemy kontrolować nasz stan załadunku.
Teraz, aby uczynić to trochę bardziej czytelnym, przeniosę go tutaj z tej
anonimowej funkcji i faktycznie utworzę nową funkcję przechowywaną w stałej
tutaj w moim komponencie, ale poza drzewem jsx, i nazwiemy tę funkcję obsługi zamówienia wysyłania lub nic podobnego.
To była ta sama funkcja, której
użyłem wcześniej, teraz będę miał to na uwadze do obsługi wysyłania zleceń, a teraz pomysł jest prosty, tutaj dodaj zamówienie zwróci
obietnicę, jak powiedziałem, dlatego wysyłka zwraca obietnicę, więc możemy tutaj dodać asynchronię, aby że możemy
ponownie użyć asynchronizacji, czekać i zarządzać ładowaniem, a być może także stanem błędu, tak jak poprzednio.
Musimy tylko zaimportować stan użytkowania z React i oczywiście dlatego ponownie zainicjować nasz stan.
Mamy tutaj isLoading i ustawiliśmy isLoading, a początkowo to fałsz, a jeśli chcesz, czego nie zrobię tutaj, ale jeśli chcesz, możesz również
dodać
obsługę błędów w taki sam sposób, jak to robiliśmy wcześniej z błędem stanu, może użyć
efektu aby następnie wyświetlić alert i tak dalej, skupię
się na części ładującej.
Więc teraz tutaj, w module
obsługi wysyłania zamówień, wywołam set isLoading i ustawię
to na true, wtedy czekamy na tę wysyłkę, więc czekamy, aż ta obietnica się
skończy i znowu to po prostu niewidocznie owija części w późniejszy blok, ponieważ później I ustawimy
ładowanie z powrotem
na false, nie ładujemy się już i teraz możemy użyć tego, aby wyświetlić wskaźnik aktywności.
Więc zaimportujmy wskaźnik aktywności z React Native tutaj, a to, co chcę zrobić, jest tutaj zamiast
tego przycisku zamówienia
teraz, chcę pokazać ten wskaźnik podczas ładowania. Więc tutaj mogę sprawdzić, czy isLoading jest prawdziwy, w
takim przypadku pokażę mój wskaźnik aktywności z rozmiarem powiedzmy małym i kolorem kolorów, które musisz upewnić się, że jest importowane, podstawowe
i samo zamykające się a jeśli nie ładujemy, to oczywiście
pokażę ten przycisk.
Więc tutaj chcę wyrenderować ten przycisk w innym przypadku i teraz spróbujmy.
Zapiszmy to, dodajmy
to do karty może dwa razy, kliknij teraz
zamówienie, zobaczyliśmy pokrętło na ułamek sekundy tutaj i teraz, jeśli spojrzymy na zamówienia, oto nasze zamówienie.
Teraz upewnijmy się, że zamówienia ładują się również podczas odwiedzania ekranu.