Unser Ansatz hier funktioniert natürlich. Wir speichern die Eingaben in einem bestimmten
Zustand, wir speichern die Gültigkeit in einem bestimmten Zustand und wir könnten dieses Gültigkeitsmanagement für alle unsere Eingaben hier durchführen und
einfach unsere verschiedenen Änderungshandlerfunktionen hier für unsere verschiedenen Eingaben haben, die funktionieren würden.
Ein wichtiger Hinweis übrigens, bevor wir fortfahren, da ich die Gültigkeit des Titels hier im
Submit-Handler überprüfe, sollten wir ihn natürlich auch dort als
Abhängigkeit hinzufügen, damit der Titel gültig ist, muss er dort als Abhängigkeit im Use-Callback hinzugefügt werden Abhängigkeitsarray, das
ist wichtig, sonst
wird diese Funktion nicht neu erstellt, wenn sich diese Gültigkeit
ändert, was bedeutet, dass wir sie danach nicht mehr senden können. Das Problem bei unserem aktuellen Ansatz ist,
dass wir verschiedene Zustände verwalten, um die Eingabe für die verschiedenen Eingaben zu speichern, und dann auch
unterschiedliche Gültigkeitszustände haben, zumindest potenziell, wenn wir anfangen, unsere Gültigkeit wie diese
und natürlich für sehr große Formen zu verwalten bedeutet viel Kopieren und Einfügen, viel Staatsmanagement.
Wenn Sie nun so viele Zustände haben, die miteinander verbunden sind, können Sie dies auch auf elegantere Weise tun. Anstatt
für jede Eingabe separate Zustände zu haben, können
Sie einen großen Zustand haben, in dem alle Eingabewerte und alle Gültigkeiten zusammengeführt werden Verwenden Sie dann ein
Konzept, das als Reduzierer bezeichnet wird, nicht als Redux-Reduzierer, sondern als von React out the Box unterstütztes Konzept, um diesen Status
zu verwalten.
Sie tun dies mit dem Reduzierhaken, der wiederum nichts mit Redux zu tun hat. Das Konzept eines
Reduzierers ist nicht exklusiv für Redux. Ein Reduzierer am Ende ist nur eine Funktion, die Eingaben entgegennimmt und einige Ausgaben ausspuckt.
Daher unterstützt React dies auch und Sie werden in dieser Vorlesung sehen, wie Sie dies
jetzt verwenden können.
Was ist die Idee eines Reduzierers? Zunächst ist es wichtig zu
verstehen, dass Use Reducer ein Haken ist, der Ihnen bei der Statusverwaltung hilft. Normalerweise verwenden Sie es, wenn Sie
Verbindungsstatus oder einen komplexeren Status haben und nicht möchten, dass eine Reihe von Einzelaufrufstatusaufrufen und eine
Reihe von Einzelzuständen, die Sie verwalten, vorhanden sind. Sie können dann den Reduzierer verwenden und hier erfahren Sie,
wie es funktioniert.
Sie erstellen zunächst einen Reduzierer, sagen wir hier einen Formularreduzierer. Sie können ihn beliebig benennen. Bitte beachten Sie, dass ich ihn außerhalb meiner
Formularkomponente erstelle. Sie können ihn dort ausführen, aber wenn Sie nicht auf
Requisiten angewiesen sind, können Sie dies tun kann es außerhalb von dort tun, so dass dies nicht
bei jedem erneuten Rendern neu erstellt wird und Sie nicht einmal Use Callback verwenden müssen, was natürlich auch
etwas Leistung kostet, wenn Sie es verwenden. Verwenden Sie es also außerhalb von
dort, bauen Sie es außerhalb von dort, um unnötige Neuerstellungen dieser Funktion zu vermeiden, und jetzt erhält der
Reduzierer, genau wie ein Redux-Reduzierer den aktuellen Status und eine Aktion, aber auch hier ist er nicht mit Redux verwandt, er wird nicht
von Redux verwendet. Reduzierfunktionen funktionieren einfach immer so. Jetzt da drin, wieder genau wie
in einem Redux-Reduzierer, weil sie wieder so funktionieren, können Sie verschiedene Aktionstypen überprüfen
und hier möchte ich einen Typ überprüfen. Verwenden Sie auch nur
eine if-Anweisung,
Sie könnten eine switch-case-Anweisung verwenden auch und
dass ich Aktion überprüfen. Die Eingabe hier liegt
ganz bei mir. Sie können diese beliebig benennen, da Sie die Aktion
später auslösen werden. Hier überprüfe ich, ob die Aktualisierungsaktion ebenfalls eine von mir gewählte Kennung
ist und genau wie in Redux auch möglich ist Speichern Sie diesen Bezeichner hier in einer eigenständigen Konstante, sodass Sie hier beispielsweise Ihre Reduziereraktualisierungsaktion
ausführen können, z. B. Ihren Reduziereraktualisierungsbezeichner, und verwenden Sie diesen stattdessen hier, wenn Sie möchten, und
Sie können diesen Namen beliebig benennen.
Jetzt suche ich nach dieser Aktion. Wenn diese Aktion ausgeführt wird, möchte ich einen Eingabewert speichern und validieren. Um dies zu verstehen, müssen
wir jedoch verstehen, wie wir den Formularreduzierer verwenden.
Lassen wir es also für den Moment so und gehen wir zur Komponente selbst
hinunter. Dort beginnen wir hier unten mit dem Einrichten unseres
Formularstatus. Hier möchte ich den Benutzer-Reduzierer aufrufen und jetzt den Reduzierer verwenden. Nehmen Sie eine solche Reduzierungsfunktion, daher werde ich
weitergeben Mein Formularreduzierer, den ich hier eingerichtet habe und der noch unvollendet ist.
Use Reducer verwendet auch ein optionales zweites Argument, das der Anfangszustand ist,
den Sie übergeben möchten, und das kann alles sein, aber hier übergebe ich ein
Javascript-Objekt, und der Anfangszustand, den ich hier verwenden möchte, ist am Ende ein Objekt, das hat Eingabewerte, die dann
ein weiteres
verschachteltes Objekt sind, das ich bald ausfüllen werde, Eingabevaliditäten, die ebenfalls ein verschachteltes Objekt und möglicherweise
eine allgemeine Formulargültigkeit sind. Ich werde es
als gültig bezeichnen, was anfangs falsch ist. Dies ist nun mein Ausgangszustand, den ich hier
übergebe, und dieser Zustand möchte ich später aus dem Formularreduzierer heraus ändern. Nun können wir bei den Eingabewerten beispielsweise unseren Titel hinzufügen, und es liegt
an Ihnen, wie Sie ihn benennen. Dies ist
zunächst eine leere Zeichenfolge. Nehmen wir an, dies sind die Anfangswerte, die ich für meine Eingaben festlegen
möchte Ende Ersetzen Sie dort unten meine Statusverwaltung, wo ich meine Eingaben manuell in verschiedenen Status speichere.
Jetzt werde ich dies alles zu einem Objekt zusammenführen, das über diesen Reduzierer verwaltet wird.
Also habe ich meinen Titel hier und eigentlich ist das natürlich nicht immer leer, aber eigentlich ist es
nur leer, wenn wir kein bearbeitetes
Produkt haben, also werde ich diesen Scheck von dort kopieren und hier verwenden.
Nun das gleiche natürlich für die imageUrl, dort initialisiere
ich dies mit editiertes Produkt. imageUrl, wenn es verfügbar ist und ich ansonsten eine leere
Zeichenfolge verwende,
im Grunde das, was ich dort unten auch getan habe.
Und natürlich mache ich dasselbe für die Beschreibung. Hier möchte ich überprüfen,
ob das bearbeitete Produkt festgelegt ist, und ich verwende diese Beschreibung oder setze sie auf
eine leere Zeichenfolge, wenn sie nicht verfügbar ist. Zu guter Letzt haben wir den Preis und dort habe
ich immer eine leere Zeichenfolge, weil wir sie entweder
bei einem bearbeiteten Produkt nicht brauchen, dann ist mir ihr Wert
egal oder wir brauchen sie, na
ja dann möchte ich es sowieso mit einem leeren Wert initialisieren. Jetzt hat natürlich jede Eingabe auch eine Gültigkeit, also können wir hier einen Titel
hinzufügen und erneut prüfen, ob editiertes Produkt
gesetzt ist. Wenn es gesetzt ist, weiß ich,
dass ich bearbeite, also haben wir den Titel vorab
ausgefüllt, also wird es
zunächst gültig sein, also wäre in diesem Fall mein
Anfangswert wahr, sonst wäre er falsch und jetzt können wir dies auch für imageUrl wiederholen. Wenn wir ein bearbeitetes Produkt haben, wissen wir, dass es
vorab ausgefüllt
wurde, daher ist es zunächst gültig, daher setzen wir dies
auf true, andernfalls setze ich es auf false.
Für meine Beschreibung hier ist es das gleiche - wahr oder falsch und für den
Preis ist es irgendwie gleich, natürlich
füllen wir den Preis nicht vor, wenn
wir ihn bearbeiten, aber wenn wir ihn bearbeiten, ist mir der Preis sowieso egal weil es nicht veränderbar sein wird.
Daher weiß ich, wenn ich bearbeite, sollte ich dies als gültig behandeln, da es sowieso nicht geändert werden
kann. Daher ist mir
diese Eingabe egal, aber ich möchte die Formularübermittlung nicht blockieren, da dies bei uns auf false gesetzt ist kann es sowieso nicht bearbeiten.
Ich werde es also auf true setzen, wenn dies nicht bearbeitet werden soll.
Wenn wir ein Produkt nicht bearbeiten, aber eines hinzufügen, kann der Preis bearbeitet werden, und daher beginnen wir in einem falschen Zustand, da die
Preiseingabe dies tut anfangs leer sein, das richten wir hier ein. Und jetzt die allgemeine Gültigkeit des Formulars. Nun, da
kann ich wieder überprüfen, ob
wir ein bearbeitetes Produkt haben, was bedeutet, dass wir es bearbeiten. Dann ist das Formular wahr,
das Formular ist anfänglich gültig, andernfalls ist es
anfänglich falsch, wenn wir ein neues Produkt hinzufügen . Dies ist mein Ausgangszustand hier. Jetzt
sollte diese Reduzierungsfunktion in der Lage sein, diesen Zustand zu ändern, wenn Aktionen ausgelöst werden,
und eine Aktion sollte gesendet werden, was auch
immer wir in eine unserer Texteingaben eingeben, das wird der Auslöser sein. Daher können wir jetzt alle diese Statuszuweisungen hier entfernen und
somit auch den gesamten Import des Nutzungsstatus entfernen und sicherstellen, dass wir die Reduzierungsaktualisierungsaktion für jeden
Tastendruck, den wir in einer Eingabe ausführen, auslösen.
Also hier im Titeländerungshandler werde ich am Ende diesen Code entfernen, ich werde die if-Prüfung für jetzt belassen, aber ich werde im Moment keinen
Code darin haben, stattdessen möchte ich dort unten das Reduzierer-Update versenden
und jetzt geschieht dies mit dem Ergebnis des Aufrufs "use reducer", da use reducer natürlich etwas zurückgibt,
genau wie es der use state tat. Es gibt auch ein Array mit genau zwei
Elementen zurück und daher können wir es mit dieser Array-Destrukturierungssyntax zerstören, die wir auch für
den Verwendungsstatus verwendet haben. Dort erhalte ich meinen Formularstatus als ersten Wert und eine Versandfunktion als zweiten
Wert.
Dies ist immer das, was Use Reducer Ihnen zurückgibt, ein Status-Snapshot, der natürlich aktualisiert wird, wenn Sie ihn ändern. Wenn Sie
ihn
also ändern, wird diese Komponente erneut gerendert und gibt Ihnen einen neuen Status-Snapshot und eine Funktion. Der
Versand am Ende ist eine Funktion Auf diese Weise können Sie Aktionen gegen diesen Reduzierer auslösen.
Natürlich können Sie diese beiden Elemente benennen, wie Sie möchten, aber ich denke,
dies ist eine
sinnvolle Benennung. Dies ist unser Status-Snapshot. Dies ist eine Funktion. Der Versand ist übrigens ein Name, den ich hier bereits von Redux verwendet
habe. Hier werde ich diesen Status des Versandformulars benennen, um einen Namenskonflikt zu vermeiden. Sie können
ihn benennen, wie Sie möchten.
Der Status des Versandformulars kann jetzt hier in meinem Titeländerungshandler verwendet werden. Ich rufe ihn einfach auf und muss
dort ein Objekt übergeben, das meine Aktion beschreibt. Dieses Objekt verfügt über eine type-Eigenschaft. Sie müssen
keine type-Eigenschaft haben Sie
könnten diese ID oder Kennung oder was auch immer Sie wollen benennen, aber ich verwende
hier den Typ, weil ich tatsächlich innerhalb meiner Reduzierungsfunktion nach der Typeneigenschaft suche und diese Reduzierungsfunktion
für jede neue Aktion ausgeführt wird, die Sie auslösen. Wenn ich also wieder nach unten gehe, wird der Typ
ein Reduzierer-Update sein, oder vielleicht wäre ein besserer Name tatsächlich ein Formular-Update, denke ich. Das werde ich natürlich auch hier und
hier oben verwenden, also Formular-Update, vielleicht Formulareingabe Update,
der Name liegt natürlich bei Ihnen, aber es sollte klar sein, was es tut, also werde ich hier auch ein
Update
für die Formulareingabe haben, ja, das
sieht gut aus.
Das Formular-Eingabe-Update ist
das, was ich dort unten versandt
habe. Wir müssen es auch
hier ändern. Natürlich können Sie auch alle anderen Daten, die Sie möglicherweise verwenden möchten, in Ihrem Reduzierer übergeben, und
ich habe einige andere Daten, die ich möchte verwenden. Das wäre der Wert und ich werde diesen Wert hier
nur benennen, diese Eigenschaft,
Sie können ihn benennen, wie
Sie möchten, das ist der eingegebene
Text, also leite ich ihn einfach an den Reduzierer weiter, damit wir ihn in unserem Zustand speichern können dort und die Gültigkeit
dieser Eingabe.
Deshalb werde ich hier tatsächlich eine gültige Requisite hinzufügen, die anfangs falsch ist, und jetzt werde ich diesen anderen Fall entfernen und prüfen, ob wir hier größer als Null sind, was
bedeuten würde, dass es wahr sein sollte, weil ich dann gesetzt habe, ist
gültig gleich wahr, sonst bleibt es falsch und damit können wir auch
hinzufügen, ist als Schlüssel für die Aktion gültig und leiten den in unserer gültigen Variablen
gespeicherten Wert
weiter. Dies ist zunächst falsch, aber wenn unsere Eingabelänge für den Titel gilt größer als
Null ist, dann ist es tatsächlich wahr und jetzt müssen wir natürlich auch unseren Reduzierer wissen lassen, welcher Eingang dies ausgelöst hat.
Also füge ich hier ein Eingabe-ID-Feld hinzu oder gebe einfach ein, was auch immer Sie möchten, und verwende hier den Titel. Dieser Schlüssel hier
sollte ein Schlüssel sein, den Sie auch in Ihrem Status haben, wie hier in Eingabewerten und Eingabevaliditäten,
da dies dies ermöglicht Sie müssen einen Reduzierungscode schreiben, den wir in Kürze erstellen
werden. Dieser ist sehr wiederverwendbar und sehr flexibel, da wir jetzt den nächsten Schritt unternehmen und sicherstellen können, dass wir
ihn in eine Funktion umwandeln, die tatsächlich für alle Eingaben funktioniert und in Bezug auf diese sehr flexibel ist wie wir
es benutzen.