Continuons donc à travailler là-dessus et changeons cela en une fonction de gestionnaire de changement de texte
que nous avons
maintenant assignée au texte onChange ici sur le titre, mais que nous pouvons également ajouter à notre imageUrl.
Donc, ici pour le texte onChange, je l'ai également défini sur le gestionnaire de changement de texte et maintenant pour que
cela fonctionne, nous devons nous assurer que cette fonction obtient des informations sur l'entrée pour laquelle elle a
été déclenchée, que vous veniez de taper le titre ou le Entrée imageUrl.
Donc, en plus d'obtenir le texte, je m'attends également à obtenir un argument différent,
je m'attends à obtenir mon identifiant d'entrée ou quelque chose comme ça, vous pouvez le nommer comme vous voulez afin que
cette fonction puisse être réutilisée pour plusieurs entrées de texte et nous obtenons toujours des informations sur quelle entrée
a déclenché cela
afin que nous puissions le transmettre à notre réducteur où nous aurons plus tard besoin de ces informations pour mettre
à jour notre état correctement.
Maintenant, pour obtenir cette fonctionnalité d'identifiant d'entrée, nous devons aller aux endroits où nous utilisons le gestionnaire de changement
de texte et là, nous pouvons par exemple utiliser bind ou utiliser une fonction de flèche anonyme enveloppante à la place pour lier cela
là où je ne me soucie pas mais plus surtout, pour configurer les arguments que cette fonction
obtiendra et là, c'est un argument spécial que je veux passer et c'est l'identifiant d'entrée.
Et pour cette fonction ici, pour cet appel de fonction sur
cette entrée de texte, ce serait bien sûr le titre. Pour cette entrée là-bas, nous aurions lié cette imageUrl et encore
une fois cela devrait être un identifiant que vous avez également dans votre état là-haut, dans
votre état de formulaire que vous transmettez au réducteur. Avec cela ajouté, nous nous assurerons que le gestionnaire de changement de texte est
exécuté et obtient cet argument d'identificateur d'entrée.
L'argument texte sera également reçu car c'est l'argument par défaut que React Native
nous transmettrait de toute façon et il sera alors automatiquement reçu comme dernier argument de cette fonction.
Nous n'avons donc pas à le faire et nous ne pouvons
pas le lier ici, il sera transmis automatiquement.
Maintenant, nous avons ici une fonction de gestionnaire de changement de texte réutilisable
et nous pouvons également l'assigner aux autres entrées, comme ici à l'imageUrl, comme ici pour le prix, nous pouvons
lier le gestionnaire de changement de texte, le lier et le prix est notre identifiant ici
et bien sûr aussi pour la description, là, nous le collons puis nous le lions et l'identifiant est la description.
Maintenant, ce même gestionnaire peut être utilisé pour toutes les entrées mais pour le moment, bien sûr,
il fait une chose, il valide chaque entrée pour sa longueur.
Maintenant, cela pourrait avoir un sens et
c'est le cas ici, aucune entrée ne doit être vide, mais vous pouvez également
vouloir une autre validation, par exemple mon prix ici devrait être un nombre supérieur à zéro, disons,
afin que zéro ne soit pas autorisé en tant qu'entrée. D'un autre côté, ce n'est pas un critère qui
compte pour moi sur d'autres entrées. Nous trouverons une solution élégante pour cela plus tard, pour
l'instant, restons avec cette plus petite validation de dénominateur commun que nous pouvons appliquer à toutes les entrées pour nous assurer qu'elles ne
sont pas au moins vides et concentrons-nous sur
la fonction de réduction et comment notre état de formulaire devrait changer lorsque cette action
de mise à jour de saisie de formulaire avec toutes ces données est envoyée car
pour l'instant rien ne se passera.
Nous avons notre état initial sur le réducteur et cela sera passé ou stocké dans l'état de
forme mais cet état ne changera jamais.
Eh bien, c'est pourquoi nous envoyons une action, non?
C'est pourquoi nous faisons cela
ici, c'est pourquoi la mise à jour d'entrée de formulaire est distribuée et c'est pourquoi nous voulons écrire du code
ici dans le réducteur lorsque cette action nous parvient ici.
Maintenant, là-bas, si cette action nous parvient, l'objectif final est de s'assurer que nous mettons à jour cet instantané
d'état,
notre instantané d'état actuel de manière appropriée.
Cela signifie que par exemple, nous aurons besoin de quelques valeurs mises à jour et pour cela, je crée un
nouvel objet parce que
mes valeurs d'entrée ici, c'est un objet et je vais en créer un nouveau pour le remplacer et je
vais d'abord copier l'existant indiquer les valeurs d'entrée.
Gardez à l'esprit que l'état ici est transmis automatiquement, c'est notre instantané d'état actuel avant de le mettre
à jour et donc initialement, c'est cet instantané d'état ici par exemple et cela aura une clé de valeurs
d'entrée qui à son tour contient un
objet et c'est juste
ce que Je copie ici, je copie toutes les paires clé-valeur de cet instantané de valeurs d'entrée, puis je veux remplacer
la paire de valeurs clé pour l'entrée pour laquelle cette action a été envoyée,
la bonne chose est que nous attachons l'entrée identifiant de l'action. Nous pouvons donc aller au réducteur
et remplacer dynamiquement une clé ici dans les valeurs d'entrée copiées,
la clé est l'action. bien sûr, c'est notre identifiant d'entrée que nous avons attaché à l'action et
la valeur devrait être action. valeur, c'est
tout ce que nous devons faire. Nous stockons donc dynamiquement la valeur qui a
été distribuée avec l'entrée également attribuée dynamiquement et mettons à jour nos valeurs d'entrée copiées.
Maintenant, nous pouvons renvoyer un nouvel état ici parce que c'est le but de votre propre réducteur, comme pour
le réducteur Redux, à la fin il doit retourner un nouvel instantané d'état et
là je veux copier l'état existant mais remplacer les valeurs d'entrée avec le des valeurs mises à jour qui copient mes anciennes valeurs afin qu'aucune
donnée ne soit perdue, puis remplace l'une des paires clé-valeur qui s'y trouve. Maintenant, évidemment, ce n'est pas tout pour remplacer les
valeurs ou mettre à jour les valeurs, je veux
aussi mettre à jour mes validités.
Voici donc mes validités mises à jour et tout comme avec les valeurs, je commence par copier ma
clé de validités d'entrée car les validités d'entrée sont une clé ici comme vous
pouvez
le voir et ensuite je veux remplacer une validité pour l'entrée que nous obtenons sur l'action , donc title, imageUrl ou quoi que ce
soit et le remplacer par action est valide parce que nous obtenons les informations, qu'elles soient
valides ou non dans le cadre de l'action envoyée, non?
Nous transmettons ceci ici sur la base de cette validation de base que nous avons ici.
Maintenant, avec cela, nous avons juste besoin de mettre à jour ceci ici, donc
nos validités d'entrée ici sont égales aux validités mises à jour et maintenant nous devons juste gérer la
validité globale du formulaire. Pour cela, j'ajoute une
variable, une variable d'aide, le formulaire est valide, ce qui est initialement vrai, puis je passe en revue
toutes mes validités mises à
jour, qui sont mes anciennes
validités copiées, puis celle validée pour l'entrée que nous venons de taper.
Donc, ici, nous avons une boucle for / in où nous passons par toutes les clés dans les validités mises à jour et le but
est simple, je vérifie chaque validité d'entrée de formulaire et si toutes les validités d'entrée de formulaire sont valides, si elles
sont toutes vraies, alors l'ensemble le formulaire est valide.
Si au moins l'un d'entre eux est
faux, le formulaire global est faux, le formulaire global n'est pas valide. Donc, par conséquent, ici le formulaire est valide est égal au dernier formulaire est
l'état valide que nous avons, puis la validité des validités mise à jour pour l'entrée que nous examinons actuellement, donc pour cette clé et
nous parcourons toutes les entrées ici.
La façon dont cet opérateur booléen fonctionne est telle que false remplace true, donc si une entrée
est false, la forme est valide sera définie sur false et ne pourra pas être définie sur true par la suite.
Donc, si au moins une entrée n'est pas valide, le formulaire global sera invalide et
donc maintenant je n'ai plus besoin de copier mon état ici car je remplacerai l'intégralité
de l'instantané d'état et le formulaire défini est valide
pour mon formulaire dérivé est valide ici et bien sûr, pour éviter toute confusion, nous pourrions également nommer ce formulaire mis à jour valide ici et ici et ici
et ici.
Maintenant, juste une chose supplémentaire, si nous ne le faisons pas dans
ce bloc if, donc si une autre action a été envoyée ou quoi que ce soit d'autre, alors je vais simplement retourner
l'état inchangé ici. Avec cela, nous
avons ajouté une logique de réduction qui est capable de gérer n'importe quelle entrée ou n'importe quelle saisie dans l'une de nos entrées de texte, maintenant nous
avons juste besoin d'utiliser l'état du formulaire qui changera à chaque frappe, ce qui est exactement ce
qui s'est passé avant, mais maintenant tout est centralisé et fusionné dans un état géré qui, je pense, est beaucoup plus propre
que d'avoir des tonnes d'états différents pour les validités et les valeurs. Et en passant, la gestion de tous ces
états manuellement et séparément serait devenue un gros problème lorsque vous souhaitez ensuite valider la validité globale du formulaire.
Alors maintenant, nous pouvons utiliser l'état du formulaire qui changera à chaque frappe et nous l'utilisons
par exemple ici sur les valeurs. Nous transmettons la valeur de cette entrée de texte en accédant aux valeurs d'entrée d'état du formulaire. Titre.
Maintenant, évidemment, nous faisons la même chose ici pour l'imageUrl, nous réintroduisons cela, donc juste ce que nous faisions avant
et maintenant avec notre état de forme géré avec l'aide du
réducteur, même pour le prix bien sûr et aussi la même chose pour le description, comme ça.
Maintenant, en plus de le changer ici, nous devons également le changer à d'autres endroits, par exemple ici
dans le gestionnaire de soumission bien sûr. Là, le titre est valide, cela
n'existe plus mais nous pouvons vérifier le titre des validités d'entrée de l'état du formulaire, c'est vrai ou faux et si c'est faux, cela signifie qu'il n'est
pas valide, donc
cette vérification devrait être correcte.
Bien sûr, cependant, nous nous soucions de la validité de toutes les entrées, donc au lieu de simplement
les vérifier manuellement ici en les concaténant en une longue instruction if, nous pouvons simplement vérifier si
l'état du formulaire est valide est faux, car cela signifie qu'une entrée est fausse et par conséquent, nous
montrons cette
erreur, c'est le chèque le plus court et c'est bien sûr aussi lorsque nous voulons éviter que le formulaire ne soit soumis.
Cependant, si le formulaire est soumis, description du titre et imageUrl, qui n'existe
plus, c'est maintenant le formulaire d'état inputValues. title et ainsi de suite, nous
faisons donc la
même chose ici pour la description et pour l'imageUrl. Nous tirons nos valeurs de l'état de
forme, même ici bien sûr pour la création. Nous obtenons le titre et la description et l'imageUrl et aussi bien sûr le
prix que je convertis toujours en nombre avec le plus ici, nous obtenons tout
cela de notre état de forme des valeurs d'entrée. Par conséquent, bien sûr, notre dépendance n'est pas ici le titre, la
description, l'imageUrl et ainsi de suite, mais simplement l'état de forme. Si le formulaire change d'état, ce qu'il fera à
chaque frappe, alors cette fonction doit être reconstruite et elle doit être reconstruite car
les informations utilisées par
la fonction changent à chaque frappe,
la validité peut changer à chaque frappe, les valeurs que vous voulez soumettre peut changer à chaque pression de touche.
Nous pouvons également bien sûr maintenant l'utiliser pour afficher notre message d'erreur. Au lieu de vérifier que le
titre est
valide et n'existe plus, nous vérifions formState. inputValidities. titre, si c'est faux, alors je veux montrer ce texte.
Donc maintenant avec
ça, si on enregistre tout ça, on devrait pouvoir vérifier ça. Si nous allons sur notre page ici,
nous voyons cette erreur initialement.
Si je commence à taper, il disparaît,
si j'essaie de le soumettre, il échoue car j'ai trois entrées vides.
Par contre, si j'entre quelque chose de
valable, cela fonctionne. Si j'essaye d'éditer, essayons
ceci sur Android peut-être pour mélanger les choses.
Donc, si j'essaie de modifier la chemise rouge ici, je peux très bien
le soumettre, maintenant essayons
aussi de le soumettre s'il est vide, alors je reçois l'alerte.
Donc, cela fonctionne de la façon dont cela
devrait fonctionner, maintenant avec cette gestion de formulaire plus élégante en utilisant use reducer et bien sûr, vous ne pouvez pas simplement utiliser
use reducer lorsque
vous travaillez avec des formulaires, c'est juste un exemple particulièrement bon pour quand il est logique de fusionner
plusieurs états ensemble et ont donc un code hautement réutilisable et efficace.
Maintenant, je n'ai toujours pas fini, car toutes ces répétitions de code avec les entrées ici qui
sont toujours structurées de la même manière et les possibilités de personnalisation manquantes concernant la validation, ce sont les choses
que je veux aborder ensuite.