Tak więc w kreatorze tworzenia akcji produktu, który obecnie jest funkcją, która tylko zwraca
akcję, możemy teraz nieco ją ulepszyć. Zamiast zwracać akcję, możemy teraz zwrócić
tam
inną funkcję dzięki Redux Thunk, dzięki temu pakietowi możemy to zrobić teraz i będzie to
funkcja, która odbiera funkcję wysyłania jako argument, a następnie z kolei musi wysłać akcja. Więc tutaj, w tej funkcji powrotu, po prostu
nie
muszę tego zwracać, ale wysłać tę akcję,
to ważna różnica i brakuje mi tutaj nawiasów klamrowych.
Więc co się stało?
Zmieniam opcję tworzenia produktu, aby była funkcją, którą nadal możemy wywołać z wnętrza naszych komponentów, ale która
teraz może nadal działać tak jak
poprzednio, więc nie musimy zmieniać wszystkich tych twórców akcji, więc możesz trzymać się
starej składni, ale teraz dzięki Redux Thunk, alternatywna składnia, że tak powiem,
jest również obsługiwana tam, gdzie ta funkcja twórcy akcji nie zwraca natychmiast obiektu akcji, ale zamiast
tego, gdzie zwraca funkcję, a jeśli tak, to Redux Thunk wkroczy i upewni się, że
wszystko jest nadal działa i jeśli zwróci funkcję, to jest to funkcja, która musi
otrzymać argument, funkcję wysyłającą, która zostanie przekazana automatycznie przez Redux Thunk, więc Redux Thunk w
końcu
wywoła tę funkcję dla ciebie, a zatem możesz następnie wyślij nową akcję i tutaj, wyślij
rzeczywisty obiekt akcji, który wcześniej chcieliśmy wysłać, ale zanim to
zrobisz, możesz teraz wykonać dowolny kod asynchroniczny, który chcesz i który będzie dozwolony i nie zepsuje twojego Redux przepływ,
ponieważ Redux Thunk zajmie się tym i możesz dowiedzieć się więcej na ten
temat na przykład w moim React Course lub oczywiście
w oficjalnej dokumentacji Redux Thunk, również w oficjalnych dokumentach Redux.
Więc teraz możemy wysłać żądanie HTTP, aw React Native możemy użyć wbudowanego interfejsu API pobierania,
a pobieranie tutaj działa w
zasadzie jak interfejs API pobierania w przeglądarce, gdzie jest on również dostępny.
Wymaga adresu URL, na który chcesz wysłać żądanie, i to jest ten adres URL, który tu mamy,
więc po prostu skopiuję ten adres URL z Firebase i wprowadzę go tutaj.
Teraz pobieranie brzmi, jakby zawsze tylko pobierało
dane, więc jeśli pobiera dane, ale w rzeczywistości nazwa jest tutaj nieco myląca, nie służy tylko
do pobierania danych, możesz również użyć go do wysłania żądania
postu lub żądania sprzedaży, więc dowolne rodzaj żądania HTTP. Teraz również nie wysyłamy tylko żądania na ten adres
URL, ale teraz, jak powiedziałem, Firebase tłumaczy twoje zapytania na rodzaj zapytania do bazy danych i struktury bazy danych, dzięki
czemu możesz dodać dowolny węzeł, który chcesz tutaj,
dowolny segment, na przykład na przykład produkty i Firebase utworzą folder w bazie danych i tam będą
przechowywać twoje dane.
Ważne, a to tylko specyficzna dla Firebase rzecz, którą musisz dodać. Json tutaj.
To nie jest wymagane z powodu React Native lub z powodu Javascript lub ponieważ jest to żądanie HTTP, jest to
tylko kwestia specyficzna dla Firebase. Domyślnie wysyłałoby to żądanie get,
ale do przechowywania danych Firebase chce żądania post i aby je wysłać, musimy przekazać drugi
argument do pobrania, który powinien być obiektem Javascript. W tym drugim argumencie możesz ustawić
klucz metody i opisać metodę HTTP tego żądania, którą można uzyskać, umieścić itd.
I tutaj powinien być post, który dodaje produkt, który zamierzamy wysłać do tego węzła, który
zostaną tam utworzone.
Teraz możesz również ustawić tam niektóre nagłówki i musimy
ustawić nagłówek, musimy dodać nagłówek typu zawartości, a ty po prostu dodajesz nagłówki jako obiekt, a
następnie masz pary klucz-wartość z identyfikatorami nagłówków jako kluczami, a wartości jako wartości, a tutaj
wartością jest application / json, która informuje Firebase, że zamierzamy wysłać pewne dane JSON,
a następnie musimy to zrobić.
Musimy dodać treść z danymi, które chcemy dołączyć do tego żądania, a dane powinny mieć
format JSON.
Na szczęście React Native obsługuje obiekt JSON, który obsługuje także Javascript w przeglądarce, i
tam możemy wywołać stringify, aby przekształcić tablicę lub obiekt JavaScript w format JSON, więc w końcu
na końcu i
tam chcę dołączyć mój produkt. Więc w końcu chcę skreślić
tutaj obiekt, który zawiera mój tytuł, mój opis, mój
imageUrl i moją cenę, a nie
identyfikator, ponieważ faktycznie Firebase wygeneruje dla nas tutaj identyfikator, który jest naprawdę wygodny.
Teraz wyśle to żądanie, ale oczywiście chcę utworzyć produkt lokalnie tylko wtedy,
gdy żądanie to się powiedzie, ponieważ wtedy mogę faktycznie użyć automatycznie utworzonego identyfikatora,
który Firebase do mnie zwróci i po pobraniu wygodnie zwróci obietnicę, którą jest obiekt JavaScript które ostatecznie rozwiążą
się w przyszłości lub spowodują błąd w przyszłości.
Aby więc poczekać na tę odpowiedź, możemy dodać ją tutaj po pobraniu,
więc na tej obietnicy i otrzymamy naszą odpowiedź tutaj, abyśmy mogli zrobić wszystko z odpowiedzią.
Możesz również wysłuchać błędów z catch i to jest coś, co powinieneś
już wiedzieć, ponieważ obietnice
nie są specyficzne dla React Native, to jest waniliowy JavaScript, a React Native obsługuje również bardziej
nowoczesną składnię asynchroniczną zamiast tego i catch. Aby tego użyć, dodajesz async tutaj przed swoją
funkcją, to słowo kluczowe asynchroniczne, a teraz możesz poczekać na swoją odpowiedź tutaj i przechowywać ją w stałej składni z
tym słowem kluczowym „czekaj”.
Teraz, za kulisami, przekształca to w starą składnię z wtedy,
więc jest to tak, jakbyś dodał to tutaj i użył swojej odpowiedzi w otrzymanym wywołaniu zwrotnym.
Ale jest to nieco łatwiejsze do odczytania, dlatego użyję tej asynchronicznej funkcji czekania,
tylko pamiętaj o tym, że to jest jak dodawanie, tylko bardziej czytelne. Kiedy przy okazji używasz asynchronicznego oczekiwania, ta
funkcja zawsze automatycznie zwraca obietnicę, dlatego cała funkcja tworzenia
produktu
zwraca teraz obietnicę.
Nie robił tego
wcześniej, teraz
zobaczysz, że tutaj, teraz zwraca obietnicę. Więc to nasza odpowiedź, ta
odpowiedź może być teraz trochę rozpakowana, aby wprowadzić tam dane, więc
dane odpowiedzi są wykonywane przez wywołanie odpowiedzi. json, jest to metoda dostępna
dla otrzymywanego obiektu odpowiedzi. To znowu jest zadanie asynchroniczne, na które
musimy czekać, a teraz to w końcu da nam dane zwrócone przez Firebase po dodaniu produktu.
Teraz możemy po prostu zapisać te dane odpowiedzi, aby zobaczyć, co tam jest, a ja nadal wysyłam tutaj
moją akcję, ale ponieważ tutaj czekamy, a zatem jest to tak, jakby było w wielu
blokach, zostanie to wysłane dopiero po wykonaniu tych operacji tutaj. gotowy.
Tak więc, zapiszmy to i dodajmy nowy produkt, przechodząc do sekcji administratora
tutaj, a następnie dodam białą
koszulę, wybrałem do tego ładny imageUrl,
oto jest.
Powiedzmy, że kosztuje 39. 99, jest to biała koszula, która jest dość stylowa.
Jeśli teraz to zapiszę, najpierw muszę to załadować, teraz jest to dodane, oto jest
i teraz, jeśli
spojrzysz na
Firebase, widzimy również, że teraz jest węzeł produktów. Tam jest to ten unikalny identyfikator, a
tam mamy dane, które przesłaliśmy, a jeśli spojrzysz na swoją
konsolę, zobaczysz, że to właśnie otrzymaliśmy, oto
dane odpowiedzi tutaj.
Przechowuje klucz nazwy, a następnie także ten identyfikator wygenerowany przez Firebase, co oznacza, że kiedy wysyłamy nasze dane
tutaj, możemy faktycznie dodać klucz ID i dodać resData. name, aby uzyskać dostęp do tego klucza
nazwy po zwróceniu odpowiedzi przez Firebase w celu przekazania wygenerowanego po stronie serwera
identyfikatora do naszego reduktora tworzenia produktu na końcu lub do logiki działającej w reduktorze.
Tak więc teraz w reduktorze produktów nie możemy faktycznie użyć tego fałszywego identyfikatora tutaj, ale zamiast
tego oczekiwać tego na naszych danych produktu. Teraz otrzymujemy pole ID, które jest generowanym po stronie serwera
identyfikatorem, ale na razie pozostanę przy tym fałszywym identyfikatorze użytkownika, ale otrzymamy ten identyfikator wygenerowany po stronie serwera tutaj i
oto on, dlatego używamy go na również frontend, który będzie ważny na później, kiedy usuniemy również
rzeczy i tak dalej.
To dodaje produkt, ale oczywiście, gdy tylko przeładujemy aplikację, nie ma go, ponieważ w aplikacji był
przechowywany tylko w pamięci.
Teraz przechowujemy go również na serwerze, ale nigdy nie pobieramy go z serwera, więc
upewnijmy się, że to zrobimy.