1
00:00:02,300 --> 00:00:08,300
Lassen Sie uns also weiter daran arbeiten und dies in eine Funktion zum Ändern des Textänderungshandlers

2
00:00:09,020 --> 00:00:10,390
ändern, die wir

3
00:00:10,400 --> 00:00:16,420
jetzt onChange-Text hier im Titel zugewiesen haben, die wir aber auch zu unserer imageUrl hinzufügen können.

4
00:00:16,430 --> 00:00:22,640
Hier für onChange-Text habe ich dies auch auf Textänderungs-Handler gesetzt. Damit dies funktioniert, müssen wir sicherstellen,

5
00:00:22,640 --> 00:00:28,030
dass diese Funktion Informationen darüber erhält, für welche Eingabe sie ausgelöst wurde, unabhängig davon,

6
00:00:28,070 --> 00:00:32,390
ob Sie gerade den Titel oder den eingegeben haben imageUrl-Eingabe.

7
00:00:32,570 --> 00:00:36,580
Abgesehen davon, dass ich den Text erhalte, erwarte ich auch ein anderes

8
00:00:36,710 --> 00:00:42,290
Argument. Ich erwarte, dass ich meine Eingabekennung oder ähnliches erhalte. Sie können ihn beliebig benennen, damit diese

9
00:00:42,290 --> 00:00:47,420
Funktion für mehrere Texteingaben wiederverwendet werden kann und wir weiterhin Informationen erhalten Über welche Eingabe dies

10
00:00:47,420 --> 00:00:48,560
ausgelöst wurde,

11
00:00:48,680 --> 00:00:54,080
damit wir dies an unseren Reduzierer weiterleiten können, wo wir diese Informationen später benötigen, um unseren

12
00:00:54,080 --> 00:00:55,370
Status korrekt zu aktualisieren.

13
00:00:55,610 --> 00:01:01,520
Um diese Eingabe-ID-Funktionalität zu erhalten, müssen wir zu den Stellen gehen, an denen wir den Textänderungs-Handler verwenden,

14
00:01:01,520 --> 00:01:09,140
und dort können wir beispielsweise Binden oder eine umschließende anonyme Pfeilfunktion verwenden, um diese zu binden, wo es mir egal ist, aber

15
00:01:09,140 --> 00:01:14,570
mehr Um die Argumente zu konfigurieren, die diese Funktion erhält, ist es wichtig, dass es

16
00:01:14,570 --> 00:01:19,700
ein spezielles Argument gibt, das ich übergeben möchte, und das ist die Eingabe-ID.

17
00:01:19,990 --> 00:01:24,650
Und für diese Funktion hier, für diesen Funktionsaufruf

18
00:01:24,650 --> 00:01:33,870
bei dieser Texteingabe, wäre dies natürlich Titel. Für diese Eingabe dort unten hätten wir diese imageUrl gebunden, und

19
00:01:34,060 --> 00:01:40,450
dies sollte wiederum eine Kennung sein, die Sie auch in Ihrem Status dort oben haben,

20
00:01:40,570 --> 00:01:49,110
in Ihrem Formularstatus, den Sie an den Reduzierer übergeben. Nachdem dies hinzugefügt wurde, stellen wir sicher, dass der Textänderungshandler

21
00:01:49,110 --> 00:01:51,710
ausgeführt wird und dieses Eingabebezeichnerargument erhält.

22
00:01:51,990 --> 00:01:56,430
Das Textargument wird auch empfangen, da dies das Standardargument ist, das React Native

23
00:01:56,430 --> 00:02:01,740
uns sowieso übergeben würde, und dieses wird dann automatisch als letztes Argument in dieser Funktion empfangen.

24
00:02:01,800 --> 00:02:05,000
Wir müssen das also nicht und können es hier eigentlich

25
00:02:05,010 --> 00:02:07,410
nicht binden, es wird automatisch weitergeleitet.

