Aby mieć pewność, że się
załadują, ponownie musimy wrócić do twórcy akcji i dodać nową akcję do twórcy akcji zamówień, przepraszam.
Jednym identyfikatorem, którego potrzebuję, jest ustawianie zamówień, tak jak mieliśmy jeden zestaw produktów do ustawiania załadowanych zamówień,
a tutaj mam mojego kreatora
akcji pobierania zamówień, który nie przyjmuje żadnych argumentów, ale który następnie zwraca moją funkcję asynchronicznej wysyłki,
dzięki Redux Thunk i tam ostatecznie wysyłam lub wysyłam nową akcję, w której typem są ustawione zlecenia i gdzie mam
załadowane zamówienia i oczywiście nie powinna to być pusta tablica.
Zamiast tego możemy wypożyczyć logikę od twórcy akcji produktów, od pobrania tam produktów. Możemy wziąć całą tę
logikę, skopiować ją tutaj i przenieść do twórcy akcji zamówień i
uruchomić
ją przed wysłaniem tutaj. Teraz oczywiście musimy to dostroić, na przykład żądanie musi zostać wysłane do
zleceń / U1 i ponownie, które zostanie później zastąpione wartością dynamiczną, na razie jest
to ustalone na sztywno, aby pobrać zamówienia dla tego użytkownika. To powinno być żądanie, chcę to sprawdzić,
w porządku.
Tutaj mam
dane odpowiedzi, teraz mam załadowane zamówienia, które wydają
się być bardziej odpowiednie, wciąż
przeglądam wszystkie dane, które mam, i chcę ustawić tam załadowane zamówienia, ale teraz jest
jedna ważna różnica, Nie tworzę tutaj
nowych produktów, które dodaję do załadowanych zamówień, zamiast oczywiście muszę
tworzyć nowe zamówienia tutaj i w tym celu
musisz zaimportować zamówienie z modelu zamówienia. Teraz też widzę, że brakuje kędzierzawego nawiasu
klamrowego, teraz zanim przejdę do tego, muszę się upewnić, że wychwycę również wszelkie
błędy, które mogą się pojawiać, i tam chcę rzucić błąd, po prostu go ponownie rzuć, upewnij się dociera do mojego
komponentu i potrzebuję
jeszcze jednego zamykającego nawiasu klamrowego, ale teraz z powrotem do naszej logiki
tutaj, gdzie tworzę nowe zamówienia, tam kluczem jest identyfikator,
podobnie jak w przypadku produktów, elementy można znaleźć w moich danych odpowiedzi, ponieważ w zasadzie odzyskaj to tutaj,
więc dane odpowiedzi będą zawierały kluczowy element karty, na przykład, który przechowuje moje
elementy karty, których potrzebuję. Dane odpowiedzi dla danego klucza i tam,. CardItems, to tam
znajduję moje przedmioty, ponieważ to właśnie wysyłamy tutaj w celu przechowywania elementów karty, wtedy moje zamówienie,
które tutaj tworzę, oczywiście również potrzebuje całkowitej kwoty,
otrzymuję to z klucza resData, a następnie tam, jeśli mamy Spójrz na
Firebase, tutaj jest to pole całkowitej kwoty i data.
Cóż, w tym celu tworzę nowy obiekt daty, ale inicjuję go za pomocą klucza resData. data.
Teraz musimy utworzyć nowy obiekt danych, ponieważ klucz resData. data jest tutaj tylko tym ciągiem daty i
potrzebuję obiektu daty, a nie ciągu
daty, dlatego owijamy go, ten ciąg zawijamy tutaj wraz z tworzeniem obiektu daty i dlatego otrzymujemy obiekt
danych
i to jest kolejność, którą tu dodam aby załadować
zamówienia, robimy to dla wszystkich zamówień, które ściągamy, a dzięki temu możemy to wysłać, a teraz
musimy po prostu obsłużyć to w reduktorze zamówień.
Więc jeśli obsłużę ustawione zamówienia i do tego, oczywiście musisz zaimportować ten identyfikator akcji, jedyne, co muszę zrobić, to zwrócić nowy obiekt
stanu, w którym zamówienia są równe akcji. zamówienia i to wszystko, co
musimy zrobić, to
naprawdę proste.
Dlaczego to takie proste?
Ponieważ w kreatorze akcji wykonujemy całą pracę. Tam mapujemy nasze zamówienia, a następnie tutaj,
po prostu mam klucz zamówień w mojej akcji, który
przechowuje wszystkie zamapowane zamówienia, więc właśnie to muszę tutaj przechowywać.
Teraz pozostałym krokiem jest wysłanie zamówień pobierania tutaj na ekranie naszych zamówień. Przejdźmy więc i dodajmy jeszcze raz efekt użycia,
aby to zrobić i wysłać, musimy również zaimportować użycie wysyłki z React
Redux, a następnie tutaj możemy uzyskać dostęp
do tej funkcji wysyłki, wykonując użycie wysyłki, a następnie tutaj
efekt użycia, dodajemy wysyłkę jako zależność, ponieważ tutaj w tej funkcji efektu wysyłam i teraz
potrzebuję swoich akcji zamówień, więc
pozwólcie mi zaimportować wszystko jako akcje zamówień z folderu sklepu, z folderu akcji, z pliku
zamówień iz tym zaimportowanym tutaj , możemy powiedzieć działania zamówień. fetchZamówienia takie, a następnie przejdziemy do realizacji tego żądania i dlatego
teraz, jeśli zapiszemy to i przejdziemy do ekranu zamówień, początkowo jest
puste, ale bardzo szybkie i ładuje wszystkie zamówienia, które przechowaliśmy i są to te trzy zamówienia, które mam tutaj
i oczywiście możemy to rozszerzyć tak jak wcześniej. Teraz ładowanie spinner byłoby również miłe i oczywiście możesz
również zatrzymać
film tutaj i spróbować tego sam.
Zrobię to szybko tak samo jak poprzednio - zaimportuj stan
użycia z React, a następnie skonfiguruj stan isLoading i ustaw isLoading, wykonując stan use i ustawiając go początkowo na false,
a następnie w efekcie, na końcu chcę na użycie asynchroniczne czekaj.
Teraz powiedziałem, że nie możesz lub nie powinieneś tutaj dodawać asynchronizacji, więc możemy albo użyć tutaj, albo po prostu zawinąć to
w funkcję pomocnika.
Teraz użyję po prostu wywołania then, więc ustawię isLoading na true tutaj, a następnie dodam potem tutaj i kiedy to zostanie zrobione,
wiem, że mamy odpowiedź, więc tutaj ustawię isLoading na false.
Teraz zauważ, że nie mam tutaj obsługi błędów, więc jeśli
to się nie powiedzie, nie zajmiemy się tym,
zamiast tego zawsze będziemy w stanie ładowania, więc
oczywiście możesz rozważyć dodanie obsługi błędów. Po prostu nie zrobię tego tutaj,
ponieważ pokazałem, jak to działa, aby nie przesadzić z tym
modułem zbytnio, nie zaimplementuję go,
ale mogę, ale oczywiście możesz poradzić sobie z błędami tutaj, jeśli chcesz użyć tego, a
następnie podejdź tutaj
dodając catch, możesz to zrobić tutaj absolutnie.
Skupię
się jednak na części ładującej. Teraz, gdy mam wszystko skonfigurowane, możemy zaimportować wskaźnik
aktywności i zaimportować komponent
widoku, a dla niektórych stylów, również zaimportować interfejs API arkusza stylów z React Native, a następnie sprawdzić, czy jesteśmy w
stanie ładowania, w którym to przypadku I chcę zwrócić tutaj mój wyśrodkowany wskaźnik aktywności z rozmiarem dużego i kolorem, który
powinien być kolorami, które należy zaimportować, a zatem podstawowymi, więc upewnij się, że masz dodany
import kolorów i przy dodanym, tutaj dodam styl równy do stylów. wyśrodkowany lub jak chcesz go nazwać, a teraz dodaj ten
obiekt stylów za pomocą arkusza stylów. Utwórz i tam wyśrodkuj powinien
mieć konfigurację Flex One, uzasadnić centrum treści i wyrównać centrum przedmiotów, tak
jak to. Dzięki temu, jeśli go uratujemy, zobaczymy zamówienia, zobaczymy pokrętło. Znowu ładuje się bardzo szybko,
ale możesz to zobaczyć, jeśli przyjrzysz się uważnie, oto błystka na
ułamek sekundy, a następnie zamówienia są ładowane. Teraz to działa, przechowywanie i pobieranie zamówień
również działa, dzięki czemu zaimplementowaliśmy żądania HTTP i używamy serwera do przechowywania danych w tej aplikacji.