1 00:00:02,300 --> 00:00:08,300 Continuons donc à travailler là-dessus et changeons cela en une fonction de gestionnaire de changement de texte 2 00:00:09,020 --> 00:00:10,390 que nous avons 3 00:00:10,400 --> 00:00:16,420 maintenant assignée au texte onChange ici sur le titre, mais que nous pouvons également ajouter à notre imageUrl. 4 00:00:16,430 --> 00:00:22,640 Donc, ici pour le texte onChange, je l'ai également défini sur le gestionnaire de changement de texte et maintenant pour que 5 00:00:22,640 --> 00:00:28,030 cela fonctionne, nous devons nous assurer que cette fonction obtient des informations sur l'entrée pour laquelle elle a 6 00:00:28,070 --> 00:00:32,390 été déclenchée, que vous veniez de taper le titre ou le Entrée imageUrl. 7 00:00:32,570 --> 00:00:36,580 Donc, en plus d'obtenir le texte, je m'attends également à obtenir un argument différent, 8 00:00:36,710 --> 00:00:42,290 je m'attends à obtenir mon identifiant d'entrée ou quelque chose comme ça, vous pouvez le nommer comme vous voulez afin que 9 00:00:42,290 --> 00:00:47,420 cette fonction puisse être réutilisée pour plusieurs entrées de texte et nous obtenons toujours des informations sur quelle entrée 10 00:00:47,420 --> 00:00:48,560 a déclenché cela 11 00:00:48,680 --> 00:00:54,080 afin que nous puissions le transmettre à notre réducteur où nous aurons plus tard besoin de ces informations pour mettre 12 00:00:54,080 --> 00:00:55,370 à jour notre état correctement. 13 00:00:55,610 --> 00:01:01,520 Maintenant, pour obtenir cette fonctionnalité d'identifiant d'entrée, nous devons aller aux endroits où nous utilisons le gestionnaire de changement 14 00:01:01,520 --> 00:01:09,140 de texte et là, nous pouvons par exemple utiliser bind ou utiliser une fonction de flèche anonyme enveloppante à la place pour lier cela 15 00:01:09,140 --> 00:01:14,570 là où je ne me soucie pas mais plus surtout, pour configurer les arguments que cette fonction 16 00:01:14,570 --> 00:01:19,700 obtiendra et là, c'est un argument spécial que je veux passer et c'est l'identifiant d'entrée. 17 00:01:19,990 --> 00:01:24,650 Et pour cette fonction ici, pour cet appel de fonction sur 18 00:01:24,650 --> 00:01:33,870 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 19 00:01:34,060 --> 00:01:40,450 une fois cela devrait être un identifiant que vous avez également dans votre état là-haut, dans 20 00:01:40,570 --> 00:01:49,110 votre état de formulaire que vous transmettez au réducteur. Avec cela ajouté, nous nous assurerons que le gestionnaire de changement de texte est 21 00:01:49,110 --> 00:01:51,710 exécuté et obtient cet argument d'identificateur d'entrée. 22 00:01:51,990 --> 00:01:56,430 L'argument texte sera également reçu car c'est l'argument par défaut que React Native 23 00:01:56,430 --> 00:02:01,740 nous transmettrait de toute façon et il sera alors automatiquement reçu comme dernier argument de cette fonction. 24 00:02:01,800 --> 00:02:05,000 Nous n'avons donc pas à le faire et nous ne pouvons 25 00:02:05,010 --> 00:02:07,410 pas le lier ici, il sera transmis automatiquement. 26 00:02:07,680 --> 00:02:13,260 Maintenant, nous avons ici une fonction de gestionnaire de changement de texte réutilisable 27 00:02:13,440 --> 00:02:21,030 et nous pouvons également l'assigner aux autres entrées, comme ici à l'imageUrl, comme ici pour le prix, nous pouvons 28 00:02:21,060 --> 00:02:27,390 lier le gestionnaire de changement de texte, le lier et le prix est notre identifiant ici 29 00:02:27,720 --> 00:02:35,540 et bien sûr aussi pour la description, là, nous le collons puis nous le lions et l'identifiant est la description. 30 00:02:35,780 --> 00:02:40,910 Maintenant, ce même gestionnaire peut être utilisé pour toutes les entrées mais pour le moment, bien sûr, 31 00:02:40,910 --> 00:02:44,240 il fait une chose, il valide chaque entrée pour sa longueur. 32 00:02:44,240 --> 00:02:46,990 Maintenant, cela pourrait avoir un sens et 33 00:02:47,030 --> 00:02:52,070 c'est le cas ici, aucune entrée ne doit être vide, mais vous pouvez également 34 00:02:52,070 --> 00:02:58,130 vouloir une autre validation, par exemple mon prix ici devrait être un nombre supérieur à zéro, disons, 35 00:02:58,160 --> 00:03:05,360 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 36 00:03:05,360 --> 00:03:10,670 compte pour moi sur d'autres entrées. Nous trouverons une solution élégante pour cela plus tard, pour 37 00:03:10,670 --> 00:03:16,700 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 38 00:03:16,700 --> 00:03:18,690 sont pas au moins vides et concentrons-nous sur 39 00:03:19,120 --> 00:03:23,040 la fonction de réduction et comment notre état de formulaire devrait changer lorsque cette action 40 00:03:23,060 --> 00:03:26,990 de mise à jour de saisie de formulaire avec toutes ces données est envoyée car 41 00:03:26,990 --> 00:03:28,720 pour l'instant rien ne se passera. 42 00:03:28,760 --> 00:03:33,920 Nous avons notre état initial sur le réducteur et cela sera passé ou stocké dans l'état de 43 00:03:33,920 --> 00:03:36,050 forme mais cet état ne changera jamais. 44 00:03:36,080 --> 00:03:38,770 Eh bien, c'est pourquoi nous envoyons une action, non? 45 00:03:38,820 --> 00:03:40,550 C'est pourquoi nous faisons cela 46 00:03:40,560 --> 00:03:46,190 ici, c'est pourquoi la mise à jour d'entrée de formulaire est distribuée et c'est pourquoi nous voulons écrire du code 47 00:03:46,200 --> 00:03:49,190 ici dans le réducteur lorsque cette action nous parvient ici. 48 00:03:49,500 --> 00:03:55,650 Maintenant, là-bas, si cette action nous parvient, l'objectif final est de s'assurer que nous mettons à jour cet instantané 49 00:03:55,650 --> 00:03:56,220 d'état, 50 00:03:56,220 --> 00:03:58,340 notre instantané d'état actuel de manière appropriée. 51 00:03:58,650 --> 00:04:04,470 Cela signifie que par exemple, nous aurons besoin de quelques valeurs mises à jour et pour cela, je crée un 52 00:04:04,470 --> 00:04:05,910 nouvel objet parce que 53 00:04:06,030 --> 00:04:11,850 mes valeurs d'entrée ici, c'est un objet et je vais en créer un nouveau pour le remplacer et je 54 00:04:11,850 --> 00:04:14,340 vais d'abord copier l'existant indiquer les valeurs d'entrée. 55 00:04:14,400 --> 00:04:19,650 Gardez à l'esprit que l'état ici est transmis automatiquement, c'est notre instantané d'état actuel avant de le mettre 56 00:04:19,650 --> 00:04:25,500 à jour et donc initialement, c'est cet instantané d'état ici par exemple et cela aura une clé de valeurs 57 00:04:25,500 --> 00:04:27,610 d'entrée qui à son tour contient un 58 00:04:27,720 --> 00:04:29,420 objet et c'est juste 59 00:04:29,460 --> 00:04:35,910 ce que Je copie ici, je copie toutes les paires clé-valeur de cet instantané de valeurs d'entrée, puis je veux remplacer 60 00:04:35,910 --> 00:04:40,230 la paire de valeurs clé pour l'entrée pour laquelle cette action a été envoyée, 61 00:04:40,230 --> 00:04:46,740 la bonne chose est que nous attachons l'entrée identifiant de l'action. Nous pouvons donc aller au réducteur 62 00:04:46,740 --> 00:04:52,360 et remplacer dynamiquement une clé ici dans les valeurs d'entrée copiées, 63 00:04:52,380 --> 00:04:57,900 la clé est l'action. bien sûr, c'est notre identifiant d'entrée que nous avons attaché à l'action et 64 00:04:57,900 --> 00:05:00,420 la valeur devrait être action. valeur, c'est 65 00:05:00,420 --> 00:05:06,840 tout ce que nous devons faire. Nous stockons donc dynamiquement la valeur qui a 66 00:05:06,840 --> 00:05:12,060 été distribuée avec l'entrée également attribuée dynamiquement et mettons à jour nos valeurs d'entrée copiées. 67 00:05:12,060 --> 00:05:17,360 Maintenant, nous pouvons renvoyer un nouvel état ici parce que c'est le but de votre propre réducteur, comme pour 68 00:05:17,360 --> 00:05:21,360 le réducteur Redux, à la fin il doit retourner un nouvel instantané d'état et 69 00:05:21,840 --> 00:05:28,800 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 70 00:05:28,800 --> 00:05:36,230 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 71 00:05:36,260 --> 00:05:39,820 valeurs ou mettre à jour les valeurs, je veux 72 00:05:39,890 --> 00:05:42,810 aussi mettre à jour mes validités. 73 00:05:42,920 --> 00:05:48,700 Voici donc mes validités mises à jour et tout comme avec les valeurs, je commence par copier ma 74 00:05:48,710 --> 00:05:53,240 clé de validités d'entrée car les validités d'entrée sont une clé ici comme vous 75 00:05:53,340 --> 00:05:54,050 pouvez 76 00:05:57,300 --> 00:06:05,190 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 77 00:06:05,220 --> 00:06:10,320 soit et le remplacer par action est valide parce que nous obtenons les informations, qu'elles soient 78 00:06:10,320 --> 00:06:13,790 valides ou non dans le cadre de l'action envoyée, non? 79 00:06:13,800 --> 00:06:17,400 Nous transmettons ceci ici sur la base de cette validation de base que nous avons ici. 80 00:06:19,810 --> 00:06:24,160 Maintenant, avec cela, nous avons juste besoin de mettre à jour ceci ici, donc 81 00:06:24,340 --> 00:06:30,220 nos validités d'entrée ici sont égales aux validités mises à jour et maintenant nous devons juste gérer la 82 00:06:30,220 --> 00:06:33,430 validité globale du formulaire. Pour cela, j'ajoute une 83 00:06:34,640 --> 00:06:41,270 variable, une variable d'aide, le formulaire est valide, ce qui est initialement vrai, puis je passe en revue 84 00:06:41,270 --> 00:06:43,160 toutes mes validités mises à 85 00:06:43,160 --> 00:06:45,050 jour, qui sont mes anciennes 86 00:06:45,080 --> 00:06:49,520 validités copiées, puis celle validée pour l'entrée que nous venons de taper. 87 00:06:49,580 --> 00:06:57,020 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 88 00:06:57,020 --> 00:07:03,170 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 89 00:07:03,170 --> 00:07:06,170 sont toutes vraies, alors l'ensemble le formulaire est valide. 90 00:07:06,230 --> 00:07:08,980 Si au moins l'un d'entre eux est 91 00:07:09,000 --> 00:07:17,090 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 92 00:07:17,120 --> 00:07:24,320 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 93 00:07:24,330 --> 00:07:26,320 nous parcourons toutes les entrées ici. 94 00:07:26,480 --> 00:07:31,530 La façon dont cet opérateur booléen fonctionne est telle que false remplace true, donc si une entrée 95 00:07:31,640 --> 00:07:37,730 est false, la forme est valide sera définie sur false et ne pourra pas être définie sur true par la suite. 96 00:07:37,730 --> 00:07:43,010 Donc, si au moins une entrée n'est pas valide, le formulaire global sera invalide et 97 00:07:43,010 --> 00:07:48,200 donc maintenant je n'ai plus besoin de copier mon état ici car je remplacerai l'intégralité 98 00:07:48,200 --> 00:07:51,460 de l'instantané d'état et le formulaire défini est valide 99 00:07:52,940 --> 00:08:02,910 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 100 00:08:03,540 --> 00:08:04,270 et ici. 101 00:08:06,030 --> 00:08:09,900 Maintenant, juste une chose supplémentaire, si nous ne le faisons pas dans 102 00:08:09,930 --> 00:08:16,560 ce bloc if, donc si une autre action a été envoyée ou quoi que ce soit d'autre, alors je vais simplement retourner 103 00:08:16,560 --> 00:08:18,870 l'état inchangé ici. Avec cela, nous 104 00:08:18,870 --> 00:08:26,590 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 105 00:08:26,610 --> 00:08:31,560 avons juste besoin d'utiliser l'état du formulaire qui changera à chaque frappe, ce qui est exactement ce 106 00:08:31,560 --> 00:08:38,010 qui s'est passé avant, mais maintenant tout est centralisé et fusionné dans un état géré qui, je pense, est beaucoup plus propre 107 00:08:38,190 --> 00:08:45,600 que d'avoir des tonnes d'états différents pour les validités et les valeurs. Et en passant, la gestion de tous ces 108 00:08:45,600 --> 00:08:53,330 états manuellement et séparément serait devenue un gros problème lorsque vous souhaitez ensuite valider la validité globale du formulaire. 109 00:08:53,340 --> 00:08:59,250 Alors maintenant, nous pouvons utiliser l'état du formulaire qui changera à chaque frappe et nous l'utilisons 110 00:08:59,790 --> 00:09:07,610 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. 111 00:09:07,620 --> 00:09:15,160 Maintenant, évidemment, nous faisons la même chose ici pour l'imageUrl, nous réintroduisons cela, donc juste ce que nous faisions avant 112 00:09:15,160 --> 00:09:19,710 et maintenant avec notre état de forme géré avec l'aide du 113 00:09:19,720 --> 00:09:26,040 réducteur, même pour le prix bien sûr et aussi la même chose pour le description, comme ça. 114 00:09:29,530 --> 00:09:35,010 Maintenant, en plus de le changer ici, nous devons également le changer à d'autres endroits, par exemple ici 115 00:09:35,140 --> 00:09:39,730 dans le gestionnaire de soumission bien sûr. Là, le titre est valide, cela 116 00:09:39,730 --> 00:09:50,540 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 117 00:09:50,540 --> 00:09:52,250 pas valide, donc 118 00:09:52,250 --> 00:09:54,400 cette vérification devrait être correcte. 119 00:09:54,530 --> 00:09:59,960 Bien sûr, cependant, nous nous soucions de la validité de toutes les entrées, donc au lieu de simplement 120 00:09:59,960 --> 00:10:05,270 les vérifier manuellement ici en les concaténant en une longue instruction if, nous pouvons simplement vérifier si 121 00:10:05,270 --> 00:10:10,880 l'état du formulaire est valide est faux, car cela signifie qu'une entrée est fausse et par conséquent, nous 122 00:10:10,880 --> 00:10:11,750 montrons cette 123 00:10:11,750 --> 00:10:18,300 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. 124 00:10:18,300 --> 00:10:23,450 Cependant, si le formulaire est soumis, description du titre et imageUrl, qui n'existe 125 00:10:23,550 --> 00:10:29,380 plus, c'est maintenant le formulaire d'état inputValues. title et ainsi de suite, nous 126 00:10:29,400 --> 00:10:30,950 faisons donc la 127 00:10:32,290 --> 00:10:40,790 même chose ici pour la description et pour l'imageUrl. Nous tirons nos valeurs de l'état de 128 00:10:40,790 --> 00:10:50,250 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 129 00:10:50,250 --> 00:10:55,200 prix que je convertis toujours en nombre avec le plus ici, nous obtenons tout 130 00:10:55,200 --> 00:11:02,130 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 131 00:11:02,130 --> 00:11:08,490 description, l'imageUrl et ainsi de suite, mais simplement l'état de forme. Si le formulaire change d'état, ce qu'il fera à 132 00:11:08,490 --> 00:11:13,170 chaque frappe, alors cette fonction doit être reconstruite et elle doit être reconstruite car 133 00:11:13,200 --> 00:11:14,790 les informations utilisées par 134 00:11:14,790 --> 00:11:16,980 la fonction changent à chaque frappe, 135 00:11:17,070 --> 00:11:23,750 la validité peut changer à chaque frappe, les valeurs que vous voulez soumettre peut changer à chaque pression de touche. 136 00:11:23,880 --> 00:11:29,820 Nous pouvons également bien sûr maintenant l'utiliser pour afficher notre message d'erreur. Au lieu de vérifier que le 137 00:11:29,820 --> 00:11:31,330 titre est 138 00:11:31,380 --> 00:11:41,850 valide et n'existe plus, nous vérifions formState. inputValidities. titre, si c'est faux, alors je veux montrer ce texte. 139 00:11:41,960 --> 00:11:42,680 Donc maintenant avec 140 00:11:42,680 --> 00:11:47,440 ça, si on enregistre tout ça, on devrait pouvoir vérifier ça. Si nous allons sur notre page ici, 141 00:11:47,450 --> 00:11:49,320 nous voyons cette erreur initialement. 142 00:11:49,340 --> 00:11:51,650 Si je commence à taper, il disparaît, 143 00:11:51,690 --> 00:11:55,640 si j'essaie de le soumettre, il échoue car j'ai trois entrées vides. 144 00:11:55,640 --> 00:11:58,800 Par contre, si j'entre quelque chose de 145 00:11:58,850 --> 00:12:02,100 valable, cela fonctionne. Si j'essaye d'éditer, essayons 146 00:12:02,270 --> 00:12:05,100 ceci sur Android peut-être pour mélanger les choses. 147 00:12:05,420 --> 00:12:11,140 Donc, si j'essaie de modifier la chemise rouge ici, je peux très bien 148 00:12:11,150 --> 00:12:13,290 le soumettre, maintenant essayons 149 00:12:13,320 --> 00:12:18,080 aussi de le soumettre s'il est vide, alors je reçois l'alerte. 150 00:12:18,080 --> 00:12:20,620 Donc, cela fonctionne de la façon dont cela 151 00:12:24,840 --> 00:12:31,700 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 152 00:12:31,700 --> 00:12:33,020 use reducer lorsque 153 00:12:33,080 --> 00:12:38,660 vous travaillez avec des formulaires, c'est juste un exemple particulièrement bon pour quand il est logique de fusionner 154 00:12:38,660 --> 00:12:42,250 plusieurs états ensemble et ont donc un code hautement réutilisable et efficace. 155 00:12:42,270 --> 00:12:48,290 Maintenant, je n'ai toujours pas fini, car toutes ces répétitions de code avec les entrées ici qui 156 00:12:48,320 --> 00:12:54,880 sont toujours structurées de la même manière et les possibilités de personnalisation manquantes concernant la validation, ce sont les choses 157 00:12:55,040 --> 00:12:56,930 que je veux aborder ensuite.