26
00:02:07,680 --> 00:02:13,260
Jetzt haben wir hier eine wiederverwendbare Textänderungs-Handler-Funktion und können diese auch

27
00:02:13,440 --> 00:02:21,030
den anderen Eingaben zuweisen, wie hier der imageUrl, wie hier unten für den Preis, wir können den

28
00:02:21,060 --> 00:02:27,390
Textänderungs-Handler binden, diese binden und dann ist der Preis unsere Kennung hier und natürlich

29
00:02:27,720 --> 00:02:35,540
auch für die beschreibung, dort fügen wir dies ein und binden dann daran und der bezeichner ist beschreibung.

30
00:02:35,780 --> 00:02:40,910
Jetzt kann derselbe Handler für alle Eingaben verwendet werden, aber im Moment macht er natürlich

31
00:02:40,910 --> 00:02:44,240
eine Sache, er validiert jede Eingabe auf ihre Länge.

32
00:02:44,240 --> 00:02:46,990
Nun, das mag Sinn machen und

33
00:02:47,030 --> 00:02:52,070
hier auch, sollte keine Eingabe leer sein, aber Sie möchten vielleicht auch

34
00:02:52,070 --> 00:02:58,130
eine andere Validierung, zum Beispiel sollte mein Preis hier eine Zahl größer als Null sein,

35
00:02:58,160 --> 00:03:05,360
sagen wir, damit Null als Eingabe nicht zulässig ist. Dies ist jedoch kein Kriterium, das mir

36
00:03:05,360 --> 00:03:10,670
bei anderen Eingaben wichtig ist. Wir werden später eine elegante Lösung dafür finden. Lassen

37
00:03:10,670 --> 00:03:16,700
Sie uns zunächst bei dieser Validierung des kleinsten gemeinsamen Nenners bleiben, die wir auf alle Eingaben anwenden können, um sicherzustellen,

38
00:03:16,700 --> 00:03:18,690
dass sie zumindest nicht leer sind,

39
00:03:19,120 --> 00:03:23,040
und konzentrieren wir uns auf die Reduzierungsfunktion und den Formstatus sollte sich ändern,

40
00:03:23,060 --> 00:03:26,990
wenn diese Aktion zur Aktualisierung der Formulareingabe mit all diesen Daten gesendet wird,

41
00:03:26,990 --> 00:03:28,720
da im Moment nichts passiert.

42
00:03:28,760 --> 00:03:33,920
Wir haben dort unseren Anfangszustand auf dem Reduzierer und dieser wird im Formzustand übergeben oder gespeichert, aber

43
00:03:33,920 --> 00:03:36,050
dieser Zustand wird sich nie ändern.

44
00:03:36,080 --> 00:03:38,770
Deshalb senden wir eine Aktion aus, oder?

45
00:03:38,820 --> 00:03:40,550
Aus diesem Grund tun wir

46
00:03:40,560 --> 00:03:46,190
dies hier. Aus diesem Grund wird die Aktualisierung der Formulareingabe ausgelöst. Aus diesem Grund möchten wir hier im

47
00:03:46,200 --> 00:03:49,190
Reduzierer Code schreiben, wenn diese Aktion uns hier erreicht.

48
00:03:49,500 --> 00:03:55,650
Wenn uns diese Aktion erreicht, besteht das Ziel letztendlich darin, sicherzustellen, dass wir diesen

49
00:03:55,650 --> 00:03:56,220
Status-Snapshot,

50
00:03:56,220 --> 00:03:58,340
unseren aktuellen Status-Snapshot, entsprechend aktualisieren.

51
00:03:58,650 --> 00:04:04,470
Dies bedeutet, dass wir zum Beispiel einige aktualisierte Werte benötigen und dafür ein neues Objekt

52
00:04:04,470 --> 00:04:05,910
erstellen, da meine

53
00:04:06,030 --> 00:04:11,850
Eingabewerte hier ein Objekt sind und ich ein neues erstellen werde, um es zu ersetzen,

