Teraz jesteśmy już bardzo blisko końca tego modułu, dlatego musimy upewnić się, że teraz wysyłamy
akcje w celu utworzenia nowego produktu lub aktualizacji produktu,
dlatego przede wszystkim musimy dodać te akcje tutaj w naszym folderze akcji .
Więc wyeksportuję stałą tutaj, utworzę taki produkt tutaj, stworzę produkt, a następnie tutaj, kolejny identyfikator aktualizacji produktu za pomocą
aktualizacji produktu i zaktualizuj produkt taki jak ten i utworzę pasujących twórców akcji lub utwórz
produkt, a teraz to zależy od Ciebie jak chcesz to ustrukturyzować, jakie dane chcesz
uzyskać, tworząc produkt.
Jestem fanem tworzenia produktu naprawdę tutaj w akcji lub w reduktorze,
więc faktycznie spodziewam się tutaj tytułu, opisu, imageUrl i ceny, powiedzmy, a następnie zwracam
obiekt akcji, w którym typ jest stworzyć produkt, a dane produktu to po prostu wszystkie dane scalone
razem.
Więc tutaj mam mój tytuł, który jest odwzorowany na tytuł, który otrzymujemy jako argument, opis zamapowany na opis
i dlatego możemy również użyć nowoczesnego skrótu JavaScript, w którym jeśli nazwa
właściwości i nazwa zmiennej wartości są takie same,
możesz po prostu napisać tak to wygląda, więc jeśli jest taka sama jak
cena: cena, możemy
to tutaj napisać, oczywiście jest to również możliwe w tytule i opisie, aby zmapować wszystkie te argumenty na
właściwości o tej samej nazwie w tym obiekcie i jeśli zaktualizujemy produkt, który jest względnie równy, zaktualizuj produkt, abyśmy mogli go
ogólnie skopiować, ale jest jedna ważna różnica. W tym przypadku potrzebujemy również identyfikatora produktu, który należy zmienić, więc otrzymujemy
to jako dodatkowy argument i możemy przechowywać go w naszej akcji, a zatem w osobnej właściwości naszego obiektu akcji. Teraz w reduktorze oczywiście musimy
sobie
z tym
poradzić, musimy obsłużyć tworzenie i aktualizację. Dodajmy więc nowy przypadek tutaj w reduktorze produktów, aby utworzyć produkt.
W tym celu upewnij się, że importujesz produkt tworzenia z działań produktów i oczywiście jeden do aktualizacji produktu
za pomocą aktualizacji produktu, pamiętaj również, aby go zaimportować.
W tworzeniu produktu oczywiście musimy utworzyć nowy produkt i będę go tutaj przechowywać w stałej postaci z
nowym słowem kluczowym w utworzonym wcześniej modelu produktu,
w tym celu wystarczy upewnić się, że importujesz tutaj ten model produktu z folder modeli i ten produkt
tutaj otrzymują identyfikator, który na razie może wygenerować ręcznie z nową datą do łańcucha, aby mieć rodzaj
pseudo unikalnego identyfikatora fikcyjnego na chwilę później, zostanie wygenerowany na serwerze, ale jeszcze go nie
mamy .
Identyfikator właściciela na razie jest zapisany na stałe w U1, ponieważ w tej chwili nie mamy
użytkowników w tej aplikacji, ale tytuł i tak dalej mogą być wypełnione danymi z akcji, ponieważ w akcji
tworzenia produktu mamy klucz danych produktu, który zawiera obiekt z tytułem,
opisem, imageUrl i ceną i takie
dane możemy teraz pobrać.
Więc tutaj po tytuł otrzymujemy działanie productData. tytuł, dla imageUrl, to akcja. dane produktu.
imageUrl, co nie dziwi w opisie, to akcja. dane produktu.
opis i cena, to działanie. dane produktu. Cena £. To jest teraz nowy produkt, który tworzę.
Teraz musimy dodać go do naszego sklepu, zwracając tutaj nasz zaktualizowany stan, w którym najpierw kopiuję istniejący
stan, a teraz muszę dodać go zarówno do dostępnych produktów, jak i produktów
użytkowników, ponieważ go stworzyliśmy, z pewnością dlatego należy dla nas, więc musi być częścią zarówno tablic, jak
i dostępnych produktów, więc możemy wziąć te dostępne produkty, które otrzymaliśmy i użyć concat, aby uzyskać
nową tablicę, która jest starą tablicą plus dodać nowy element, a tutaj nowy produkt jest ten nowy element i
robię dokładnie to samo w przypadku produktów użytkownika.
Więc tutaj używam państwowych produktów użytkownika i konkatuję mój nowy produkt. A co z aktualizacją? Aby zaktualizować, musimy przede wszystkim
znaleźć indeks bieżącego produktu, aby indeks
produktu mógł być stałą nazwą, można uzyskać dostęp do naszych produktów użytkowników, a tam z indeksem find, który
jest wbudowaną metodą Javascript, możemy znaleźć indeks określonego elementu.
Ponownie bierze to funkcję, która wykonuje się na każdym elemencie w tej tablicy i która musi
zwrócić wartość true, abyśmy mieli indeks, i tam spojrzę na identyfikatory i szukam identyfikatorów,
w których jest on równy
mojemu pid, moje działanie pid, ponieważ jeśli pamiętasz, jak skonfigurowaliśmy tę akcję, do aktualizacji mamy tutaj pole
pid, które przechowuje identyfikatory produktów, które otrzymujemy.
Więc szukam tego produktu, a następnie przechowuję indeks tego produktu w tablicy produktów
użytkownika w indeksie produktów tutaj,
teraz możemy utworzyć tutaj zaktualizowany produkt, który jest technicznie nowym przedmiotem produktu, ale oczywiście
wstępnie wypełniony starymi produktami
dane, na przykład
zachowujemy identyfikator, więc podejmujemy akcję pid jako wartość.
Zachowuję również identyfikator właściciela i w tym celu mogę uzyskać dostęp do produktów użytkowników państwowych dla indeksu, który
właśnie odkryliśmy, a więc dla tego indeksu produktów,. ownerID, nie zmienię tego.
Oczywiście zachowam nowy tytuł,
więc tutaj będę przechowywać akcję. dane produktu. tytuł, zapiszę nowy imageUrl, więc akcja. dane produktu.
imageUrl i ja zapiszemy nowy opis, więc akcja. dane produktu. opis. Jednak wspomniałem, że cena nie powinna być
edytowalna, więc jako wartość tego zachowam pierwotną cenę, więc podaj indeks produktów użytkowników. cena tutaj.
Nawiasem mówiąc, oznacza to również, że nasze działanie nie jest całkowicie poprawne, tam też oczekuję ceny, nie powinienem tego robić, ponieważ
i tak nie możemy wprowadzić jej w nasze dane wejściowe, nie potrzebujemy jej, więc nie powinniśmy spodziewaj się tego tutaj, nie powinniśmy przekazywać go
jako części danych produktu do aktualizacji produktu, w przypadku nowego produktu potrzebujemy go, ale do aktualizacji nie.
Dzięki temu mamy nasz zaktualizowany produkt z kilkoma nowymi danymi i starymi
danymi, teraz musimy oczywiście zaktualizować nasz stan i do tego mamy zaktualizowane produkty użytkownika, w których ostatecznie kopiuję moje istniejące produkty
użytkownika za pomocą tej składni tutaj, aby utworzyć kopię, a następnie ustawiam zaktualizowane produkty użytkownika dla
wybranego indeksu produktu równe zaktualizowanemu produktowi, więc zastępuję produkt o tym indeksie nowym zaktualizowanym produktem w mojej kopii,
nie w oryginalnej tablicy, ale w kopii. Muszę zrobić to samo z dostępnymi
produktami, ale tam przede wszystkim muszę znaleźć indeks, ponieważ ten indeks
tutaj działa tylko dla produktów użytkowników, indeks dostępnych produktów jest
prawdopodobnie inny, więc mam swoje dostępne indeks produktu tutaj, jeśli chcesz go tak nazwać, który
ogólnie ma taką samą logikę wyboru, więc możemy go skopiować, ale oczywiście
zajrzę do tablicy dostępnych produktów zamiast tablicy produktów użytkownika. A teraz znowu, tutaj możemy mieć zaktualizowane dostępne
produkty, w których kopiuję mój stan dostępnych produktów, a następnie ustawiam zaktualizowane dostępne produkty
dla danego indeksu produktów na równe, przepraszam za dostępny indeks produktów oczywiście równy zaktualizowanemu produktowi, tak aby
Zastępuję mój istniejący produkt zaktualizowanym produktem zarówno w produktach dostępnych,
jak i w tablicy produktów użytkownika. Cóż, teraz musimy tylko przywrócić nasz nowy
stan, najpierw skopiować istniejący i ustawić dostępne produkty równe zaktualizowanym dostępnym produktom i ustawić produkty użytkownika równe zaktualizowanym
produktom użytkownika, więc do moich zaktualizowanych tablic konfiguruję się tam. Dzięki temu mamy nadzieję, że mamy całą logikę, której potrzebujemy, teraz wyślijmy
te zdarzenia z poziomu ekranu dodanego produktu. Więc tutaj musimy zaimportować użycie wysyłki
z React Redux i zaimportować nasze akcje, więc zaimportuj wszystko jako akcje produktów z folderu
sklepu, tam z folderu akcji i tam z pliku produktów, a następnie oczywiście wyślij te rzeczy
w module obsługi przesyłania. Tutaj, co wysyłamy, zależy od tego, czy
edytujemy, czy dodajemy,
jak wspomniałem, możemy dowiedzieć się, co się dzieje z pomocą edytowanego produktu, jeśli jest
ustawiony, edytujemy, jeśli nie jest ustawiony, jesteśmy dodawanie
Więc tutaj, w module obsługi przesyłania, możemy dodać sprawdzanie if i sprawdzanie, czy edytowany produkt,
jeśli jest ustawiony, edytujemy, więc wtedy chcę wysłać zdarzenie aktualizacji produktu, po pierwsze, ja musimy
utworzyć tę funkcję wysyłki za pomocą użycia wysyłki, a teraz z tym utworzonym, tam możemy wywołać działania
produktów wysyłki, zaktualizuj produkt, ponieważ robimy to tutaj i teraz przesyłamy
wszystkie potrzebne nam dane,
które są moim ID produktu
, to jest identyfikator produktu, który edytujemy, wyodrębniamy
to tutaj i oczywiście dodatkowo przesyłamy tytuł, przekazujemy opis, wszystkie te stałe stanu, które mamy
tutaj, nasz imageUrl, a nie cenę, ponieważ nie potrzebuję tego, aw innym przypadku tutaj, oznacza to, że dodajemy,
a następnie
chcę wysłać akcję produktów. stworzyć produkt, tutaj
przekazujemy tytuł, opis, imageUrl, a także cenę, a wraz z tym powinniśmy mieć konfigurację,
w której mamy nadzieję dodawać i edytować produkty.
Zapiszmy
to i rzućmy okiem. Jeśli teraz przejdziemy do obszaru administracyjnego tutaj i dodam to
i dodam wykrzyknik tutaj, a także tutaj w opisie i klikam Zapisz, dostaję niezdefiniowany nie jest przedmiotem, oceniając
cenę rekwizytów do naprawienia.
Wygląda więc na to, że straciłem swoją cenę podczas próby aktualizacji.
Dobrze, zanim to naprawimy, zobaczmy, czy dodanie nowego produktu w ogóle działa.
Jeśli dodam tutaj produkt z testem, test, który oczywiście nie jest prawidłowym imageUrl, więc
nie zobaczymy obrazu, ale przynajmniej popijamy coś, jest to również test.
Jeśli spróbujemy tego i kliknę przycisk Prześlij, to również
nie działa, więc jakoś oszczędzanie ceny
nie działa i myślę, że problem jest tutaj, problem polega na tym, że cena jest w rzeczywistości
ciągiem znaków, ale powinna być numer, dzięki czemu możemy łatwo przekonwertować go na
liczbę, dodając tutaj znak plus, zanim przekażemy go, aby utworzyć produkt, do aktualizacji, z drugiej strony, jeśli spojrzymy na nasz reduktor produktów,
zwykle powinien zachować cenę, którą już miał .
Zobaczmy więc, czy to plus naprawia to dodawanie, czy też jest też inny problem, to była zmiana, która i tak
jest wymagana, ale zobaczmy, czy jest inny problem. Więc przetestuj, przetestuj, dwanaście, proszę
wprowadź tutaj tylko cyfry, a nie jakiś tekst, który obecnie możesz, ale który
by go złamał, przetestuj, naciśnij ten przycisk, tak, nie wygląda to źle, mamy tutaj problem z obrazem,
ale jeśli przewiniemy w dół, właściwie tutaj, jeśli to odrzucimy, możemy zobaczyć nasz produkt,
więc cena jest pominięta, więc coś jest nie
tak i wydaje się, że nie zapisujemy obrazu poprawnie,
nie tylko dlatego, że nie jest wyświetlany, ale
z powodu ostrzeżenie, które otrzymaliśmy, ale
ogólnie działa.
Jednak na przykład tutaj, jeśli spróbuję zaktualizować i zapisać to, nadal pojawia się błąd, więc
nadal coś jest nie tak.
Więc jedną rzeczą, która jest niewłaściwa, są oczywiście działania, w przypadku aktualizacji produktu typem powinien być produkt
aktualizujący, a nie tworzenie produktu,
w przeciwnym razie wyzwalamy niewłaściwe działanie w reduktorze, co tłumaczy występujący błąd ceny.
Musi to być tutaj aktualizacja produktu, aby nieoczekiwanie zaktualizować produkt.
To jeden problem, ale kolejny duży problem można znaleźć na ekranie dodanego produktu. Używam tu metody wywołania zwrotnego use, aby
odpowiednio owinąć moduł obsługi przesyłania i robię to,
aby uniknąć niepotrzebnego odtwarzania funkcji.
Problem polega na tym, że początkowo ustawiłem to jako pustą tablicę jako listę zależności, co oznacza, że
nigdy nie jest ona odtwarzana, co miało sens, gdy logowaliśmy się tylko na
konsoli, ale teraz robimy tam rzeczy i teraz faktycznie mamy zależności.
W tej chwili nigdy nie odtwarzam tej funkcji, co oznacza, że nigdy nie jest odtwarzana ze względu na zaktualizowane wartości.
Kiedy przesyłamy formularz, nigdy nie bierzemy pod uwagę tego, co wpisał użytkownik.
Więc właściwie teraz
musimy tutaj określić zależności, funkcję wysyłki, ale co ważniejsze, nawet identyfikator prod, tytuł, opis
i imageUrl, a także oczywiście cenę. Teraz, jeśli to uratujemy, powinniśmy mieć się dobrze i wszystkie
problemy powinny zniknąć.
Poczekajmy więc na
ponowne załadowanie, przejdź teraz do administratora i zacznij edytować to może i teraz, jeśli dodamy wykrzyknik w tytule i w
opisie i zachowamy to i wrócimy, zobaczymy to tutaj i jeśli przejdziemy do produktów , widzimy
to również tutaj, a w szczegółach widzimy również wykrzyknik.
Teraz, jeśli wrócimy do administratora i utworzymy
nowy produkt, przetestuj,
przetestuj, dwunastu, przetestuj to, a ja to zapiszę i wrócę, teraz
to też się pojawi. Oczywiście obraz nie pojawia się,
ponieważ nie wprowadziliśmy prawidłowego adresu URL, ale pojawiają się wszystkie inne
dane, więc na ogół działa i oczywiście możesz wprowadzić
prawidłowy imageUrl i to też się zepsuje, przetestujmy to szybko także. Wróćmy więc do sekcji administracyjnej i dodajmy tutaj półkę,
dlatego wybrałem adres URL półki znalezionej w Internecie za 199. 99, to ładna półka
jak ta. Jeśli teraz to zapiszemy i wrócimy, to wygląda dobrze, oto nasz
obraz i widzimy to również tutaj na ekranie produktu i możemy go również wyświetlić tutaj.
Wydaje się więc,
że to działa i dzięki temu ogólnie mamy konfigurację, która działa.
Teraz są drobne rzeczy, nad którymi chcę popracować, na przykład przed usunięciem, fajnie
byłoby mieć małe okno dialogowe potwierdzenia, a ponadto chcę się upewnić, że kiedy dodamy lub edytujemy produkt, po kliknięciu
przycisku Zapisz tutaj automatycznie nawigujemy wstecz.
Są to oczywiście drobne rzeczy, ale myślę, że stanowią one dobry finał tutaj w tym module.