W przypadku przycisku usuwania ponownie zacznijmy od logiki Redux.
Więc tutaj, na przykład, możemy zarejestrować nowy identyfikator, usunąć z koszyka brzmi jak odpowiednia nazwa,
biorąc pod uwagę, że wcześniej dodawaliśmy do koszyka, więc usuń z koszyka.
Ponownie dodam tutaj funkcję kreatora akcji, usuwam z koszyka.
To wymaga teraz tylko identyfikatora produktu, który powinien zostać usunięty, więc tylko identyfikator produktu,
a następnie zwraca nowy obiekt akcji, w którym typ kursu jest usuwany z koszyka i gdzie mamy pid, identyfikator
produktu, gdzie przesyłam dalej ID produktu Dostaję się tutaj. Teraz w reduktorze mieliśmy skrzynkę „dodaj
do koszyka”, teraz musimy po prostu dodać
tutaj inną skrzynkę i ta skrzynka to
skrzynka do usunięcia z koszyka.
W tym celu musisz upewnić się, że importujesz identyfikator usuniętej z koszyka akcji
z pliku
działań koszyka, a tutaj
w przypadku usuwania z koszyka znów mamy dwie sprawy.
Jednym z nich jest to, że mieliśmy tylko jeden przedmiot tego produktu w koszyku, jak w
przypadku niebieskiego dywanu,
w tym przypadku musimy go całkowicie usunąć z
obiektu przedmiotów
w koszyku, więc z tego obiektu, a zatem usunie go z tego rzędu które wyprowadzamy tutaj.
Jeśli mamy dwa lub więcej przedmiotów, po prostu chcemy zmniejszyć ilość o 1.
Oczywiście zawsze możesz całkowicie usunąć ten przedmiot, jeśli chcesz, ale chcę ci pokazać, jak
możesz rozróżnić te dwa przypadki.
Tak więc, jeśli mamy ilość większą niż jeden, nie chcę wymazać przedmiotu z koszyka, ale
po prostu zmniejszyć ilość o 1.
Dlatego w celu usunięcia z koszyka musimy dowiedzieć się, jaka jest nasza ilość. Tak więc naszą aktualną ilość, którą przechowuję w tej stałej,
można odjąć od naszego stanu, oczywiście w przedmiotach, musimy znaleźć produkt, którego szukamy i oczywiście możemy to zrobić
za pomocą identyfikatora, który
jest część naszej akcji tutaj w polu pid, ponieważ teraz stan przedmioty jest
przedmiotem i dlatego możemy uzyskać dostęp do akcji. pid tutaj, prawda.
Będzie to dynamicznie uzyskiwać dostęp do wartości za pomocą klucza identyfikatora produktu tutaj w
naszym produkcie, więc
dzięki identyfikatorowi produktu rozpoczynamy tę akcję i
właśnie w ten sposób dodajemy przedmioty do obiektu przedmiotów tutaj.
Używamy naszego identyfikatora produktu jako identyfikatora, teraz używam
go tutaj, aby uzyskać do niego dostęp.
Będzie to miało pewną ilość, ponieważ będzie to wartość, która jest produktem, możesz
oczywiście również dodać, czy ten produkt jest rzeczywiście częścią koszyka, ale sposób,
w jaki tworzymy tę aplikację, nigdy nie powinniśmy być w stanie tego osiągnąć akcja bez
tego produktu będącego częścią koszyka, ponieważ możemy tutaj uruchomić akcję usuwania tylko z poziomu ekranu koszyka,
więc nie musimy tutaj sprawdzać, ale zdecydowanie musimy zdobyć ilość.
Teraz możemy sprawdzić, czy bieżąca ilość jest większa niż 1, co oznacza, że musimy ją zmniejszyć, musimy ją
zmniejszyć, a nie usunąć, w przeciwnym
razie musimy ją usunąć.
Teraz zacznijmy od skrzynki kasowania.
Więc tutaj musimy tylko zwrócić nowy obiekt przedmiotów, który zawiera wszystkie stare
przedmioty, ale już go nie zawiera. Możemy więc mieć tutaj nasze zaktualizowane elementy koszyka, w których klonujemy
elementy stanu, takie jak to, a teraz, aby usunąć właściwość, możemy użyć słowa kluczowego delete, które zna Javascript, i tam możemy usunąć
zaktualizowane elementy koszyka do działania. pid.
Spowoduje to usunięcie tego elementu z naszego skopiowanego obiektu JavaScript tutaj, spowoduje całkowite usunięcie tego elementu, ten element produktu całkowicie
z naszego obiektu przedmiotów w koszyku. W ten sposób możemy to usunąć. Teraz w innym przypadku, w
którym po prostu musimy go zmniejszyć, mogę
mieć zaktualizowany element koszyka, więc ten pojedynczy element koszyka, w którym tworzę nowy element koszyka z
klasą elementu koszyka i tam chcę skopiować wartości istniejącego element koszyka, ale po prostu zmniejsz ilość.
Tak więc element koszyka przyjmuje ilość dokładnie jako pierwsze
wartości, więc teraz tutaj celem jest uzyskanie dostępu do elementów stanu dla identyfikatora produktu, który dostaję na akcję,
a ponieważ powtarzanie tego będzie uciążliwe, będę przechowywać go w pomocniku na stałe , wybrany element koszyka jest tutaj, teraz
możemy go wymienić na wybrany element koszyka i tutaj
mogę użyć wybranego elementu cartItem. ilość minus jeden.
Teraz oczywiście wiemy, że nie będzie to zero, ponieważ ilość była większa niż 1 i teraz możemy
oczywiście zachować resztę danych.
Trzymamy tutaj cenę produktu, zachowujemy tytuł produktu, że wszystko się nie zmienia, suma
oczywiście się zmienia i to
jest suma, stara suma minus cena oczywiście,
więc minus cena produktu, ponieważ usunęliśmy jedną element, musimy zmniejszyć sumę o cenę jednego elementu.
Teraz ten zaktualizowany element koszyka musi zastąpić bieżący element w naszym obiekcie przedmiotów koszyka. Abyśmy mogli również ponownie użyć trochę kodu, właściwie to trochę
zmienię i utworzę zaktualizowane elementy koszyka jako zmienną tutaj zamiast stałej tutaj w
bloku else, więc po prostu zaktualizuję wartość tych zmiennych, tak że tutaj w w bloku if
możemy również
użyć tej samej nazwy zmiennej, zaktualizować elementy koszyka, w których ustawiłem to na równe z kopią istniejących
elementów, ale następnie zastąpiłem tutaj moje pid działania, więc mój identyfikator produktu, mój identyfikator, wartość tam z zaktualizowany produkt w koszyku, który jest moim starym
produktem w koszyku ze zaktualizowaną ilością i sumą. To są zaktualizowane przedmioty w koszyku,
teraz
oczywiście będziemy musieli również dostosować całkowitą kwotę naszego stanu,
więc po tym, jeśli inaczej zablokujemy, zwracamy kopię stanu, przedmioty można ustawić na zaktualizowane przedmioty w
koszyku, a teraz ważne, całkowitą
kwotę można ustawić tak, aby podawała całkowitą kwotę pomniejszoną o cenę produktu
wybranego koszyka, ponieważ tak jak zaktualizowałem sumę dla tego pojedynczego elementu koszyka, całkowita suma koszyka
oczywiście również musi zostać skorygowana jako taka. Teraz możemy spróbować wysłać akcję usuwania z koszyka.
Przejdźmy więc do ekranu koszyka, gdzie mam na końcu tę funkcję usuwania i tam,
teraz chcę wysłać akcję, więc będę potrzebował
dostępu do funkcji wysyłki za pomocą haka wysyłkowego. Możemy teraz użyć tego tutaj, uzyskać do niego dostęp, dzwoniąc, po prostu użyj polecenia dispatch w ten
sposób, a następnie wyślij to tutaj.
Wyślij teraz zaimportuj wszystkie potrzebne akcje, więc zaimportuj wszystko jako akcje koszyka z folderu sklepu, z koszyka akcji takiego jak ten, ponownie za pomocą tego pakietu
importu, który jest całkowicie opcjonalny, możesz również celować w określone rzeczy, których potrzebujesz, więc celuj
w konkretne twórcy
akcji, w tym przypadku usunięcie z kreatora koszyka, którego potrzebowalibyśmy, a następnie tam,
po prostu uruchom tego kreatora akcji,
w moim przypadku za pomocą akcji koszyka. removeFromCart, przekaż ID produktu, który oczywiście tu otrzymamy,
jest to itemData. pozycja.
i teraz pamiętajmy, że przeglądamy przedmioty o tym kształcie, więc będziemy mieć tam pole identyfikatora produktu, a
zatem możemy użyć tego tutaj, aby przesłać je dalej, aby usunąć z koszyka, co powinno,
mam nadzieję, pozwolić nam na aktualizację to. I to powinno być wszystko, Redux powinien
zrobić resztę za kulisami i powinien automatycznie ponownie wysłać ekran koszyka za każdym razem, gdy
koszyk się zmienia, więc za każdym razem, gdy usuwamy przedmioty. Dodałem więc dwie czerwone koszule i jeden niebieski dywan, a jeśli
zdejmę
jedną czerwoną koszulę, rzeczywiście jeden problem, jaki mamy, to przełączniki zamówień,
musimy to naprawić, ale widać, że ilość została poprawnie zaktualizowana.
Jeśli teraz to usunę, całkowita kwota również zostanie poprawnie zaktualizowana, jeśli teraz to usunę, rzeczywiście zniknie całkowicie, a
teraz to również zostanie wyłączone.
Więc to ogólnie działa, ale oczywiście zmiana kolejności, to nie jest
coś, co chcę się tutaj wydarzyć.
Teraz, aby uniknąć zmiany kolejności, możemy po prostu przejść do ekranu koszyka, w którym zmieniam moje przedmioty na tablicę i
tam musimy tylko upewnić się, że tablica jest zawsze posortowana w ten sam sposób, ponieważ ten
selektor zawsze będzie ponownie wyzwalać i pobierać nasze dane za każdym razem, gdy zmienia się nasz stan Redux.
Dlatego tutaj zawsze otrzymamy najnowszą migawkę danych, którą tam mamy, i stąd właśnie tutaj musimy po
prostu sortować ją w ten sam sposób przez cały czas i dlatego zawsze będziemy renderować w
ten sam sposób.
Musimy tylko upewnić się, że nasza tablica transformowanych koszyków jest posortowana, wywołując sort tam.
Jeśli nazywam to w ten sposób, zaczynam dodawać tutaj trochę danych, teraz widzisz,
że to nie załatwiło sprawy, ponieważ nie mówimy, jak to
sortować i nie wie, jak to zrobić dla obiektów z pole, ale możemy przekazać funkcję
do sortowania, w której zawsze porównujemy ze sobą dwa elementy, aib, a następnie
sortowanie musi zwrócić liczbę na końcu, która
określa, co jest pierwsze i
tam, oczywiście można to jednak posortować chcesz, na przykład według identyfikatora produktu, abyśmy mogli po prostu zwrócić porównanie, w którym sprawdzamy identyfikator
produktu A, porównujemy go z identyfikatorem produktu B, a jeśli jest większy, to z wyrażeniem potrójnym tutaj
zwróciłem jeden, w przeciwnym razie zwracam minus jeden .
Jest to normalna funkcja sortowania, w którą Javascript jest dostarczany, a teraz zapewnia to,
że zawsze
sortujemy w ten sam sposób, dlatego teraz zobaczysz, czy to usunę, czerwona krótka pozostanie na swoim miejscu i dlatego nasza logika koszyka jest skończona.
Teraz możemy upewnić się, że faktycznie możemy również kliknąć przycisk tego zamówienia teraz i dodajemy to jako zamówienie,
które następnie możemy odwiedzić za pomocą pomocnej szuflady, która pozwala nam przejść do ekranu zamówień, które
oczywiście jeszcze nie musieliśmy Dodaj.