54
00:04:11,850 --> 00:04:14,340
und zunächst das vorhandene kopieren werde Zustandseingabewerte.

55
00:04:14,400 --> 00:04:19,650
Denken Sie daran, dass der Status hier automatisch übergeben wird. Dies ist unser aktueller

56
00:04:19,650 --> 00:04:25,500
Status-Snapshot, bevor wir ihn aktualisieren. Daher ist dies zunächst beispielsweise dieser Status-Snapshot, und dieser enthält einen

57
00:04:25,500 --> 00:04:27,610
Schlüssel für Eingabewerte, der wiederum

58
00:04:27,720 --> 00:04:29,420
ein Objekt enthält, und

59
00:04:29,460 --> 00:04:35,910
genau das ist es Ich kopiere hier, ich kopiere alle Schlüssel-Wert-Paare dieses Eingabewert-Snapshots und möchte dann das Schlüssel-Wert-Paar

60
00:04:35,910 --> 00:04:40,230
für die Eingabe ersetzen, für die diese Aktion ausgelöst wurde. Das Gute

61
00:04:40,230 --> 00:04:46,740
ist, dass wir die Eingabe anhängen Kennung der Aktion. Wir können also zum Reduzierer gehen

62
00:04:46,740 --> 00:04:52,360
und hier in den kopierten Eingabewerten einen Schlüssel dynamisch überschreiben.

63
00:04:52,380 --> 00:04:57,900
Der Schlüssel ist Aktion. Eingabe natürlich, das ist unsere Eingabe-ID, die wir an die Aktion angehängt haben, und

64
00:04:57,900 --> 00:05:00,420
der Wert sollte Aktion sein. Wert, das

65
00:05:00,420 --> 00:05:06,840
ist alles was wir tun müssen. Daher speichern wir den Wert, der mit

66
00:05:06,840 --> 00:05:12,060
der ebenfalls dynamisch zugewiesenen Eingabe gesendet wurde, dynamisch und aktualisieren unsere kopierten Eingabewerte.

67
00:05:12,060 --> 00:05:17,360
Jetzt können wir hier einen neuen Status zurückgeben, da dies das Ziel Ihres eigenen Reduzierers ist,

68
00:05:17,360 --> 00:05:21,360
wie beim Redux-Reduzierer. Am Ende muss ein neuer Status-Snapshot zurückgegeben werden.

69
00:05:21,840 --> 00:05:28,800
Dort möchte ich den vorhandenen Status kopieren, aber die Eingabewerte mit dem überschreiben aktualisierte Werte, die meine alten Werte kopieren, sodass

70
00:05:28,800 --> 00:05:36,230
keine Daten verloren gehen, und dann eines der Schlüssel-Wert-Paare ersetzen. Jetzt geht es natürlich nicht nur darum, die

71
00:05:36,260 --> 00:05:39,820
Werte zu ersetzen oder zu aktualisieren, sondern

72
00:05:39,890 --> 00:05:42,810
auch meine Gültigkeiten zu aktualisieren.

73
00:05:42,920 --> 00:05:48,700
Hier sind meine aktualisierten Gültigkeiten, und genau wie bei den Werten kopiere ich zunächst meinen Eingabevaliditätsschlüssel,

74
00:05:48,710 --> 00:05:53,240
da die Eingabevaliditäten hier ein Schlüssel sind, wie Sie sehen können, und

75
00:05:53,340 --> 00:05:54,050
dann

76
00:05:57,300 --> 00:06:05,190
möchte ich eine Gültigkeit für die Eingabe ersetzen, die wir für die Aktion erhalten Titel, imageUrl oder was auch immer es ist und

77
00:06:05,220 --> 00:06:10,320
dies durch Aktion ersetzen, ist gültig, weil wir die Information erhalten, ob dies gültig ist

78
00:06:10,320 --> 00:06:13,790
oder nicht, als Teil der Aktion, die ausgelöst wird, richtig?

