Nasze podejście tutaj oczywiście działa. Przechowujemy dane wejściowe w pewnym stanie,
przechowujemy ważność w pewnym stanie i moglibyśmy zarządzać ważnością dla wszystkich naszych danych wejściowych i po prostu mieć tutaj
nasze różne funkcje obsługi zmian dla naszych różnych danych wejściowych, które by działały.
Przy okazji jedna ważna uwaga, ponieważ sprawdzam ważność tytułu tutaj w module obsługi przesyłania,
oczywiście powinniśmy również dodać go tam jako zależność, więc
tytuł jest ważny, należy tam dodać jako zależność w wywołaniu zwrotnym użycia tablica zależności, to ważne,
w przeciwnym
razie ta funkcja nie zostanie odbudowana, gdy ta ważność ulegnie
zmianie, co oznacza, że nie będziemy mogli jej później przesłać. Problem z naszym obecnym podejściem polega na
tym, że zarządzamy różnymi stanami, aby przechowywać dane wejściowe dla różnych danych wejściowych, a następnie mamy również
różne stany ważności, przynajmniej potencjalnie, jeśli zaczniemy zarządzać naszą ważnością, taką jak ta
i dla bardzo dużych formularzy, oczywiście to oznacza dużo kopiowania i wklejania, dużo zarządzania stanem.
Teraz, jeśli masz tak wiele stanów, które są w pewien sposób połączone, możesz to zrobić w bardziej elegancki
sposób, zamiast mieć osobne stany dla każdego
wejścia, możesz mieć jeden duży stan, który scala wszystkie wartości wejściowe i który łączy wszystkie ważności
a następnie zastosuj koncepcję zwaną reduktorem, a nie reduktorem Redux, ale obsługiwaną przez React out of box, aby zarządzać
tym stanem.
Robisz to za pomocą haka reduktora, który znowu nie ma nic wspólnego z Redux, koncepcja
reduktora nie jest wyłączna dla Redux, reduktor na końcu jest tylko funkcją, która pobiera dane wejściowe i wydziela część
mocy, a zatem React obsługuje to również a zobaczysz, jak możesz to teraz wykorzystać
w tym wykładzie.
Więc jaki jest pomysł reduktora? Teraz najpierw ważne jest, aby
zrozumieć, że użycie reduktora jest hakiem, który pomaga w zarządzaniu stanem. Zwykle używasz go, jeśli masz
połączone stany lub bardziej złożony stan i nie chcesz mieć wielu indywidualnych wywołań stanu
użytkowania i kilku pojedynczych stanów, którymi zarządzasz. Następnie możesz użyć reduktora i oto jak
to działa.
Zaczynasz od utworzenia reduktora, powiedzmy tutaj reduktora formularzy, możesz nazwać go jak chcesz i pamiętaj, że tworzę go
poza moim komponentem formy, możesz to zrobić, ale jeśli
nie zależy od rekwizytów, możesz to zrobić poza tym obszarem, aby nie odbudować go
przy każdym cyklu ponownego renderowania i nie musisz nawet używać wywołania zwrotnego, co oczywiście również
kosztuje pewną wydajność, jeśli go użyjesz. Więc używaj go poza nim,
buduj poza nim, aby uniknąć niepotrzebnego odtwarzania tej funkcji, a teraz reduktor, podobnie jak
reduktor pobiera bieżący stan i akcję, ale znowu nie jest związany z Redux, nie jest używany przez Redux, funkcje
reduktora zawsze działają w taki sposób. Teraz tam znowu, podobnie jak w
reduktorze Redux, ponieważ znowu działają w ten sposób, możesz sprawdzić różne typy
akcji, a tutaj chcę sprawdzić jeden typ, to też po
prostu użyj
instrukcji if, możesz użyć instrukcji case switch
i że sprawdzam akcję. wpisz tutaj, zależy
ode mnie, możesz nazwać to, co chcesz, ponieważ to ty będziesz
wysyłał akcję później, a tutaj sprawdzam akcję aktualizacji, która jest również identyfikatorem, który wybrałem
i który podobnie jak w Redux, możesz również przechowuj ten identyfikator w autonomicznej stałej tutaj, abyś mógł mieć tutaj akcję aktualizacji reduktora, na
przykład identyfikator aktualizacji reduktora w ten sposób i użyj go zamiast tego tutaj, jeśli chcesz
i możesz nazwać to, co chcesz.
Więc teraz sprawdzam tę akcję, a jeśli ta akcja wystąpi, chcę zapisać wartość wejściową i zweryfikować ją, ale aby to zrozumieć, musimy
zrozumieć, w jaki sposób korzystamy z reduktora formularzy.
Więc zostawmy na chwilę tak i przejdźmy do samego komponentu, tutaj
zaczynamy konfigurować nasz stan formularza tutaj, więc
tutaj chcę wywołać reduktor użytkownika, a teraz użyć reduktora weź taką funkcję reduktora, więc przekażę
mój reduktor formularzy, który ustawiłem tutaj i który jest jeszcze niedokończony.
Użyj reduktora bierze również opcjonalny drugi argument, którym jest stan początkowy,
który chcesz przekazać i który może być dowolny, ale tutaj przekażę obiekt JavaScript,
a stan początkowy, którego chcę tutaj użyć, to w końcu obiekt, który ma wartości wejściowe, które są
kolejnym zagnieżdżonym
obiektem, który wkrótce zapełnię, ważności wejściowe, które również są zagnieżdżonymi obiektami i być może
ogólna poprawność formy, nazwiję, że forma
jest poprawna, co początkowo jest fałszywe, powiedzmy. To jest teraz mój stan początkowy, który tu
przekazuję i to stan, który później chcę zmienić z wnętrza reduktora formularzy. Teraz na wartościach wejściowych możemy na przykład dodać nasz tytuł i to
od Ciebie zależy, jak go nazwiesz, który jest
początkowo pustym ciągiem powiedzmy, że będą to wartości początkowe, które chcę ustawić na moich danych wejściowych, to
będzie w koniec zastąp moje zarządzanie stanem tam, gdzie ręcznie przechowuję dane wejściowe w różnych stanach.
Teraz połączę to wszystko w jeden obiekt zarządzany przez ten reduktor.
Mam więc tutaj swój tytuł i faktycznie nie zawsze jest on pusty, ale w rzeczywistości jest
pusty tylko wtedy, gdy nie
mamy edytowanego produktu, więc skopiuję ten czek i użyję go tutaj.
Teraz to samo oczywiście dla imageUrl, tam zainicjowałem
to za pomocą edytowanego produktu. imageUrl, jeśli jest dostępny, a poza tym
używam
pustego ciągu, w zasadzie to, co tam zrobiłem.
I oczywiście robię to samo dla opisu, tutaj chcę sprawdzić,
czy edytowany produkt jest ustawiony i używam tego opisu lub ustawiam go
na pusty ciąg, jeśli nie jest dostępny. Wreszcie mamy cenę, a ja zawsze mam pusty
ciąg, ponieważ albo nie potrzebujemy go w
przypadku edytowanego produktu, to nie dbam o jego
wartość lub potrzebujemy go,
cóż, to i tak chcę zainicjować go pustą wartością. Teraz oczywiście każde wejście ma również ważność, więc możemy dodawać tytuł tutaj i
ponownie sprawdzać, czy edytowany Produkt jest
ustawiony, jeśli jest ustawiony, to wiem, że edytuję,
więc będziemy wstępnie wypełniać tytuł, więc początkowo będzie być
poprawne, więc w tym
przypadku moja początkowa wartość byłaby prawdziwa, w przeciwnym
razie będzie fałszywa, a teraz jest to również coś, co możemy powtórzyć dla imageUrl. Jeśli mamy edytowany produkt, wiemy, że został on wstępnie
wypełniony,
dlatego początkowo będzie ważny, więc ustawimy to na
true, w przeciwnym razie ustawię na false.
W moim opisie jest to to samo - prawda lub fałsz, a
cena jest równa, oczywiście,
jeśli nie edytujemy ceny, jeśli edytujemy,
ale jeśli edytujemy, to i tak nie dbam o cenę ponieważ nie będzie to zmienne.
Dlatego wiem, że jeśli edytuję, powinienem traktować to jako prawidłowe, ponieważ i tak nie można go zmienić
i dlatego nie dbam
o te dane wejściowe, ale nie chcę blokować przesyłania formularzy z powodu ustawienia wartości false, gdy i tak nie mogę go edytować.
Więc ustawię to na prawdę, jeśli nie jest planowana edycja,
jeśli nie edytujemy produktu, ale dodajemy jeden, cena będzie edytowalna i dlatego zaczniemy w stanie fałszywym, ponieważ wprowadzona cena
będzie początkowo być pustym, właśnie to tutaj konfigurujemy. A teraz ogólna ważność formularza, cóż, jeszcze
raz mogę sprawdzić, czy
mamy edytowany produkt, co oznacza, że edytujemy, to formularz jest prawdziwy, formularz jest
początkowo ważny, w przeciwnym razie początkowo
jest fałszywy, jeśli dodajemy nowy produkt . Teraz jest to mój stan początkowy,
teraz ta funkcja reduktora powinna być w stanie zmienić ten stan, gdy akcje są wywoływane,
a akcja powinna być wywoływana bez względu na
to, co wpisujemy w jednym z naszych danych wejściowych, który będzie wyzwalaczem. Dlatego możemy teraz pozbyć się tutaj wszystkich tych przypisań stanu,
a zatem możemy również pozbyć się całego importu stanu użycia, a nawet upewnić się, że wysyłamy akcję
aktualizacji reduktora dla każdego naciśnięcia klawisza na wejściu.
Więc tutaj w module obsługi zmiany tytułu, ja w końcu usunę ten kod, na razie zostawiam opcję sprawdzania if, ale na razie nie
będę tam żadnego kodu, zamiast tego chcę wysłać aktualizację reduktora
a teraz odbywa się to w wyniku wywołania reduktora użycia, ponieważ reduktor użycia oczywiście zwraca
coś, tak jak zrobił to stan użycia. Zwraca również tablicę zawierającą dokładnie dwa elementy
i dlatego możemy ją zniszczyć za pomocą tej składni niszczącej tablicę, której użyliśmy również
w stanie użycia i tam otrzymuję stan formularza jako pierwszą wartość, a funkcję wysyłania jako drugą
wartość.
To zawsze skorzysta z reduktora, migawki stanu, która aktualizuje się oczywiście za każdym razem, gdy ją zmienisz, więc za
każdym
razem, gdy ją zmienisz, ten komponent ponownie się poda i da ci nową migawkę stanu
i funkcję, wysyłanie na końcu jest funkcją który umożliwia wysyłanie akcji przeciwko temu reduktorowi.
Oczywiście możesz nazwać te dwa elementy, jak chcesz, ale myślę, że
to rozsądne nazewnictwo,
to jest nasza migawka stanu, to jest funkcja. Nawiasem mówiąc, wysyłka to nazwa, której już użyłem tutaj z
Redux, więc tutaj nadam nazwę temu formularzowi wysyłki, aby uniknąć kolizji nazw, możesz nazwać
ją tak, jak chcesz.
Zatem w formularzu obsługi zmiany tytułu można teraz użyć stanu formularza wysyłki, po prostu go wywołuję i
muszę przekazać tam obiekt opisujący moją akcję, a ten obiekt będzie miał właściwość type,
nie trzeba mieć
właściwości type , możesz nazwać ten identyfikator lub identyfikator lub cokolwiek zechcesz, ale
używam tutaj typu, ponieważ faktycznie sprawdzam właściwość type wewnątrz mojej funkcji reduktora, a ta funkcja
reduktora będzie wykonywana dla każdej nowej akcji, którą wywołasz. Więc jeśli tam wrócę, typem będzie aktualizacja reduktora,
a może lepszą nazwą będzie aktualizacja formularza, tak myślę, więc tego też użyję tutaj tutaj i tutaj, więc
aktualizacja formularza, może formularz wejściowy aktualizacja, nazwa
oczywiście zależy od ciebie, ale powinna być jasna o tym, co robi, więc tutaj będę również miał
aktualizację
danych wejściowych formularza, tak, to
wygląda dobrze.
Więc formularz aktualizacji
danych wejściowych, to jest to,
co tam wysłałem, musimy go
również tutaj zmienić i oczywiście możesz również przekazać dowolne inne dane, których możesz chcieć użyć w swoim reduktorze, a
ja mam kilka innych danych, które chcę posługiwać się. To byłaby wartość, a ja po prostu nadam
jej nazwę, tę
właściwość, możesz nazwać ją tak,
jak chcesz, to jest tekst,
który został wprowadzony, więc po prostu przesyłam ją do reduktora, abyśmy mogli zapisać ją w naszym stanie tam i ważność
tego wejścia.
Tak więc tutaj dodam właściwie poprawny rekwizyt, który początkowo powiedzmy, że jest fałszywy, a teraz usunę ten inny przypadek i sprawdzę, czy mamy tutaj więcej niż zero, co
oznaczałoby, że powinien być prawdziwy, ponieważ wtedy ustawiłem jest poprawny równa
się true, w przeciwnym razie pozostanie fałszywa, a dzięki temu możemy
również dodać jest poprawny jako klucz do akcji i przekazać wartość przechowywaną w naszej
poprawnej zmiennej
i będzie to początkowo fałsz, ale jeśli nasza długość wejściowa dla tytułu jest
większe od zera, wtedy faktycznie będzie to prawda i teraz oczywiście musimy również poinformować nasz reduktor, które wejście to spowodowało.
Więc dodam tutaj pole wejściowego identyfikatora lub po prostu dane wejściowe, cokolwiek chcesz i użyję tytułu tutaj, a ten klucz powinien być
kluczem, który masz również w swoim stanie, tak jak tutaj w wartościach wejściowych i ważnościach
wejściowych, ponieważ pozwoli to napisać kod reduktora, który wkrótce zrobimy, który jest
wysoce wielokrotnego użytku i bardzo elastyczny, ponieważ teraz możemy zrobić kolejny krok i upewnić się, że przekształcimy go
w funkcję, która faktycznie działa dla wszystkich danych wejściowych i która jest naprawdę elastyczna pod względem jak z tego
korzystamy.