Aby dodać funkcję do koszyka, musimy popracować nad dwiema rzeczami -
jedną z nich jest oczywiście to, że możemy mieć
ekran koszyka, że w nagłówku mamy ikonę, która prowadzi nas do ekranu koszyka, gdzie możemy zobaczyć całkowita suma i pozycje
w koszyku oraz miejsce, w którym mamy teraz
to zamówienie, ale powiedziałbym, że to drugi krok, ponieważ ważniejszym pierwszym krokiem jest dodanie logiki do
zarządzania artykułami w koszyku, która obejmuje Redux. W tym celu dodam nowy
reduktor, drugi reduktor, który nazwie nazwę wózek, wózek. js, a także plik akcji, a teraz jest
to plik akcji, który zapełnimy.
Zrobimy to z plikiem produktów później, gdy
zaczniemy dodawać produkty i tak dalej, ale na razie zacznijmy od funkcji koszyka. Więc tutaj w
koszyku. plik js w
folderze reduktorów, ustawię mój stan początkowy dla tego wycinka koszyka i znowu, to są wszystkie te
osobne reduktory i stany, w których udało im się stworzyć cały sklep Redux, ponieważ w
końcu to właśnie tutaj łączycie z połączonymi redukcjami w jeden reduktor korzeni i jeden duży stan na końcu.
Mamy tylko te poszczególne pod-stany, aby ułatwić zarządzanie danymi.
Więc tutaj, w reduktorze koszyków, jak powinien wyglądać stan naszego wózka?
Cóż, nasz koszyk będzie miał mnóstwo przedmiotów, może to być tablica i suma, która początkowo wynosi zero, więc całkowita kwota, którą można powiedzieć,
może oczywiście również podać tę całkowitą kwotę, aby naprawdę wyjaśnić, co
to jest.
Są to więc dwie rzeczy, które składają się na mój koszyk
i jak zawsze nie mogę tego wystarczająco podkreślić, istnieje więcej niż jeden sposób realizacji tego. Więc jeśli chcesz zarządzać także innymi danymi tutaj,
zdecydowanie to zrób, nie
ma jednego
dobrego lub złego podejścia, to tylko
moje podejście do tworzenia tej aplikacji.
Teraz ważne jest, aby dla tego wózka tutaj upewnić się, że jeśli mamy już
przedmiot w koszyku, powiedzmy czerwoną koszulę i klikam, aby koszyk
po raz drugi, nie dodam dwóch przedmiotów do tej tablicy, ale Wciąż mam tam tylko jeden przedmiot, a zamiast tego
każdy przedmiot w tej tablicy przedmiotów powinien być obiektem, w którym mogę zarządzać, podobnie jak identyfikator produktu, gdzie
mam tytuł i ilość towaru w koszyku, więc
wtedy zmień na 2, jeśli kliknę go po raz drugi.
Dlatego możesz argumentować, że przedmioty nie powinny być tablicą, ale może obiektem JavaScript, ponieważ pozwala nam to przechowywać
identyfikator produktu jako klucz, a wartością może być obiekt z tytułem,
z ilością, z cena, a to tylko alternatywa,
możesz to
wszystko zrobić z tablicą, ale tak właściwie zastosuję to podejście.
Teraz eksportowany przeze mnie reduktor jest więc reduktorem, który oczywiście otrzymuje stan, który
ma nasz stan początkowy jako wartość domyślną i działanie jako argument, który ostatecznie musi zwrócić niektóre dane.
W końcu musi zwrócić nowy stan, który jest następnie używany przez Redux.
Teraz potrzebujemy działania, aby kontynuować.
Więc tutaj wyeksportuję stałą, identyfikator akcji i nadam nazwę dodaniu do koszyka, identyfikator zależy od ciebie,
pójdę z dodawaniem do koszyka w ten sposób, a w pliku działań utworzę taki
funkcja kreatora akcji.
Więc tutaj kolejna stała,
którą nazwiebym dodać do koszyka, która otrzymuje powiedzmy pełny obiekt produktu, który chcę dodać, aby móc wyciągnąć potrzebne
informacje, a następnie tutaj musimy zwrócić taki obiekt akcji, który ma typ,
który jest dodawany do koszyka, a następnie nasz produkt.
Jest to tylko sposób tworzenia tych akcji, który sprawia, że bardzo łatwo jest to zrobić
w naszych komponentach.
W końcu, w reduktorze wózka, właściwie we wszystkich reduktorach, ale w miejscu, w którym dbamy o reduktory
wózka,
dostaniemy akcję dodawania do koszyka, więc tutaj musimy zmienić typ akcji i obsłużyć przypadek, w którym jest dodawany do koszyka, dlatego należy zaimportować
opcję Dodaj do koszyka z
tego folderu działań i tam, z pliku koszyka. Teraz i przy okazji ważne, ta akcja, gdy
jest wysyłana, jest odbierana na wszystkich reduktorach, ale jeśli nie poradzisz sobie z nią osobną
skrzynką, uruchomi się skrzynka domyślna, która normalnie powinna po prostu zwrócić wycinek stanu bieżącego dla tego reduktora, który oznacza, że wycinek
stanu dla tego reduktora jest niezmieniony. Tutaj jednak w reduktorze wózka chcę
oczywiście zmienić swój stan, dlatego radzę sobie dodać tu
i teraz obudowę koszyka,
a teraz dodać do koszyka, co powinno
się tam stać?
Cóż, otrzymujemy nasz dodany produkt, możemy wyciągnąć go z akcji, ponieważ tam w akcji będziemy mieli klucz produktu, to
właśnie
ustawiliśmy tutaj w koszyku akcji. plik js, więc wezmę nasz
produkt i przechowuję go w stałym, dodanym produkcie, z którym możemy teraz pracować i
będziemy mieli naszą cenę produktu, która jest oczywiście dodana Produkt. cenę, a my dodamy tytuł produktu,
który został dodany Produkt. tytuł. Zanim przejdziemy dalej, określmy, w
jaki sposób koszyk, więc to, co przechowujemy, powinno wyglądać, jaką mamy wartość.
Więc przejdę do folderu moich modeli i dodam element koszyka. tutaj plik js, a następnie dodaj klasę elementu
koszyka, która otrzymuje
konstruktor, i zanim znów go zapomnę, którą należy wyeksportować tu i
teraz w tym konstruktorze, spodziewam się uzyskać ilość produktu, który zamierzamy dodać, cena
produktu, tytuł produktu i suma tego produktu, jeśli mamy trzy razy czerwoną koszulę, nasza suma wyniesie trzy razy
29. 99,
czyli około 90 USD.
Teraz nie dostaję tutaj identyfikatora produktu, ponieważ użyję go jako klucza wewnątrz mojego obiektu, który przechowuje elementy, a następnie
stanie się wyraźniejszy, gdy go zaimplementujemy.
Więc tutaj, w koszyku, po prostu
przechowuję wszystkie dane, które otrzymuję, ilość, cenę produktu i mam
te dane, które muszę później wydrukować, więc tytuł produktu i suma, jak to, a teraz z powrotem w reduktorze, możemy oczywiście
zaimportować tę klasę koszyka z folderu modeli i z koszyka tutaj i teraz z
powrotem w tym pudełku „dodaj do koszyka”, przede wszystkim musimy dowiedzieć się,
czy ten produkt jest już częścią naszych produktów.
Teraz, jak już wspomniałem, dodam każdy nowy produkt, dodając nowy klucz do przedmiotów, który jest identyfikatorem tego
produktu, ponieważ jest
to unikatowe, zawsze mamy każdy klucz tylko raz, a następnie wartość będzie koszykiem, ponieważ zdefiniowałem
to w modelach i dlatego wiem, że jeśli identyfikator produktu, który tu otrzymuję, jest już
kluczem przedmiotów, to ma już nasz przedmiot jako przedmiot koszyka.
Więc tutaj możemy po prostu sprawdzić, czy przedmioty do dodanego produktu. Identyfikator istnieje, więc jeśli to zwraca coś prawdziwego,
więc nieokreślonego, to mamy już przedmiot w koszyku, co jest w porządku, ale wtedy musimy tylko zmienić ilość,
w przeciwnym razie będziemy
musieli dodać zupełnie nowy przedmiot.
Zacznijmy więc od przypadku else, ponieważ taki przypadek napotkamy po
raz pierwszy,
gdy dodamy coś po raz pierwszy, potrzebujemy nowego elementu koszyka, tworzę
to za pomocą nowego słowa kluczowego i zdefiniowanej przeze mnie klasy elementu koszyka , musimy podać
ilość, która oczywiście jest jedna,
jeśli po prostu dodamy nowy przedmiot, musimy podać cenę produktu, tytuł produktu tutaj oraz sumę i sumę oczywiście początkowo
to tylko nasza cena produktu, prawda?
Ponieważ jeśli dodamy jeden element tej ceny, wówczas suma tego elementu koszyka będzie naszą ceną produktu, a teraz ten nowy
element koszyka musi zostać dodany do naszych elementów koszyka tutaj.
Zwracamy więc kopię naszego stanu i ustawiamy elementy równe
nowemu obiektowi, do którego kopiuję wszystkie moje istniejące elementy stanu, tak że kopiuję tutaj mój istniejący
obiekt
elementów, a następnie dodam nowy klucz z tą składnią dynamiczną za pomocą nawiasy
kwadratowe, w których dodano nazwę klucza Produkt. Identyfikator, to miałem na myśli, ponieważ identyfikator produktu jest kluczem w naszym
obiekcie przedmiotów, a wartością jest nasz nowy produkt w koszyku.
To tylko składnia, którą musisz znać, jest to waniliowy JavaScript, w ten sposób możesz dodać lub uzyskać dostęp
do właściwości dynamicznej zamiast zakodować ją tutaj jako ciąg znaków. Nawiasem mówiąc, tutaj też powinno
być oczywiście państwo. przedmioty, mój błąd. W związku z tym powinniśmy dodać tutaj nowy przedmiot do koszyka.
Teraz, jeśli masz już przedmiot w koszyku, to oczywiście nie tworzymy nowego
przedmiotu w koszyku, zamiast tego chcemy zaktualizować istniejący. Będę więc miał tutaj mój zaktualizowany
element koszyka, a do tego nadal tworzę nowy
element koszyka, ale wstępnie wypełnię go istniejącymi danymi, na przykład ilością tutaj. Otrzymujemy to z elementów stanu dla identyfikatora dodanego produktu, ponieważ powinien on już być częścią
elementów stanu, sprawdzamy to tutaj i będzie to oczywiście miało klucz ilościowy, ponieważ taki
element tutaj w moich przedmiotach jest po prostu wpisz elementy koszyka, aby miał on właściwość
ilości,
a my po prostu ją dodamy, ponieważ dodajemy nowy
element koszyka, więc musimy to zwiększyć. Teraz pozycja w koszyku jako drugi argument bierze cenę produktu. Oczywiście, ponieważ zbudujemy aplikację w
taki sposób, że cena nigdy się nie zmieni, co zwiększyłoby tutaj złożoność,
musielibyśmy zarządzać koszykiem w zupełnie inny sposób, w takim przypadku musielibyśmy przechowywać każdy
koszyk jako lista transakcji dla tego produktu w koszyku, która jest tu za duża.
Ponieważ to się nigdy nie zmienia, ponieważ cena nigdy się nie zmienia, możemy w końcu
wziąć otrzymaną cenę prod lub wziąć istniejącą cenę, którą wcześniej przechowaliśmy, ponieważ to znowu nigdy się nie zmieni.
Tytuł może się zmienić i chcę zapisać tutaj najnowszy tytuł, więc zdecydowanie wezmę ten
produkt, który tu otrzymamy, zamiast mojej starej migawki i ostatnią, ale nie
mniej ważną, ostatnią wartość tutaj, moją całkowitą sumę dla tego elementu koszyka jest
to oczywiście bieżąca suma, więc uzyskuję dostęp do elementów stanu dla identyfikatora tutaj, sumy plus cena produktu, ponieważ tutaj dodamy jeden nowy
element, musimy dodać cenę razy 1 do bieżącej sumy. To jest zaktualizowany element
koszyka.
Teraz możemy zwrócić nasz nowy wycinek stanu tutaj, kopiując stare stany i ustawiając elementy równe i teraz ważne,
do obiektu, w którym kopiujemy stan. elementy, ale w których teraz ponownie ustawiliśmy addedProduct. Identyfikator i tak, to już istnieje, ale
po prostu zastępujemy go naszym zaktualizowanym produktem w koszyku, więc robimy tę samą aktualizację,
którą tam robimy. Teraz jednak nie
wszystko, co musimy zrobić, musimy również
zmienić całkowitą kwotę, ponieważ oczywiście się to zmienia.
Więc kiedy dodajemy przedmiot po raz pierwszy, wówczas całkowita kwota powinna być w zasadzie naszą starą całkowitą kwotą, więc
podaj sumę całkowitą plus cenę produktu i to samo, jeśli dodamy
przedmiot do istniejącego koszyka lub gdy już tam jest ponieważ ostatecznie nasza suma zawsze jest tylko
starą sumą plus cena, ponieważ zawsze dodajemy jeden element tego produktu,
tak działa ta aplikacja.
Tak więc nasza instrukcja aktualizacji
jest prawie taka sama, jedyne, co się różni, to sposób tworzenia tego elementu
koszyka, dlatego możemy oczywiście również ponownie użyć tego kodu, przenieść go z bloku if else
i zamiast mieć tutaj dwie różne stałe , możemy utworzyć
zmienną przed wprowadzeniem instrukcji if, zaktualizowanej lub
nowej pozycji w koszyku, może to być nazwa, ponieważ nie wiemy,
co to będzie z góry, a następnie tutaj, w gałęzi if, ustawiliśmy aktualizację lub nowy element koszyka do tego zaktualizowanego elementu koszyka,
tutaj z drugiej strony ustawiamy go na ten nowy element koszyka, a tutaj zawsze używamy zaktualizowanego
lub nowego elementu koszyka, a dzięki temu mamy tutaj trochę ponownego użycia kodu
i nie powtarzajcie się, co jest zawsze dobre. Inna uwaga, kopiowanie stanu tutaj jest oczywiście zawsze
zbędne, ponieważ zawsze ustawia się zarówno pozycje, jak i całkowitą kwotę.
Więc jeśli zawsze masz tylko te dwa pola tutaj i zawsze zmieniasz oba, nie
musisz kopiować istniejącego stanu, jeśli kiedykolwiek wprowadzisz kolejny kawałek danych do swojego wycinka stanu tutaj, którego tu nie
zmienisz musisz jednak skopiować swój stary stan, aby nie utracić tych dodatkowych
danych.
Dlatego zostawię tę funkcję kopiowania, chociaż technicznie jej tu nie potrzebujemy, ale jeśli
kiedykolwiek powinniśmy zmienić stan, w którym został zapisany, i nie
zapomnimy go skopiować, a zatem utracimy dane.
Cóż, było dużo pracy,
dzięki czemu możemy rozpocząć wysyłanie tej
akcji i oczywiście chcę wysłać ją z przeglądu produktu i szczegółów
produktu, ponieważ na obu ekranach mam przyciski dodawania do koszyka.
Zacznijmy więc od ekranu przeglądu produktów, aby wysłać działania Redux,
musimy dołączyć
tutaj użycie haka wysyłki, tutaj możemy po prostu uzyskać dostęp do tej funkcji wysyłki, wywołując use dispatch
w ten sposób, a teraz po kliknięciu Dodaj do tam na dole, możemy wysłać naszą akcję
tutaj i oczywiście przy okazji, zamiast korzystać z funkcji wbudowanych
tutaj, możesz mieć funkcje przechowywane
w oddzielnych stałych wewnątrz komponentu funkcjonalnego tutaj, alternatywnie, będę trzymać się funkcji wbudowanych dla teraz i zaimportuję tutaj
wszystkie moje akcje jako akcje koszyka z folderu sklepu, a tam folder akcji, plik koszyka.
Teraz jest to składnia importu, która łączy wszystkie eksporty z pliku razem w jeden
obiekt, mamy tutaj tylko jeden eksport, więc
możesz również celować w ten konkretny
eksport, później będziemy mieli wiele eksportów i dlatego użyję tego podejścia.
Więc tutaj wysyłamy akcję koszyka.
dodaj do koszyka i jest to funkcja, którą musimy wykonać, to jest nasza funkcja do tworzenia
akcji i to jako
argument bierze nasz produkt, więc w końcu tutaj musimy przekazać itemData. pozycja, która jest tylko naszym produktem tutaj na ekranie
szczegółów produktu.
Dlatego robimy dokładnie to samo, importujemy use dispatch z React Redux, dlatego tutaj możemy uzyskać
dostęp do funkcji wysyłki, wywołując use dispatch, a następnie dla
tego przycisku tutaj w funkcji wbudowanej lub w osobnej funkcji nazwanej, jeśli Ci
się spodoba , możesz
wywołać wysyłkę, teraz musimy zaimportować nasze akcje, a ja użyję tej
samej składni, co wcześniej, gdzie importuję wszystko jako akcje koszyka z folderu sklepu, folderu akcji, pliku koszyka, a teraz akcje koszyka, połączenie dodaj do koszyk
tutaj i prześlij wybrany produkt, który jest naszym produktem, który chcemy dodać do koszyka tutaj.
Miejmy nadzieję, że wywoła takie działania, że przedmiot zostanie dodany do koszyka, ale oczywiście nie
możemy tego teraz potwierdzić.
Właściwie możemy. Możesz uruchomić debuger React Native, a ja wcześniej tego
nie używałem, ale tam możesz teraz nacisnąć klawisz Command lub kontrolować t, aby otworzyć nową kartę, a
następnie
potwierdzić import
tutaj, a następnie przejść do aplikacji i tam, otworzyć menu debugowania na iOS z poleceniem D, na Androidzie
ze sterowaniem lub poleceniem M i kliknij na zdalne debugowanie Javascript. Teraz moje otworzyło się właściwie na porcie 19003, więc otworzyłem React
Native debugger
na niewłaściwym porcie, wybierz mnie ponownie, naciśnij komendę T lub kontroluj T w debuggerze i wybierz 19003,
użyj dowolnego portu otwartego dla Ciebie w Chrome, kliknij potwierdź, a teraz to łączy się z działającą aplikacją React tutaj w
debuggerze, pamiętaj, aby zamknąć debugger Chrome, a następnie ponownie załadować
aplikację, teraz to powinno się połączyć tutaj i teraz
nie tylko możesz sprawdzić swoją aplikację
tutaj, jak to wcześniej wyjaśniłem, nie, możesz również spójrz na część tam, gdzie jest twój
debugger Redux, tam możesz zobaczyć, co Redux robi dla ciebie.
Jedyne, co musisz zrobić, aby to działało, to zainstalować nowy pakiet z
instalacją npm - save dev, ponieważ jest to zależność programistyczna, której
potrzebujemy tylko podczas programowania, i tam zainstaluj rozszerzenie narzędzi programistycznych Redux, przejdź do
swojej aplikacji . Następnie plik js,
a następnie zaimportuj z
tego rozszerzenia narzędzi programistycznych Redux. Stamtąd możesz zaimportować komponowanie za pomocą narzędzi programistycznych, a tę
funkcję przekazujesz, aby utworzyć sklep jako drugi argument, możesz po prostu uruchomić
go w ten sposób. Nawiasem mówiąc, jest to
kod, ten import
i użycie, które powinieneś usunąć przed wdrożeniem aplikacji, ponieważ jest to tylko coś, co powinno być
uruchomione podczas programowania, a nie w aplikacji produkcyjnej, musisz to usunąć przed
wdrożeniem aplikacji ale na etapie rozwoju jest w porządku. Po dodaniu tego, jeśli teraz to zapiszesz,
zobaczysz, że tutaj, w tym Inspektorze Redux, widzisz wysyłanie akcji inicjującej, nie widziałeś tego wcześniej.
To działanie jest automatycznie uruchamiane po uruchomieniu aplikacji.
Jeśli teraz kliknę tutaj, aby koszyk tutaj, zobaczysz również akcję dodawania do koszyka, a
teraz tutaj możesz wyświetlić szczegółowe informacje o tej akcji, takie jak dane, które zostały do niej dołączone,
a także o swoim stanie tutaj i tam, na przykład to: jest stan mojego produktu i gdzie
jest stan mojego koszyka?
Cóż, oczywiście tego brakuje, ponieważ podczas gdy mamy reduktor w konfiguracji działania, w aplikacji. plik js, w
połączonych reduktorach, nie uwzględniamy stanu koszyka.
Więc zaimportujmy reduktor koszyka. / StoreReducers / cart, a teraz po zaimportowaniu możemy dodać go
do naszego połączonego obiektu reduktorów, a teraz dodamy wycinek koszyka, na przykład, wskaż na reduktor koszyka, a zatem
teraz zostanie on włączony do naszego sklepu Redux. Dzięki temu, jeśli teraz zaczekasz na ponowne załadowanie
i klikniesz ponownie, aby koszyk, teraz w tej akcji dodawania do koszyka, w stanie,
zobaczysz, że teraz jest wycinek koszyka, a teraz widzisz całkowitą kwotę, widzisz, że
jest przedmiot z kluczem P1, który jest naszym produktem w ilości 1,
ta cena, suma tego, a jeśli teraz kliknę, aby koszyk tutaj drugi raz, wysyłana jest kolejna akcja i jeśli mamy spójrz
na stan po tej akcji, widzimy teraz, fajny tylko jeden przedmiot, ale teraz
z ilością drugą, cena produktu za przedmiot jest taka, ale
suma jest taka.
To jest
koszula, jeśli teraz wysyłam również niebieski dywan, musimy
jeszcze raz dodać do koszyka, a tam w stanie, teraz rzeczywiście widzimy, że są tam
dwa przedmioty, P1 i
P2, P1 pozostaje niezmieniony, ale P2 został teraz dodany, a łączna kwota również wygląda dla mnie dobrze.
Wydaje się, że to działa i w ten sposób możesz sprawdzić swój stan Redux podczas działania aplikacji bez wyświetlania
go tutaj.
Teraz oczywiście chcemy również wyświetlać go wizualnie, ale jest to dobry sposób na
sprawdzenie swojego stanu za kulisami za pomocą debugera React Native.
Teraz go tutaj zamkniemy, ponieważ nieco spowalnia aplikację i dlatego tutaj,
w menu debugowania, zatrzymam też moje zdalne debugowanie i całkowicie zamknę tutaj inspektora.
Również z powrotem w aplikacji. Plik js, pozbędę się tutaj komponowania z narzędziami
deweloperskimi, aby nie
zapomnieć go później, ale zawsze możesz go dodać tutaj lub pozostawić tutaj, gdy się rozwijasz, abyś
mógł zajrzeć do swojego sklepu.
Najważniejsze dla nas jest to, że
wydaje się, że to działa i przy tej pracy oczywiście możemy teraz pracować nad dodaniem przycisku akcji do nagłówka
i upewnić się, że możemy przejść do strony koszyka z tego lub z pomocą tego przycisk akcji, aby
na stronie koszyka wyświetlać informacje o naszym koszyku.