79
00:06:13,800 --> 00:06:17,400
Wir leiten dies hier basierend auf dieser grundlegenden Validierung weiter, die wir hier haben.

80
00:06:19,810 --> 00:06:24,160
Damit müssen wir dies nur noch hier aktualisieren, sodass unsere

81
00:06:24,340 --> 00:06:30,220
Eingabevaliditäten hier den aktualisierten Gültigkeiten entsprechen und wir jetzt nur noch die Gesamtgültigkeit des

82
00:06:30,220 --> 00:06:33,430
Formulars verwalten müssen. Dazu füge ich eine

83
00:06:34,640 --> 00:06:41,270
Variable hinzu, eine Hilfsvariable. Das Formular ist gültig, was zunächst wahr ist, und dann durchlaufe ich alle meine

84
00:06:41,270 --> 00:06:43,160
aktualisierten Gültigkeiten, die meine alten

85
00:06:43,160 --> 00:06:45,050
kopierten Gültigkeiten sind, und dann

86
00:06:45,080 --> 00:06:49,520
die eine aktualisierte Gültigkeit für die Eingabe, die wir gerade eingegeben haben.

87
00:06:49,580 --> 00:06:57,020
Hier haben wir also eine for / in-Schleife, in der wir alle Schlüssel in aktualisierten Gültigkeiten durchgehen und das Ziel einfach ist.

88
00:06:57,020 --> 00:07:03,170
Ich überprüfe jede Gültigkeit der Formulareingabe und wenn alle Gültigkeiten der Formulareingabe gültig sind, wenn sie alle

89
00:07:03,170 --> 00:07:06,170
wahr sind, dann die Gesamtgültigkeit Formular ist gültig.

90
00:07:06,230 --> 00:07:08,980
Wenn mindestens einer von ihnen falsch

91
00:07:09,000 --> 00:07:17,090
ist, ist das Gesamtformular falsch, das Gesamtformular ist ungültig. Daher ist hier das gültige Formular gleich dem neuesten gültigen Status

92
00:07:17,120 --> 00:07:24,320
des Formulars und dann die aktualisierte Gültigkeit der Gültigkeit für die Eingabe, die wir gerade betrachten. Für diesen Schlüssel gehen wir

93
00:07:24,330 --> 00:07:26,320
also alle Eingaben hier durch.

94
00:07:26,480 --> 00:07:31,530
Dieser boolesche Operator funktioniert so, dass false true überschreibt. Wenn also eine Eingabe

95
00:07:31,640 --> 00:07:37,730
false ist, wird form valid auf false gesetzt und kann danach nicht auf true gesetzt werden.

96
00:07:37,730 --> 00:07:43,010
Wenn also mindestens eine Eingabe ungültig ist, ist das Gesamtformular ungültig. Daher muss

97
00:07:43,010 --> 00:07:48,200
ich jetzt meinen Status hier nicht mehr kopieren, da ich den gesamten

98
00:07:48,200 --> 00:07:51,460
Status-Snapshot ersetzen werde und das festgelegte Formular für

99
00:07:52,940 --> 00:08:02,910
mein abgeleitetes Formular gültig ist Um Verwirrung zu vermeiden, können wir auch nennen, dass dieses aktualisierte Formular hier und hier und hier und hier gültig

100
00:08:03,540 --> 00:08:04,270
ist.

101
00:08:06,030 --> 00:08:09,900
Nun nur eine zusätzliche Sache: Wenn wir es nicht in diesen

102
00:08:09,930 --> 00:08:16,560
if-Block schaffen, also wenn eine andere Aktion ausgelöst wurde oder irgendetwas anderes, dann werde ich hier einfach den unveränderten

103
00:08:16,560 --> 00:08:18,870
Zustand zurückgeben. Damit haben

104
00:08:18,870 --> 00:08:26,590
wir eine Reduzierungslogik hinzugefügt, die jede Eingabe oder Eingabe in eine unserer Texteingaben verarbeiten kann. Jetzt müssen wir nur noch den

