Tak więc przechowywanie jest świetne, pobieranie byłoby również słodkie, a na koniec chcę się upewnić,
że kiedy np. Odwiedzimy ekran przeglądu produktów, po prostu
skontaktujemy się z serwerem i uzyskamy stamtąd wszystkie produkty, aby na tym ekranie
, za każdym
razem, gdy go odwiedzamy, ładujemy najnowsze produkty.
Teraz musimy wysłać żądanie HTTP stamtąd, a
zatem w końcu chcę wysłać nową akcję Redux, która dotrze do serwera, stamtąd otrzymam
moje produkty, a następnie ustawię produkty w moim sklepie. Potrzebuję tutaj zupełnie nowej akcji,
ustawiania produktów, których wcześniej nie potrzebowałem, ponieważ pracowaliśmy tylko z produktami pozorowanymi, ale teraz
już tak nie jest, więc gotowe produkty powinny zostać teraz wysłane i będę potrzebował
nowego twórcy akcji które nazywam pobierz produkty. W tym celu nie mam identyfikatora, ponieważ nigdy nie wyślę
tego jako akcji, która powinna dotrzeć do reduktora,
zamiast tego będzie to mój twórca akcji z kodem asynchronicznym z żądaniem HTTP.
Nie będzie potrzebował żadnych argumentów, ale dzięki funkcji Redux Thunk zwraca funkcję, która pobiera tę funkcję wysyłki jako
argument, a tam na koniec chcę wysłać obiekt
akcji, w którym ustawiono typ produktów i gdzie chcę przesłać dalej produkty, ale oczywiście nie powinna to być
pusta tablica, ale produkty, które otrzymuję z mojego API. Możemy więc w pewnym sensie skopiować ten
kod tutaj, w tym tutaj część asynchroniczną wysyłki, aż do miejsca, w którym otrzymujemy dane odpowiedzi, skopiujemy
je z produktu i
zastąpimy tutaj tą częścią, a teraz to, co robimy, to wysyłamy żądanie na ten sam
adres URL, co wcześniej, co ma sens, ponieważ tam
są przechowywane produkty.
Jednak teraz chcę ustawić żądanie pobierania i tak naprawdę jest to domyślne, gdy korzystamy
z funkcji pobierania, więc nie musimy tego ustawiać. W przypadku żądania get nie musisz również ustawiać
żadnych
nagłówków i nie możesz ustawić treści, więc właściwie tutaj możemy całkowicie pozbyć się drugiego
argumentu przy pobieraniu, po prostu wysyłamy takie żądanie pobierania.
Teraz odpowiedź zwróci nasze dane, ale teraz jest jedna ważna cecha formatu tych
danych i najlepiej, jeśli po prostu to zobaczymy.
Pozwól więc, że konsola zarejestruje tutaj dane odpowiedzi i skomentuje to na chwilę lub możemy je tam zostawić, nie
wyrządza to żadnej
szkody, nie robi też nic użytecznego,
nie obsługujemy tego w reduktorze ale zalogujmy się i przejdźmy teraz do ekranu przeglądu
produktów i upewnijmy się, że tam wysyłamy akcję pobierania produktów. Teraz, na szczęście, mam już dostęp do
funkcji wysyłania Redux w przeglądzie produktów, więc teraz muszę
tylko dodać efekt użycia, aby móc go uruchomić po każdym załadowaniu tego komponentu.
Więc tutaj mogę dodać efekt użycia, a tutaj w mojej funkcji mogę wywołać wysyłkę i teraz sięgnąć do
moich akcji produktu, które dlatego muszę zaimportować
jako akcje produktów z akcji sklepu produkty takie jak ten, które powinny być akcjami i teraz użyj akcje produktów tutaj, aby uruchomić akcję pobierania produktów, która
w końcu spowoduje żądanie HTTP i ten efekt powinien być uruchamiany za każdym
razem, gdy mój komponent zostanie załadowany. Mogę więc dodać pustą tablicę i dodać moją jedyną zależność,
którą mam, czyli wysyłanie, tutaj
jest to jedyna zależność, którą definiujemy wewnątrz naszego komponentu, tak że tak naprawdę nigdy się nie uruchomi.
Uruchamia się on tylko wtedy, gdy ten komponent jest załadowany i dokładnie tak
powinno być, za każdym
razem, gdy odwiedzę ekran, chcę tutaj uruchomić ten efekt.
Więc jeśli teraz to zapiszę, zapiszmy to, a teraz, gdy się
ładuje, zobaczysz tutaj w dzienniku, to właśnie stało się tutaj zarówno na Androidzie, jak i iOS, dlatego
widzę to dwa razy.
To właśnie otrzymałem w
końcu, ten obiekt został zwrócony przez Firebase.
Jest to obiekt ze wszystkimi moimi produktami i mam tylko jeden, dlatego widzę tutaj tylko jeden i każdy obiekt
jest dopasowany do jego unikalnego identyfikatora, ale
to ważne.
Nie wracamy do tablicy, otrzymujemy obiekt z unikatowymi identyfikatorami jako klucze, a wartości tych kluczy
są wtedy danymi mojego obiektu i musimy tylko wiedzieć, że do prawidłowej obsługi.
Wracając do naszej
akcji, tak wyglądają dane odpowiedzi,
oczywiście w mojej aplikacji pracuję jednak z tablicą, więc muszę to przekształcić.
Więc moje załadowane produkty lub jakkolwiek chcesz to tutaj nazwać, powinny
być pustą tablicą, a teraz możemy zapętlić ten obiekt, aby odwzorować
dane obiektu, produkty w obiekcie na produkty w tablicy.
Jest to stosunkowo proste, możemy dodać tutaj pętlę for / in za pomocą naszego klucza,
w którym przeglądamy wszystkie dane odpowiedzi, które pobraliśmy tutaj na końcu, a następnie tutaj dodam każdy produkt do moich załadowanych produktów za pomocą
push, aby to tablica rośnie z czasem, a to,
co tu dodam, to po prostu nowy produkt, korzystający z modelu produktu, który musisz zaimportować, więc
upewnij
się, że masz ten import tutaj, wskazując folder twoich modeli i tam w
pliku produktu, a ja stwórz
tutaj nowy produkt, w którym mój identyfikator jest tym kluczem, ponieważ jest to ten unikalny identyfikator, który mamy w
tym obiekcie, dla którego zapętlamy, a następnie ta rzecz użytkownika, czyli wciąż U1, fałszywe dane, ponieważ nie mamy
żadnych danych użytkownika od czasu do czasu musimy przyjrzeć się obiektowi, który wróciliśmy z Firebase, aby uzyskać tytuł i
tak dalej.
Tak więc tutaj naszym tytułem tego nowego produktu, który tworzymy, jest po prostu resData dla danego klucza. tytuł i to samo oczywiście
tutaj
dla imageUrl, więc. imageUrl. Do opisu
i oczywiście także do ceny, jak ta. To dodaje wszystko do załadowanych produktów, a teraz załadowane produkty będą
zapełnioną tablicą, którą mogę dodać tutaj do akcji, która jest wysyłana, do akcji
zestawu produktów.
Jedyną brakującą rzeczą jest to, że teraz idziemy do reduktora i tam możemy poradzić sobie z zestawami produktów, może tutaj
jako pierwszym przypadku, ale oczywiście pozycja nie ma znaczenia. Dodaj zestaw produktów tutaj i
do tego, upewnij się, że importujesz go z pliku działań, a potem jest
to bardzo trywialna rzecz, którą zamierzamy zrobić. Na koniec muszę tylko przywrócić
nowy stan, w którym dostępne produkty są równe działaniu. produkty, więc do produktów, które otrzymałem tutaj w moim kreatorze
akcji, które dodałem do wysłanej akcji. A dla produktu użytkownika
jest bardzo podobny, tam jest akcja. produkty, po prostu filtrowane dla wszystkich produktów, które mają mój identyfikator użytkownika, więc w
tym momencie i ze względu na mój fałszywy kod tutaj, w którym zapisałem mój identyfikator użytkownika, oznacza to
oczywiście, że wszystkie załadowane produkty są traktowane jak moje produkty.
To zostanie zmienione później, gdy dodamy uwierzytelnianie. Tak więc z tym, teraz, jeśli to
się przeładuje, zobaczysz, że zaczynamy od fałszywych danych, ale wtedy jest to
natychmiast zastępowane tymi załadowanymi danymi. Tak więc ładowanie danych działa
dobrze, możemy z tym pracować tak, jak moglibyśmy z naszymi własnymi danymi tutaj.
Oczywiście nie przechowujemy zamówień na serwerze i nic podobnego, ale jesteśmy w stanie załadować nasze
dane, które wcześniej przechowywaliśmy na serwerze.