Teraz, gdy element produktu został zreorganizowany, nadszedł czas, aby powiedzieć, że możemy usunąć elementy,
ponieważ jest to jedna z najprostszych rzeczy, jakie możemy zrobić.
To zabiera nas z powrotem do Redux i tam nadszedł czas, aby pracować nad produktami,
a zacznę od
działań, które obecnie są pustym plikiem, produktami. plik js w folderze akcji, w
którym chcę wyeksportować akcję, która pomaga nam w usuwaniu produktów. W związku z tym identyfikator nosi po prostu nazwę usuń
produkt i zawiera tutaj tekst usuwania produktu, a także wyeksportuję kreator akcji usuń produkt, który pobiera identyfikator produktu, taki jak ten, i który następnie zwraca obiekt
akcji, w którym typem jest usuń produkt i pid, identyfikator produktu to po prostu przekazany
identyfikator produktu, taki jak ten.
Teraz w reduktorze, w pliku reduktora produktów, możemy tego słuchać, ponieważ obecnie
nigdy nie dbamy o żadne działanie. Teraz możemy włączyć tutaj typ akcji i obsłużyć przypadek usunięcia produktu, który otrzymujemy z
pliku akcji naszych produktów, a zatem musisz dodać ten import. Jeśli tak jest w przypadku usunięcia produktu, musimy usunąć
produkt z naszej tablicy produktów użytkownika i oczywiście również z tablicy dostępnych produktów, ponieważ jest
on ogólnie usuwany, nie tylko w naszych produktach użytkownika, ale z całej
aplikacji.
Dlatego zwrócę
nowy obiekt, w którym skopiujemy istniejący stan, aby upewnić się, że nie stracimy żadnego stanu, a teraz produkty użytkownika
są po prostu stanem. userProducts, czyli stare produkty
użytkownika, na których możemy filtrować, to wbudowana metoda Javascript, która zwraca nową tablicę,
nową tablicę, która jest zasadniczo tworzona przez uruchomienie funkcji na każdym elemencie w starej tablicy i jeśli ta funkcja
zwraca true , zachowujemy ten element, jeśli zwróci wartość false, upuszczamy element.
Wykonuje więc funkcję, w której otrzymujemy produkt, ta funkcja jest dla nas wykonywana przez
Javascript, że tak powiem, i przekazuje element, który aktualnie ogląda tę funkcję.
Otrzymujemy więc produkt dla każdego produktu z naszej tablicy produktów użytkownika i chcemy zwrócić identyfikator produktu, w przeciwieństwie do pid
akcji, który jest identyfikatorem produktu, który chcemy usunąć.
Oznacza to, że zasadniczo zachowa wszystkie produkty, których identyfikatory się nie zgadzają, jeśli się zgadzają, wiemy, że jest to
produkt, którego chcemy się pozbyć, dlatego zwracamy
wartość false, co
oznacza w nowej tablicy, że nie będzie w zestawie.
Teraz jest zasadniczo taka sama logika dla dostępnych produktów,
musimy tylko przejrzeć wszystkie dostępne produkty i odfiltrować tam produkt.
Jest to jedna zmiana, którą musimy wprowadzić, należy wprowadzić kolejną zmianę w koszyku, ponieważ po
usunięciu produktu należy go również usunąć z koszyka, ponieważ w przeciwnym razie mamy
produkt w koszyku, który już nie istnieje .
Więc tutaj dodam także skrzynkę do usunięcia produktu, a zatem musisz zaimportować produkt usuwania z działań produktów w
koszyku. reduktor
js i tutaj,
musimy upewnić się, że usuwamy produkt z koszyka, jeśli został usunięty.
Tak więc tutaj, w koszyku, oczywiście otrzymujemy nasz identyfikator produktu, który chcemy usunąć,
to ten pid w tej akcji jest wysyłany, dlatego tutaj zwracamy nowy stan, w którym chcemy zaktualizować nasz koszyk i całkowitą kwotę tak że
produkt zniknął i zniknął, mam na myśli całkowite usunięcie z koszyka, nie
tylko zmniejszenie o jeden, ale całkowite usunięcie. Więc przedmioty są tutaj w końcu kopią istniejących
elementów
bez tego produktu, więc utworzę nowe stałe, zaktualizowane elementy, w których skopiuję tutaj moje istniejące elementy stanu, w
ten sposób,
a następnie usunę zaktualizowane elementy dla pid akcji, więc usuwam ten przedmiot z koszyka.
Oczywiście ma to sens tylko wtedy, gdy ten przedmiot istnieje w koszyku, więc najpierw sprawdzę, czy elementy stanu
dla akcji pid, jeśli to zwróci coś znaczącego, a jeśli
tak nie jest, to po prostu zwrócę istniejący stan, ponieważ skończę z tą sprawą, nie muszę
nic zmieniać w stanie, więc po prostu przywrócę istniejący stan bez zmian.
Jeśli przejdę przez to,
jeśli to sprawdzę, to wiem, że produkt z identyfikatorem, który mamy usunąć, jest częścią produktu.
Następnie kontynuuję kopiowanie moich produktów, a następnie usuwam stamtąd produkt, ale zanim to
zrobię, uzyskaj sumę produktu, uzyskując dostęp do pozycji stanu dla pid akcji i tam oczywiście mamy to, jeśli
spojrzymy na koszyk model przedmiotu Mam na myśli to pole sumy tutaj, więc
w końcu muszę usunąć sumę. Interesuje mnie ta suma, ponieważ teraz mogę zaktualizować
swoje produkty tam, gdzie zostały usunięte, za pomocą słowa kluczowego delete, a całkowita kwota koszyka to całkowita
kwota minus całkowita pozycja, więc suma tego koszyka element, który dodaliśmy wcześniej. Więc teraz odpowiednio aktualizujemy koszyk,
gdy
go usuwamy. Teraz musimy tylko wysłać to
usunięcie, więc z powrotem
w produktach użytkowników, tutaj w usunięciu, chcemy wysłać. Tak więc z React Redux możemy zaimportować use
dispatch, aby uzyskać dostęp do funkcji dispatch tutaj,
wywołując use dispatch, tak jak to robiliśmy wiele razy wcześniej, a następnie tutaj, po naciśnięciu Delete, możemy
wysłać nasze działanie
i oczywiście potrzebujemy aby zaimportować tę akcję, więc zróbmy to, zaimportujmy może wszystko jako akcje produktów z folderu sklepu, tam z folderu
akcji i tam z pliku produktów, a teraz używamy akcji produktów
tam, gdy wysyłamy to, aby wywołać usunięcie produktu i przekaż identyfikator produktu, który oczywiście
jest itemData. pozycja. id tutaj, ponieważ przeglądamy
wszystkie produkty tutaj, a to w zasadzie oznacza, że itemData. pozycja odnosi się do instancji naszego modelu produktu,
każda instancja ma właściwość ID, a my przesyłamy to w celu usunięcia produktu.
Więc jeśli spróbujemy i przejdziemy do administratora, a ja kliknę usuń czerwoną koszulę, rzeczywiście już tu poszła,
a jeśli wrócę do produktów, również tutaj.
Teraz, jeśli przeładujemy to i dodam czerwoną koszulę do koszyka, zobaczycie to tutaj, dodałem ją dwa razy.
Teraz, jeśli przejdę do administratora i usunę go, a następnie wrócę do produktów i koszyka, koszyk jest pusty.
Z drugiej strony, jeśli dodam, powiedzmy teraz dywan i kubek kawy, wróć do administratora,
usuń dywan, ale nie kubek kawy, widać w produktach, kubek kawy
jest nadal w koszyku, więc praca. Nawiasem mówiąc, możesz zauważyć, że kubek do kawy jest tutaj trochę
odcięty, to coś naprawię później wraz z faktem, że tutaj widzimy teraz minus dla całości,
to również coś naprawię w druga.
Przede wszystkim upewnijmy się, że
możemy jednak w sekcji administratora przejść do ekranu edycji lub że mamy tam również element, który pozwala
nam dodać nowy produkt.