1 00:00:02,300 --> 00:00:08,300 Quindi continuiamo a lavorare su questo e cambiamo questo in una funzione del gestore di modifica 2 00:00:09,020 --> 00:00:10,390 del testo, che 3 00:00:10,400 --> 00:00:16,420 ora abbiamo assegnato al testo onChange qui sul titolo, ma che possiamo anche aggiungere al nostro imageUrl. 4 00:00:16,430 --> 00:00:22,640 Quindi qui per il testo onChange, ho anche impostato questo per il gestore di modifica del testo e ora 5 00:00:22,640 --> 00:00:28,030 per farlo funzionare, dobbiamo assicurarci che questa funzione ottenga informazioni su quale input è stato attivato, 6 00:00:28,070 --> 00:00:32,390 quindi se hai appena digitato il titolo o nel input di imageUrl. 7 00:00:32,570 --> 00:00:36,580 Quindi oltre a ottenere il testo, mi aspetto anche di ottenere un argomento diverso, 8 00:00:36,710 --> 00:00:42,290 mi aspetto di ottenere il mio identificatore di input o qualcosa del genere, puoi nominarlo come vuoi in modo 9 00:00:42,290 --> 00:00:47,420 che questa funzione possa essere riutilizzata per più input di testo e otteniamo ancora informazioni su quale 10 00:00:47,420 --> 00:00:48,560 input ha innescato 11 00:00:48,680 --> 00:00:54,080 ciò in modo che possiamo inoltrarlo al nostro riduttore, dove in seguito avremo bisogno di queste informazioni per aggiornare 12 00:00:54,080 --> 00:00:55,370 correttamente il nostro stato. 13 00:00:55,610 --> 00:01:01,520 Ora per ottenere questa funzionalità di identificatore di input, dobbiamo andare nei punti in cui utilizziamo il gestore 14 00:01:01,520 --> 00:01:09,140 di modifica del testo e lì, ad esempio, possiamo usare bind o utilizzare una funzione di freccia anonima a capo invece di legare 15 00:01:09,140 --> 00:01:14,570 questo dove non mi interessa ma altro soprattutto, per configurare gli argomenti che questa funzione otterrà 16 00:01:14,570 --> 00:01:19,700 e c'è un argomento speciale che voglio passare e questo è l'identificatore di input. 17 00:01:19,990 --> 00:01:24,650 E per questa funzione qui, per questa funzione chiamare questo 18 00:01:24,650 --> 00:01:33,870 input di testo, questo ovviamente sarebbe il titolo. Per questo input laggiù, avremmo associato questo imageUrl e di 19 00:01:34,060 --> 00:01:40,450 nuovo questo dovrebbe essere un identificatore che hai anche nel tuo stato lassù, nel 20 00:01:40,570 --> 00:01:49,110 tuo stato di forma che passi al riduttore. Con questo aggiunto, ci assicureremo che il gestore di modifica del testo sia eseguito 21 00:01:49,110 --> 00:01:51,710 e ottenga questo argomento dell'identificatore di input. 22 00:01:51,990 --> 00:01:56,430 L'argomento di testo verrà anche ricevuto perché è l'argomento predefinito che React 23 00:01:56,430 --> 00:02:01,740 Native ci passerebbe comunque e questo verrà automaticamente ricevuto come ultimo argomento in quella funzione. 24 00:02:01,800 --> 00:02:05,000 Quindi non è necessario e in realtà non 25 00:02:05,010 --> 00:02:07,410 possiamo vincolarlo qui, verrà inoltrato automaticamente. 26 00:02:07,680 --> 00:02:13,260 Ora abbiamo una funzione riutilizzabile di modifica del testo qui e possiamo 27 00:02:13,440 --> 00:02:21,030 assegnarla anche agli altri input, come qui a imageUrl, come qui per il prezzo, possiamo associare il gestore 28 00:02:21,060 --> 00:02:27,390 di modifica del testo, associare questo e quindi il prezzo è il nostro identificatore qui 29 00:02:27,720 --> 00:02:35,540 e ovviamente anche per la descrizione, lì incolliamo e poi ci leghiamo a questo e l'identificatore è la descrizione. 30 00:02:35,780 --> 00:02:40,910 Ora questo stesso gestore può essere utilizzato per tutti gli input, ma in questo momento ovviamente 31 00:02:40,910 --> 00:02:44,240 fa una cosa, convalida ogni input per la sua lunghezza. 32 00:02:44,240 --> 00:02:46,990 Ora, ciò potrebbe avere senso e 33 00:02:47,030 --> 00:02:52,070 lo fa qui, nessun input dovrebbe essere vuoto ma potresti volere anche 34 00:02:52,070 --> 00:02:58,130 qualche altra convalida, per esempio il mio prezzo qui dovrebbe essere un numero maggiore di 35 00:02:58,160 --> 00:03:05,360 zero diciamo, quindi zero non è consentito come input. Quello d'altra parte non è un criterio che per 36 00:03:05,360 --> 00:03:10,670 me conta su altri input. Troveremo una soluzione elegante per questo in seguito, per 37 00:03:10,670 --> 00:03:16,700 ora atteniamoci a questa più piccola convalida del denominatore comune che possiamo applicare a tutti gli input per assicurarci che non 38 00:03:16,700 --> 00:03:18,690 siano almeno vuoti e concentriamoci sulla funzione 39 00:03:19,120 --> 00:03:23,040 del riduttore e su come lo stato del nostro modulo dovrebbe cambiare quando 40 00:03:23,060 --> 00:03:26,990 questo modulo inserisce un'azione di aggiornamento con tutti quei dati inviati perché in 41 00:03:26,990 --> 00:03:28,720 questo momento non accadrà nulla. 42 00:03:28,760 --> 00:03:33,920 Abbiamo il nostro stato iniziale sul riduttore lì e che sarà passato o memorizzato nello stato del 43 00:03:33,920 --> 00:03:36,050 modulo ma questo stato non cambierà mai. 44 00:03:36,080 --> 00:03:38,770 Bene, ecco perché inviamo un'azione, giusto? 45 00:03:38,820 --> 00:03:40,550 Ecco perché lo facciamo qui, 46 00:03:40,560 --> 00:03:46,190 ecco perché viene inviato l'aggiornamento dell'input del modulo ed è per questo che vogliamo scrivere del codice 47 00:03:46,200 --> 00:03:49,190 qui nel riduttore quando questa azione ci raggiunge qui. 48 00:03:49,500 --> 00:03:55,650 Ora lì, se questa azione ci raggiunge, alla fine l'obiettivo è quello di assicurarci di aggiornare questa istantanea di stato, 49 00:03:55,650 --> 00:03:56,220 la 50 00:03:56,220 --> 00:03:58,340 nostra istantanea di stato in modo appropriato. 51 00:03:58,650 --> 00:04:04,470 Ciò significa che, ad esempio, avremo bisogno di alcuni valori aggiornati e per questo creo un nuovo oggetto 52 00:04:04,470 --> 00:04:05,910 perché i miei valori 53 00:04:06,030 --> 00:04:11,850 di input qui, quello è un oggetto e ne creerò uno nuovo per sostituirlo e prima di tutto 54 00:04:11,850 --> 00:04:14,340 copierò quello esistente valori di input dello stato. 55 00:04:14,400 --> 00:04:19,650 Tieni presente che lo stato qui viene passato automaticamente, questa è la nostra istantanea di stato corrente 56 00:04:19,650 --> 00:04:25,500 prima di aggiornarla e quindi inizialmente, questa è questa istantanea di stato qui per esempio e questo avrà una 57 00:04:25,500 --> 00:04:27,610 chiave di valori di input che a 58 00:04:27,720 --> 00:04:29,420 sua volta contiene un 59 00:04:29,460 --> 00:04:35,910 oggetto ed è proprio quello Sto copiando qui, sto copiando tutte le coppie chiave-valore di quell'istantanea dei valori di input e 60 00:04:35,910 --> 00:04:40,230 quindi voglio sostituire la coppia di valori-chiave per l'input per cui è stata inviata 61 00:04:40,230 --> 00:04:46,740 questa azione, la cosa buona è che alleghiamo l'input identificatore dell'azione. Quindi possiamo andare al riduttore e 62 00:04:46,740 --> 00:04:52,360 sovrascrivere dinamicamente una chiave qui nei valori di input copiati, 63 00:04:52,380 --> 00:04:57,900 la chiave è azione. input ovviamente, questo è il nostro identificatore di input che abbiamo allegato all'azione e 64 00:04:57,900 --> 00:05:00,420 il valore dovrebbe essere action. valore, questo 65 00:05:00,420 --> 00:05:06,840 è tutto ciò che dobbiamo fare. Quindi archiviamo dinamicamente il valore inviato con 66 00:05:06,840 --> 00:05:12,060 l'input assegnato anche dinamicamente e aggiorniamo i nostri valori di input copiati. 67 00:05:12,060 --> 00:05:17,360 Ora possiamo restituire un nuovo stato qui perché questo è l'obiettivo del tuo riduttore, come per il riduttore 68 00:05:17,360 --> 00:05:21,360 Redux, alla fine deve restituire una nuova istantanea dello stato e lì voglio 69 00:05:21,840 --> 00:05:28,800 copiare lo stato esistente ma sovrascrivere i valori di input con il valori aggiornati che copiano i miei vecchi valori in modo che 70 00:05:28,800 --> 00:05:36,230 nessun dato vada perso e quindi sostituisca una delle coppie chiave-valore presenti. Ora, ovviamente, non è solo per sostituire 71 00:05:36,260 --> 00:05:39,820 i valori o aggiornare i valori, voglio 72 00:05:39,890 --> 00:05:42,810 anche aggiornare le mie validità. 73 00:05:42,920 --> 00:05:48,700 Quindi ecco le mie validità aggiornate e proprio come con i valori, inizio copiando la mia 74 00:05:48,710 --> 00:05:53,240 chiave di validità di input perché la validità di input è una 75 00:05:53,340 --> 00:05:54,050 chiave 76 00:05:57,300 --> 00:06:05,190 qui come puoi vedere e quindi voglio sostituire una validità per l'input che otteniamo sull'azione , quindi titolo, imageUrl o qualunque cosa 77 00:06:05,220 --> 00:06:10,320 sia e sostituiamo questo con azione è valido perché otteniamo le informazioni se sono 78 00:06:10,320 --> 00:06:13,790 valide o meno come parte dell'azione che viene inviata, giusto? 79 00:06:13,800 --> 00:06:17,400 Lo stiamo inoltrando qui in base a questa convalida di base che abbiamo qui. 80 00:06:19,810 --> 00:06:24,160 Ora con ciò, dobbiamo solo aggiornare questo qui, quindi le nostre 81 00:06:24,340 --> 00:06:30,220 validità di input qui sono uguali alle validità aggiornate e ora dobbiamo solo gestire la 82 00:06:30,220 --> 00:06:33,430 validità complessiva del modulo. Per questo, aggiungo 83 00:06:34,640 --> 00:06:41,270 una variabile, una variabile di supporto, il modulo è valido che inizialmente è vero e poi cerco tutte 84 00:06:41,270 --> 00:06:43,160 le mie validità aggiornate che 85 00:06:43,160 --> 00:06:45,050 sono le mie vecchie validità 86 00:06:45,080 --> 00:06:49,520 copiate e poi quella valida aggiornata per l'input che abbiamo appena digitato. 87 00:06:49,580 --> 00:06:57,020 Quindi qui, abbiamo un ciclo for / in in cui passiamo attraverso tutte le chiavi nelle validità aggiornate e l'obiettivo è semplice, controllo 88 00:06:57,020 --> 00:07:03,170 ogni validità di input del modulo e se tutte le validità di input del modulo sono valide, se sono 89 00:07:03,170 --> 00:07:06,170 tutte vere, allora il totale il modulo è valido 90 00:07:06,230 --> 00:07:08,980 Se almeno uno di essi è falso, 91 00:07:09,000 --> 00:07:17,090 il modulo generale è falso, il modulo complessivo non è valido. Quindi, qui il modulo è valido è uguale all'ultimo modulo è lo stato 92 00:07:17,120 --> 00:07:24,320 valido che abbiamo e quindi la validità di validità aggiornata per l'input che stiamo attualmente esaminando, quindi per questa chiave e stiamo 93 00:07:24,330 --> 00:07:26,320 esaminando tutti gli input qui. 94 00:07:26,480 --> 00:07:31,530 Il modo in cui funziona questo operatore booleano è che questo falso sovrascrive vero, quindi se qualsiasi input 95 00:07:31,640 --> 00:07:37,730 è falso, la forma è valida sarà impostata su falsa e non potrà essere impostata su vera da quel momento in poi. 96 00:07:37,730 --> 00:07:43,010 Quindi, se almeno un input non è valido, il modulo complessivo non sarà valido e 97 00:07:43,010 --> 00:07:48,200 quindi ora non ho più bisogno di copiare il mio stato qui perché sostituirò 98 00:07:48,200 --> 00:07:51,460 l'intera istantanea dello stato e il modulo impostato sarà 99 00:07:52,940 --> 00:08:02,910 valido per il mio modulo derivato è valido qui e ovviamente per evitare confusione, potremmo anche nominare questo modulo aggiornato valido qui e qui e qui e 100 00:08:03,540 --> 00:08:04,270 qui. 101 00:08:06,030 --> 00:08:09,900 Ora solo un'altra cosa, se non riusciamo a farlo in 102 00:08:09,930 --> 00:08:16,560 questo blocco, quindi se qualche altra azione è stata inviata o qualcos'altro, allora restituirò qui lo 103 00:08:16,560 --> 00:08:18,870 stato invariato. Con ciò, abbiamo 104 00:08:18,870 --> 00:08:26,590 aggiunto una logica di riduzione che è in grado di gestire qualsiasi input o qualsiasi digitazione in uno qualsiasi dei nostri input di testo, ora abbiamo 105 00:08:26,610 --> 00:08:31,560 solo bisogno di usare lo stato del modulo che cambierà con ogni sequenza di tasti che 106 00:08:31,560 --> 00:08:38,010 è proprio quello che è successo prima ma ora tutto centralizzato e fusa in uno stato gestito che ritengo sia molto 107 00:08:38,190 --> 00:08:45,600 più pulito che avere tonnellate di stati diversi per validità e valori. A proposito, gestire tutti questi stati manualmente 108 00:08:45,600 --> 00:08:53,330 e separatamente sarebbe diventato un grosso problema quando si desidera convalidare la validità complessiva del modulo. 109 00:08:53,340 --> 00:08:59,250 Quindi ora possiamo usare lo stato del modulo che cambierà ad ogni sequenza di tasti e 110 00:08:59,790 --> 00:09:07,610 lo useremo ad esempio qui sui valori. Ritorniamo al valore per questo input di testo accedendo ai valori di input dello stato del modulo. titolo. 111 00:09:07,620 --> 00:09:15,160 Ora ovviamente, facciamo lo stesso qui per imageUrl, lo inseriamo di nuovo, quindi proprio quello che abbiamo fatto prima 112 00:09:15,160 --> 00:09:19,710 e ora con il nostro stato del modulo gestito con 113 00:09:19,720 --> 00:09:26,040 l'aiuto del riduttore, lo stesso per il prezzo ovviamente e lo stesso per il descrizione, così. 114 00:09:29,530 --> 00:09:35,010 Ora oltre a cambiarlo qui, dobbiamo anche cambiarlo in altri posti, ad esempio qui 115 00:09:35,140 --> 00:09:39,730 nel gestore di invio ovviamente. Lì, il titolo è valido, questo 116 00:09:39,730 --> 00:09:50,540 non esiste più ma possiamo controllare il titolo di validità dell'input dello stato del modulo, che è vero o falso e se è falso, significa che non 117 00:09:50,540 --> 00:09:52,250 è valido, quindi 118 00:09:52,250 --> 00:09:54,400 questo controllo dovrebbe andare bene. 119 00:09:54,530 --> 00:09:59,960 Naturalmente, tuttavia, ci preoccupiamo della validità di tutti gli input, quindi invece di controllarli tutti 120 00:09:59,960 --> 00:10:05,270 manualmente concatenandoli in un'istruzione if lunga, possiamo semplicemente verificare se il modulo di stato del 121 00:10:05,270 --> 00:10:10,880 modulo è valido è falso perché ciò significa che alcuni input sono falsi e quindi mostriamo 122 00:10:10,880 --> 00:10:11,750 questo errore, 123 00:10:11,750 --> 00:10:18,300 questo è il controllo più breve e questo è ovviamente anche quando vogliamo evitare che il modulo venga inviato. 124 00:10:18,300 --> 00:10:23,450 Tuttavia, se il modulo viene inviato, la descrizione del titolo e imageUrl, che non esiste 125 00:10:23,550 --> 00:10:29,380 più, è invece ora inputValues dello stato. titolo e così via, quindi 126 00:10:29,400 --> 00:10:30,950 facciamo lo 127 00:10:32,290 --> 00:10:40,790 stesso qui per la descrizione e per imageUrl. Deriviamo i nostri valori dallo stato della 128 00:10:40,790 --> 00:10:50,250 forma, lo stesso ovviamente qui per la creazione. Otteniamo il titolo, la descrizione e imageUrl e ovviamente anche il prezzo che 129 00:10:50,250 --> 00:10:55,200 ancora converto in un numero con il plus qui, otteniamo tutto ciò dal 130 00:10:55,200 --> 00:11:02,130 nostro stato di forma dei valori di input. Pertanto, naturalmente, la nostra dipendenza qui non è titolo, descrizione, imageUrl 131 00:11:02,130 --> 00:11:08,490 e così via, invece è solo lo stato del modulo. Se il modulo indica cambiamenti, cosa che farà ad ogni 132 00:11:08,490 --> 00:11:13,170 sequenza di tasti, allora questa funzione dovrebbe essere ricostruita e deve essere ricostruita perché le 133 00:11:13,200 --> 00:11:14,790 informazioni utilizzate dalla funzione 134 00:11:14,790 --> 00:11:16,980 cambiano ad ogni sequenza di tasti, la 135 00:11:17,070 --> 00:11:23,750 validità può cambiare ad ogni sequenza di tasti, i valori desiderati per inviare può cambiare ad ogni pressione di un tasto. 136 00:11:23,880 --> 00:11:29,820 Naturalmente ora possiamo anche usarlo per mostrare il nostro messaggio di errore. Invece di verificare che il titolo 137 00:11:29,820 --> 00:11:31,330 sia valido 138 00:11:31,380 --> 00:11:41,850 e che non esiste più, controlliamo formState. inputValidities. titolo, se questo è falso, allora voglio mostrare questo testo. 139 00:11:41,960 --> 00:11:42,680 Quindi ora con 140 00:11:42,680 --> 00:11:47,440 ciò, se salviamo tutto ciò, dovremmo essere in grado di verificarlo. Se andiamo alla nostra pagina qui, 141 00:11:47,450 --> 00:11:49,320 inizialmente vediamo questo errore. 142 00:11:49,340 --> 00:11:51,650 Se comincio a digitare, scompare, 143 00:11:51,690 --> 00:11:55,640 se provo a inviarlo, non riesce perché ho tre input vuoti. 144 00:11:55,640 --> 00:11:58,800 Se invece inserisco qualcosa di valido 145 00:11:58,850 --> 00:12:02,100 lì, invece, funziona. Se provo a modificare, 146 00:12:02,270 --> 00:12:05,100 proviamo questo su Android forse per confondere le cose. 147 00:12:05,420 --> 00:12:11,140 Quindi, se provo a modificare la maglietta rossa qui, posso inviarlo 148 00:12:11,150 --> 00:12:13,290 bene, ora proviamo anche 149 00:12:13,320 --> 00:12:18,080 a inviarlo se questo è vuoto, quindi ricevo l'avviso. 150 00:12:18,080 --> 00:12:20,620 Quindi funziona nel modo in cui dovrebbe funzionare, 151 00:12:24,840 --> 00:12:31,700 ora con questa gestione dei moduli più elegante che utilizza il riduttore di utilizzo e, naturalmente, non è possibile utilizzare solo il 152 00:12:31,700 --> 00:12:33,020 riduttore quando si 153 00:12:33,080 --> 00:12:38,660 lavora con i moduli, questo è solo un esempio particolarmente utile per quando ha senso fondersi più 154 00:12:38,660 --> 00:12:42,250 stati insieme e quindi hanno un codice altamente riutilizzabile ed efficiente. 155 00:12:42,270 --> 00:12:48,290 Ora non ho ancora finito, perché tutta questa ripetizione del codice con gli input qui che 156 00:12:48,320 --> 00:12:54,880 sono sempre strutturati nello stesso modo e le possibilità di personalizzazione mancanti relative alla convalida, queste sono le cose 157 00:12:55,040 --> 00:12:56,930 che voglio affrontare in seguito.