1 00:00:02,290 --> 00:00:08,140 Unser Ansatz hier funktioniert natürlich. Wir speichern die Eingaben in einem bestimmten 2 00:00:08,140 --> 00:00:16,090 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 3 00:00:16,120 --> 00:00:21,370 einfach unsere verschiedenen Änderungshandlerfunktionen hier für unsere verschiedenen Eingaben haben, die funktionieren würden. 4 00:00:21,370 --> 00:00:26,560 Ein wichtiger Hinweis übrigens, bevor wir fortfahren, da ich die Gültigkeit des Titels hier im 5 00:00:26,770 --> 00:00:29,950 Submit-Handler überprüfe, sollten wir ihn natürlich auch dort als 6 00:00:29,950 --> 00:00:35,820 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 7 00:00:35,830 --> 00:00:36,980 ist wichtig, sonst 8 00:00:37,030 --> 00:00:40,570 wird diese Funktion nicht neu erstellt, wenn sich diese Gültigkeit 9 00:00:40,660 --> 00:00:47,970 ändert, was bedeutet, dass wir sie danach nicht mehr senden können. Das Problem bei unserem aktuellen Ansatz ist, 10 00:00:47,970 --> 00:00:55,410 dass wir verschiedene Zustände verwalten, um die Eingabe für die verschiedenen Eingaben zu speichern, und dann auch 11 00:00:55,410 --> 00:01:00,910 unterschiedliche Gültigkeitszustände haben, zumindest potenziell, wenn wir anfangen, unsere Gültigkeit wie diese 12 00:01:00,990 --> 00:01:07,400 und natürlich für sehr große Formen zu verwalten bedeutet viel Kopieren und Einfügen, viel Staatsmanagement. 13 00:01:07,410 --> 00:01:15,300 Wenn Sie nun so viele Zustände haben, die miteinander verbunden sind, können Sie dies auch auf elegantere Weise tun. Anstatt 14 00:01:15,330 --> 00:01:18,500 für jede Eingabe separate Zustände zu haben, können 15 00:01:18,540 --> 00:01:25,720 Sie einen großen Zustand haben, in dem alle Eingabewerte und alle Gültigkeiten zusammengeführt werden Verwenden Sie dann ein 16 00:01:25,740 --> 00:01:33,720 Konzept, das als Reduzierer bezeichnet wird, nicht als Redux-Reduzierer, sondern als von React out the Box unterstütztes Konzept, um diesen Status 17 00:01:33,720 --> 00:01:34,710 zu verwalten. 18 00:01:34,710 --> 00:01:40,210 Sie tun dies mit dem Reduzierhaken, der wiederum nichts mit Redux zu tun hat. Das Konzept eines 19 00:01:40,440 --> 00:01:47,550 Reduzierers ist nicht exklusiv für Redux. Ein Reduzierer am Ende ist nur eine Funktion, die Eingaben entgegennimmt und einige Ausgaben ausspuckt. 20 00:01:47,580 --> 00:01:52,800 Daher unterstützt React dies auch und Sie werden in dieser Vorlesung sehen, wie Sie dies 21 00:01:52,920 --> 00:01:54,190 jetzt verwenden können. 22 00:01:54,900 --> 00:01:57,510 Was ist die Idee eines Reduzierers? Zunächst ist es wichtig zu 23 00:01:57,510 --> 00:02:03,030 verstehen, dass Use Reducer ein Haken ist, der Ihnen bei der Statusverwaltung hilft. Normalerweise verwenden Sie es, wenn Sie 24 00:02:03,090 --> 00:02:09,420 Verbindungsstatus oder einen komplexeren Status haben und nicht möchten, dass eine Reihe von Einzelaufrufstatusaufrufen und eine 25 00:02:09,600 --> 00:02:16,340 Reihe von Einzelzuständen, die Sie verwalten, vorhanden sind. Sie können dann den Reduzierer verwenden und hier erfahren Sie, 26 00:02:16,350 --> 00:02:17,510 wie es funktioniert. 27 00:02:19,060 --> 00:02:25,530 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 28 00:02:25,570 --> 00:02:29,020 Formularkomponente erstelle. Sie können ihn dort ausführen, aber wenn Sie nicht auf 29 00:02:29,020 --> 00:02:33,940 Requisiten angewiesen sind, können Sie dies tun kann es außerhalb von dort tun, so dass dies nicht 30 00:02:33,940 --> 00:02:39,250 bei jedem erneuten Rendern neu erstellt wird und Sie nicht einmal Use Callback verwenden müssen, was natürlich auch 31 00:02:39,280 --> 00:02:44,110 etwas Leistung kostet, wenn Sie es verwenden. Verwenden Sie es also außerhalb von 32 00:02:44,110 --> 00:02:49,690 dort, bauen Sie es außerhalb von dort, um unnötige Neuerstellungen dieser Funktion zu vermeiden, und jetzt erhält der 33 00:02:49,690 --> 00:02:57,100 Reduzierer, genau wie ein Redux-Reduzierer den aktuellen Status und eine Aktion, aber auch hier ist er nicht mit Redux verwandt, er wird nicht 34 00:02:57,360 --> 00:03:02,240 von Redux verwendet. Reduzierfunktionen funktionieren einfach immer so. Jetzt da drin, wieder genau wie 35 00:03:02,310 --> 00:03:07,260 in einem Redux-Reduzierer, weil sie wieder so funktionieren, können Sie verschiedene Aktionstypen überprüfen 36 00:03:07,260 --> 00:03:11,520 und hier möchte ich einen Typ überprüfen. Verwenden Sie auch nur 37 00:03:11,520 --> 00:03:12,680 eine if-Anweisung, 38 00:03:12,690 --> 00:03:15,440 Sie könnten eine switch-case-Anweisung verwenden auch und 39 00:03:15,750 --> 00:03:19,260 dass ich Aktion überprüfen. Die Eingabe hier liegt 40 00:03:19,290 --> 00:03:24,030 ganz bei mir. Sie können diese beliebig benennen, da Sie die Aktion 41 00:03:24,030 --> 00:03:29,800 später auslösen werden. Hier überprüfe ich, ob die Aktualisierungsaktion ebenfalls eine von mir gewählte Kennung 42 00:03:29,820 --> 00:03:39,050 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 43 00:03:39,620 --> 00:03:45,850 ausführen können, z. B. Ihren Reduziereraktualisierungsbezeichner, und verwenden Sie diesen stattdessen hier, wenn Sie möchten, und 44 00:03:45,920 --> 00:03:48,260 Sie können diesen Namen beliebig benennen. 45 00:03:48,380 --> 00:03:57,180 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 46 00:03:57,340 --> 00:04:00,850 wir jedoch verstehen, wie wir den Formularreduzierer verwenden. 47 00:04:00,920 --> 00:04:05,510 Lassen wir es also für den Moment so und gehen wir zur Komponente selbst 48 00:04:05,600 --> 00:04:08,950 hinunter. Dort beginnen wir hier unten mit dem Einrichten unseres 49 00:04:08,960 --> 00:04:15,200 Formularstatus. Hier möchte ich den Benutzer-Reduzierer aufrufen und jetzt den Reduzierer verwenden. Nehmen Sie eine solche Reduzierungsfunktion, daher werde ich 50 00:04:15,200 --> 00:04:19,540 weitergeben Mein Formularreduzierer, den ich hier eingerichtet habe und der noch unvollendet ist. 51 00:04:19,940 --> 00:04:24,990 Use Reducer verwendet auch ein optionales zweites Argument, das der Anfangszustand ist, 52 00:04:24,990 --> 00:04:30,860 den Sie übergeben möchten, und das kann alles sein, aber hier übergebe ich ein 53 00:04:30,860 --> 00:04:38,630 Javascript-Objekt, und der Anfangszustand, den ich hier verwenden möchte, ist am Ende ein Objekt, das hat Eingabewerte, die dann 54 00:04:38,630 --> 00:04:39,990 ein weiteres 55 00:04:40,220 --> 00:04:46,670 verschachteltes Objekt sind, das ich bald ausfüllen werde, Eingabevaliditäten, die ebenfalls ein verschachteltes Objekt und möglicherweise 56 00:04:46,670 --> 00:04:49,610 eine allgemeine Formulargültigkeit sind. Ich werde es 57 00:04:49,620 --> 00:04:55,700 als gültig bezeichnen, was anfangs falsch ist. Dies ist nun mein Ausgangszustand, den ich hier 58 00:04:55,700 --> 00:05:03,260 ü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 59 00:05:03,260 --> 00:05:06,070 an Ihnen, wie Sie ihn benennen. Dies ist 60 00:05:06,070 --> 00:05:11,150 zunächst eine leere Zeichenfolge. Nehmen wir an, dies sind die Anfangswerte, die ich für meine Eingaben festlegen 61 00:05:11,150 --> 00:05:15,980 möchte Ende Ersetzen Sie dort unten meine Statusverwaltung, wo ich meine Eingaben manuell in verschiedenen Status speichere. 62 00:05:15,980 --> 00:05:20,220 Jetzt werde ich dies alles zu einem Objekt zusammenführen, das über diesen Reduzierer verwaltet wird. 63 00:05:20,480 --> 00:05:25,610 Also habe ich meinen Titel hier und eigentlich ist das natürlich nicht immer leer, aber eigentlich ist es 64 00:05:25,610 --> 00:05:27,410 nur leer, wenn wir kein bearbeitetes 65 00:05:27,410 --> 00:05:31,140 Produkt haben, also werde ich diesen Scheck von dort kopieren und hier verwenden. 66 00:05:31,370 --> 00:05:34,590 Nun das gleiche natürlich für die imageUrl, dort initialisiere 67 00:05:35,410 --> 00:05:40,150 ich dies mit editiertes Produkt. imageUrl, wenn es verfügbar ist und ich ansonsten eine leere 68 00:05:40,150 --> 00:05:40,930 Zeichenfolge verwende, 69 00:05:40,930 --> 00:05:43,540 im Grunde das, was ich dort unten auch getan habe. 70 00:05:44,110 --> 00:05:48,030 Und natürlich mache ich dasselbe für die Beschreibung. Hier möchte ich überprüfen, 71 00:05:48,070 --> 00:05:52,990 ob das bearbeitete Produkt festgelegt ist, und ich verwende diese Beschreibung oder setze sie auf 72 00:05:53,080 --> 00:05:59,410 eine leere Zeichenfolge, wenn sie nicht verfügbar ist. Zu guter Letzt haben wir den Preis und dort habe 73 00:05:59,410 --> 00:06:02,450 ich immer eine leere Zeichenfolge, weil wir sie entweder 74 00:06:02,470 --> 00:06:05,830 bei einem bearbeiteten Produkt nicht brauchen, dann ist mir ihr Wert 75 00:06:05,860 --> 00:06:08,140 egal oder wir brauchen sie, na 76 00:06:08,140 --> 00:06:15,020 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 77 00:06:15,020 --> 00:06:16,790 hinzufügen und erneut prüfen, ob editiertes Produkt 78 00:06:16,850 --> 00:06:19,010 gesetzt ist. Wenn es gesetzt ist, weiß ich, 79 00:06:19,040 --> 00:06:21,320 dass ich bearbeite, also haben wir den Titel vorab 80 00:06:21,320 --> 00:06:22,700 ausgefüllt, also wird es 81 00:06:22,700 --> 00:06:24,950 zunächst gültig sein, also wäre in diesem Fall mein 82 00:06:24,950 --> 00:06:32,250 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 83 00:06:32,250 --> 00:06:33,080 vorab ausgefüllt 84 00:06:33,080 --> 00:06:36,650 wurde, daher ist es zunächst gültig, daher setzen wir dies 85 00:06:36,650 --> 00:06:39,550 auf true, andernfalls setze ich es auf false. 86 00:06:39,740 --> 00:06:44,420 Für meine Beschreibung hier ist es das gleiche - wahr oder falsch und für den 87 00:06:44,540 --> 00:06:46,760 Preis ist es irgendwie gleich, natürlich 88 00:06:46,760 --> 00:06:49,090 füllen wir den Preis nicht vor, wenn 89 00:06:49,100 --> 00:06:55,200 wir ihn bearbeiten, aber wenn wir ihn bearbeiten, ist mir der Preis sowieso egal weil es nicht veränderbar sein wird. 90 00:06:55,310 --> 00:07:00,890 Daher weiß ich, wenn ich bearbeite, sollte ich dies als gültig behandeln, da es sowieso nicht geändert werden 91 00:07:00,890 --> 00:07:02,420 kann. Daher ist mir 92 00:07:02,440 --> 00:07:09,680 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. 93 00:07:09,980 --> 00:07:13,110 Ich werde es also auf true setzen, wenn dies nicht bearbeitet werden soll. 94 00:07:13,190 --> 00:07:18,770 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 95 00:07:18,770 --> 00:07:24,230 Preiseingabe dies tut anfangs leer sein, das richten wir hier ein. Und jetzt die allgemeine Gültigkeit des Formulars. Nun, da 96 00:07:24,320 --> 00:07:26,150 kann ich wieder überprüfen, ob 97 00:07:26,150 --> 00:07:31,130 wir ein bearbeitetes Produkt haben, was bedeutet, dass wir es bearbeiten. Dann ist das Formular wahr, 98 00:07:31,130 --> 00:07:33,590 das Formular ist anfänglich gültig, andernfalls ist es 99 00:07:33,590 --> 00:07:39,240 anfänglich falsch, wenn wir ein neues Produkt hinzufügen . Dies ist mein Ausgangszustand hier. Jetzt 100 00:07:39,260 --> 00:07:45,050 sollte diese Reduzierungsfunktion in der Lage sein, diesen Zustand zu ändern, wenn Aktionen ausgelöst werden, 101 00:07:45,050 --> 00:07:48,660 und eine Aktion sollte gesendet werden, was auch 102 00:07:48,730 --> 00:07:58,190 immer wir in eine unserer Texteingaben eingeben, das wird der Auslöser sein. Daher können wir jetzt alle diese Statuszuweisungen hier entfernen und 103 00:07:58,220 --> 00:08:05,780 somit auch den gesamten Import des Nutzungsstatus entfernen und sicherstellen, dass wir die Reduzierungsaktualisierungsaktion für jeden 104 00:08:05,790 --> 00:08:09,610 Tastendruck, den wir in einer Eingabe ausführen, auslösen. 105 00:08:09,710 --> 00:08:18,670 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 106 00:08:18,740 --> 00:08:22,770 Code darin haben, stattdessen möchte ich dort unten das Reduzierer-Update versenden 107 00:08:22,790 --> 00:08:28,960 und jetzt geschieht dies mit dem Ergebnis des Aufrufs "use reducer", da use reducer natürlich etwas zurückgibt, 108 00:08:28,960 --> 00:08:35,000 genau wie es der use state tat. Es gibt auch ein Array mit genau zwei 109 00:08:35,000 --> 00:08:40,710 Elementen zurück und daher können wir es mit dieser Array-Destrukturierungssyntax zerstören, die wir auch für 110 00:08:40,730 --> 00:08:47,450 den Verwendungsstatus verwendet haben. Dort erhalte ich meinen Formularstatus als ersten Wert und eine Versandfunktion als zweiten 111 00:08:47,450 --> 00:08:48,250 Wert. 112 00:08:48,290 --> 00:08:55,280 Dies ist immer das, was Use Reducer Ihnen zurückgibt, ein Status-Snapshot, der natürlich aktualisiert wird, wenn Sie ihn ändern. Wenn Sie 113 00:08:55,280 --> 00:08:55,770 ihn 114 00:08:55,790 --> 00:09:01,490 also ändern, wird diese Komponente erneut gerendert und gibt Ihnen einen neuen Status-Snapshot und eine Funktion. Der 115 00:09:01,550 --> 00:09:07,160 Versand am Ende ist eine Funktion Auf diese Weise können Sie Aktionen gegen diesen Reduzierer auslösen. 116 00:09:07,250 --> 00:09:11,760 Natürlich können Sie diese beiden Elemente benennen, wie Sie möchten, aber ich denke, 117 00:09:11,780 --> 00:09:13,270 dies ist eine 118 00:09:13,280 --> 00:09:20,100 sinnvolle Benennung. Dies ist unser Status-Snapshot. Dies ist eine Funktion. Der Versand ist übrigens ein Name, den ich hier bereits von Redux verwendet 119 00:09:20,100 --> 00:09:24,460 habe. Hier werde ich diesen Status des Versandformulars benennen, um einen Namenskonflikt zu vermeiden. Sie können 120 00:09:24,480 --> 00:09:25,980 ihn benennen, wie Sie möchten. 121 00:09:26,760 --> 00:09:33,350 Der Status des Versandformulars kann jetzt hier in meinem Titeländerungshandler verwendet werden. Ich rufe ihn einfach auf und muss 122 00:09:33,410 --> 00:09:39,170 dort ein Objekt übergeben, das meine Aktion beschreibt. Dieses Objekt verfügt über eine type-Eigenschaft. Sie müssen 123 00:09:39,170 --> 00:09:40,820 keine type-Eigenschaft haben Sie 124 00:09:40,820 --> 00:09:46,130 könnten diese ID oder Kennung oder was auch immer Sie wollen benennen, aber ich verwende 125 00:09:46,130 --> 00:09:52,010 hier den Typ, weil ich tatsächlich innerhalb meiner Reduzierungsfunktion nach der Typeneigenschaft suche und diese Reduzierungsfunktion 126 00:09:52,010 --> 00:09:59,260 für jede neue Aktion ausgeführt wird, die Sie auslösen. Wenn ich also wieder nach unten gehe, wird der Typ 127 00:09:59,500 --> 00:10:07,650 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 128 00:10:07,650 --> 00:10:10,830 hier oben verwenden, also Formular-Update, vielleicht Formulareingabe Update, 129 00:10:10,830 --> 00:10:18,750 der Name liegt natürlich bei Ihnen, aber es sollte klar sein, was es tut, also werde ich hier auch ein 130 00:10:18,750 --> 00:10:19,790 Update 131 00:10:19,800 --> 00:10:22,110 für die Formulareingabe haben, ja, das 132 00:10:22,180 --> 00:10:23,280 sieht gut aus. 133 00:10:23,280 --> 00:10:24,510 Das Formular-Eingabe-Update ist 134 00:10:24,510 --> 00:10:26,120 das, was ich dort unten versandt 135 00:10:26,130 --> 00:10:27,600 habe. Wir müssen es auch 136 00:10:27,600 --> 00:10:33,100 hier ändern. Natürlich können Sie auch alle anderen Daten, die Sie möglicherweise verwenden möchten, in Ihrem Reduzierer übergeben, und 137 00:10:33,210 --> 00:10:38,250 ich habe einige andere Daten, die ich möchte verwenden. Das wäre der Wert und ich werde diesen Wert hier 138 00:10:38,250 --> 00:10:39,270 nur benennen, diese Eigenschaft, 139 00:10:39,300 --> 00:10:40,730 Sie können ihn benennen, wie 140 00:10:40,740 --> 00:10:42,390 Sie möchten, das ist der eingegebene 141 00:10:42,420 --> 00:10:48,490 Text, also leite ich ihn einfach an den Reduzierer weiter, damit wir ihn in unserem Zustand speichern können dort und die Gültigkeit 142 00:10:48,490 --> 00:10:49,400 dieser Eingabe. 143 00:10:49,470 --> 00:11:02,110 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 144 00:11:02,110 --> 00:11:07,480 bedeuten würde, dass es wahr sein sollte, weil ich dann gesetzt habe, ist 145 00:11:07,480 --> 00:11:12,850 gültig gleich wahr, sonst bleibt es falsch und damit können wir auch 146 00:11:12,850 --> 00:11:19,050 hinzufügen, ist als Schlüssel für die Aktion gültig und leiten den in unserer gültigen Variablen 147 00:11:19,060 --> 00:11:20,230 gespeicherten Wert 148 00:11:20,350 --> 00:11:26,320 weiter. Dies ist zunächst falsch, aber wenn unsere Eingabelänge für den Titel gilt größer als 149 00:11:26,320 --> 00:11:35,230 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. 150 00:11:35,330 --> 00:11:43,730 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 151 00:11:43,730 --> 00:11:49,670 sollte ein Schlüssel sein, den Sie auch in Ihrem Status haben, wie hier in Eingabewerten und Eingabevaliditäten, 152 00:11:49,790 --> 00:11:54,800 da dies dies ermöglicht Sie müssen einen Reduzierungscode schreiben, den wir in Kürze erstellen 153 00:11:54,890 --> 00:12:01,920 werden. Dieser ist sehr wiederverwendbar und sehr flexibel, da wir jetzt den nächsten Schritt unternehmen und sicherstellen können, dass wir 154 00:12:01,920 --> 00:12:09,210 ihn in eine Funktion umwandeln, die tatsächlich für alle Eingaben funktioniert und in Bezug auf diese sehr flexibel ist wie wir 155 00:12:09,210 --> 00:12:10,080 es benutzen.