105
00:08:26,610 --> 00:08:31,560
Formularstatus verwenden, der sich mit jedem Tastendruck ändert. Dies ist genau das, was

106
00:08:31,560 --> 00:08:38,010
zuvor passiert ist, aber jetzt alles zentralisiert und in einen verwalteten Zustand verschmolzen, der meiner Meinung nach viel

107
00:08:38,190 --> 00:08:45,600
sauberer ist als Tonnen verschiedener Zustände für Gültigkeiten und Werte. Übrigens wäre die manuelle und separate Verwaltung all

108
00:08:45,600 --> 00:08:53,330
dieser Zustände zu einem großen Problem geworden, wenn Sie dann die Gültigkeit des gesamten Formulars überprüfen möchten.

109
00:08:53,340 --> 00:08:59,250
Jetzt können wir den Formularstatus verwenden, der sich mit jedem Tastendruck ändert, und wir verwenden

110
00:08:59,790 --> 00:09:07,610
ihn beispielsweise hier für die Werte. Wir geben den Wert für diese Texteingabe zurück, indem wir auf Eingabewerte für den Formularstatus zugreifen. Titel.

111
00:09:07,620 --> 00:09:15,160
Jetzt machen wir hier natürlich dasselbe für die imageUrl, wir geben dies zurück, also genau das, was wir vorher

112
00:09:15,160 --> 00:09:19,710
und jetzt mit unserem Formularstatus mit Hilfe des Reduzierers verwaltet

113
00:09:19,720 --> 00:09:26,040
haben, natürlich das gleiche für den Preis und auch das gleiche für das Beschreibung, so.

114
00:09:29,530 --> 00:09:35,010
Jetzt müssen wir es nicht nur hier ändern, sondern auch an einigen anderen Stellen,

115
00:09:35,140 --> 00:09:39,730
zum Beispiel hier im Submit-Handler. Dort ist der Titel gültig, dieser

116
00:09:39,730 --> 00:09:50,540
existiert nicht mehr, aber wir können den Titel des Formularstatus überprüfen, der wahr oder falsch ist. Wenn er falsch ist, bedeutet dies, dass er nicht gültig

117
00:09:50,540 --> 00:09:52,250
ist. Daher sollte

118
00:09:52,250 --> 00:09:54,400
diese Prüfung in Ordnung sein.

119
00:09:54,530 --> 00:09:59,960
Natürlich kümmern wir uns jedoch um die Gültigkeit aller Eingaben. Anstatt sie hier nur manuell zu

120
00:09:59,960 --> 00:10:05,270
überprüfen, indem wir sie zu einer langen if-Anweisung verketten, können wir einfach prüfen, ob das

121
00:10:05,270 --> 00:10:10,880
Formularstatusformular falsch ist, da dies bedeutet, dass einige Eingaben falsch sind und Daher zeigen wir diesen Fehler,

122
00:10:10,880 --> 00:10:11,750
das ist

123
00:10:11,750 --> 00:10:18,300
die kürzere Prüfung, und dies ist natürlich auch dann der Fall, wenn wir vermeiden möchten, dass das Formular gesendet wird.

124
00:10:18,300 --> 00:10:23,450
Wenn das Formular jedoch gesendet wird, Titelbeschreibung und imageUrl, sind diese nicht mehr vorhanden. Stattdessen

125
00:10:23,550 --> 00:10:29,380
handelt es sich jetzt um den Formularstatus inputValues. Titel und so weiter, also machen

126
00:10:29,400 --> 00:10:30,950
wir das

127
00:10:32,290 --> 00:10:40,790
gleiche hier für die Beschreibung und für die imageUrl. Wir leiten unsere Werte aus dem

128
00:10:40,790 --> 00:10:50,250
Formzustand ab, natürlich auch hier zum Erstellen. Wir bekommen den Titel und die Beschreibung und die imageUrl und natürlich auch

129
00:10:50,250 --> 00:10:55,200
den Preis, den ich hier noch in eine Zahl mit dem Plus umrechne, all

130
00:10:55,200 --> 00:11:02,130
das bekommen wir aus unserem Formzustand der Eingabewerte. Daher ist unsere Abhängigkeit hier natürlich nicht Titel,

131
00:11:02,130 --> 00:11:08,490
Beschreibung, imageUrl usw., sondern nur Formstatus. Wenn sich der Formularstatus ändert, was bei jedem Tastendruck der

132
00:11:08,490 --> 00:11:13,170
Fall ist, sollte diese Funktion neu erstellt werden und neu erstellt werden, da sich

133
00:11:13,200 --> 00:11:14,790
die von der Funktion

134
00:11:14,790 --> 00:11:16,980
verwendeten Informationen mit jedem Tastendruck ändern.

135
00:11:17,070 --> 00:11:23,750
Die Gültigkeit kann sich mit jedem Tastendruck und den gewünschten Werten ändern Das Senden kann sich mit jedem Tastendruck ändern.

136
00:11:23,880 --> 00:11:29,820
Natürlich können wir dies jetzt auch verwenden, um unsere Fehlermeldung anzuzeigen. Anstatt zu überprüfen, ob der Titel

137
00:11:29,820 --> 00:11:31,330
gültig ist,

138
00:11:31,380 --> 00:11:41,850
der nicht mehr existiert, überprüfen wir formState. inputValidities. Titel, wenn das falsch ist, dann möchte ich diesen Text zeigen.

139
00:11:41,960 --> 00:11:42,680
Wenn wir

140
00:11:42,680 --> 00:11:47,440
nun alles speichern, sollten wir dies überprüfen können. Wenn wir hier auf unsere Seite gehen,

141
00:11:47,450 --> 00:11:49,320
sehen wir diesen Fehler zunächst.

142
00:11:49,340 --> 00:11:51,650
Wenn ich anfange zu tippen, verschwindet es. Wenn

143
00:11:51,690 --> 00:11:55,640
ich versuche, dies zu senden, schlägt es fehl, weil ich drei leere Eingaben habe.

144
00:11:55,640 --> 00:11:58,800
Wenn ich dort andererseits etwas Gültiges

145
00:11:58,850 --> 00:12:02,100
eingebe, funktioniert dies. Wenn ich versuche zu bearbeiten,

146
00:12:02,270 --> 00:12:05,100
versuchen wir es auf Android, um die Dinge zu verwechseln.

147
00:12:05,420 --> 00:12:11,140
Wenn ich also versuche, das rote Hemd hier zu bearbeiten, kann ich es ganz gut

148
00:12:11,150 --> 00:12:13,290
einreichen. Jetzt versuchen wir

149
00:12:13,320 --> 00:12:18,080
auch, es einzureichen, wenn es leer ist. Dann erhalte ich die Warnung.

150
00:12:18,080 --> 00:12:20,620
Dies funktioniert also so, wie es

151
00:12:24,840 --> 00:12:31,700
funktionieren sollte. Mit dieser eleganteren Formularverwaltung mit Use Reducer können Sie natürlich nicht nur Use Reducer verwenden, wenn

152
00:12:31,700 --> 00:12:33,020
Sie mit Formularen

153
00:12:33,080 --> 00:12:38,660
arbeiten. Dies ist nur ein besonders gutes Beispiel dafür, wann das Zusammenführen sinnvoll ist mehrere

154
00:12:38,660 --> 00:12:42,250
Zustände zusammen und haben daher hoch wiederverwendbaren und effizienten Code.

155
00:12:42,270 --> 00:12:48,290
Jetzt bin ich aber immer noch nicht fertig, denn all diese Code-Wiederholungen mit den Eingaben hier,

156
00:12:48,320 --> 00:12:54,880
die immer gleich strukturiert sind, und die fehlenden Anpassungsmöglichkeiten bezüglich der Validierung sind die Dinge, die ich

157
00:12:55,040 --> 00:12:56,930
als nächstes angehen möchte.