1 00:00:02,290 --> 00:00:08,140 Il nostro approccio qui ovviamente funziona. Stiamo memorizzando gli input in alcuni stati, stiamo 2 00:00:08,140 --> 00:00:16,090 memorizzando la validità in alcuni stati e potremmo fare questa gestione della validità per tutti i nostri input qui e semplicemente avere le 3 00:00:16,120 --> 00:00:21,370 nostre diverse funzioni di gestione dei cambiamenti qui per i nostri diversi input, che funzionerebbe. 4 00:00:21,370 --> 00:00:26,560 Una nota importante tra l'altro prima di andare avanti, poiché controllo la validità del titolo qui 5 00:00:26,770 --> 00:00:29,950 nel gestore di invio, ovviamente dovremmo anche aggiungerlo lì 6 00:00:29,950 --> 00:00:35,820 come dipendenza, quindi il titolo è valido deve essere aggiunto lì come dipendenza nel callback dell'uso array di 7 00:00:35,830 --> 00:00:36,980 dipendenze, questo è 8 00:00:37,030 --> 00:00:40,570 importante, altrimenti questa funzione non verrà ricostruita quando la validità cambia, 9 00:00:40,660 --> 00:00:47,970 il che significa che non saremo in grado di inviarlo in seguito. Il problema con il nostro approccio attuale 10 00:00:47,970 --> 00:00:55,410 è che gestiamo stati diversi per memorizzare l'input per i diversi input e quindi abbiamo anche stati di 11 00:00:55,410 --> 00:01:00,910 validità diversi, almeno potenzialmente se iniziamo a gestire la nostra validità, come questa 12 00:01:00,990 --> 00:01:07,400 e per forme molto grandi, ovviamente questo significa molta copia e incolla, molta gestione statale. 13 00:01:07,410 --> 00:01:15,300 Ora, se hai molti stati che sono in qualche modo connessi, puoi anche farlo in un modo più elegante, invece 14 00:01:15,330 --> 00:01:18,500 di avere i tuoi stati separati per ogni 15 00:01:18,540 --> 00:01:25,720 input, puoi avere un grande stato che unisce tutti i valori di input e che unisce tutte le 16 00:01:25,740 --> 00:01:33,720 validità e quindi utilizzare un concetto chiamato riduttore, non un riduttore Redux ma supportato da React pronto all'uso per gestire 17 00:01:33,720 --> 00:01:34,710 quello stato. 18 00:01:34,710 --> 00:01:40,210 Puoi farlo con il gancio del riduttore che non ha nulla a che fare con Redux, il 19 00:01:40,440 --> 00:01:47,550 concetto di riduttore non è esclusivo di Redux, un riduttore alla fine è solo una funzione che prende input e sputa un 20 00:01:47,580 --> 00:01:52,800 po 'di output e quindi React supporta anche questo e vedrai come puoi usarlo in 21 00:01:52,920 --> 00:01:54,190 questa lezione ora. 22 00:01:54,900 --> 00:01:57,510 Allora, qual è l'idea di un riduttore? Ora prima è importante capire che 23 00:01:57,510 --> 00:02:03,030 l'uso del riduttore è un gancio che ti aiuta a gestire lo stato. In genere lo si utilizza se si dispone 24 00:02:03,090 --> 00:02:09,420 di stati connessi o di uno stato più complesso e non si desidera disporre di un gruppo di chiamate di stato 25 00:02:09,600 --> 00:02:16,340 per uso individuale e di un gruppo di singoli stati gestiti. È quindi possibile utilizzare il riduttore ed ecco 26 00:02:16,350 --> 00:02:17,510 come funziona. 27 00:02:19,060 --> 00:02:25,530 Inizi a creare un riduttore, diciamo un riduttore di forma qui, puoi nominarlo come vuoi e tieni presente che lo creo al di 28 00:02:25,570 --> 00:02:29,020 fuori del mio componente di modulo, potresti farlo lì ma se non 29 00:02:29,020 --> 00:02:33,940 dipendi da oggetti di scena, tu puoi farlo al di fuori di lì in modo che questo 30 00:02:33,940 --> 00:02:39,250 non si ricostruisca con ogni ciclo di nuovo rendering e non devi nemmeno usare l'uso del callback che ovviamente 31 00:02:39,280 --> 00:02:44,110 costa anche delle prestazioni se lo usi. Quindi usalo fuori da lì, costruiscilo 32 00:02:44,110 --> 00:02:49,690 fuori da lì per evitare inutili ricreazioni di quella funzione e ora il riduttore, proprio come 33 00:02:49,690 --> 00:02:57,100 un riduttore Redux ottiene lo stato corrente e un'azione, ma di nuovo non è correlato a Redux, non è usato da Redux, 34 00:02:57,360 --> 00:03:02,240 il riduttore funziona sempre in questo modo. Ora, di nuovo, proprio come in 35 00:03:02,310 --> 00:03:07,260 un riduttore Redux perché, di nuovo, funzionano in questo modo, puoi controllare diversi 36 00:03:07,260 --> 00:03:11,520 tipi di azioni e qui voglio controllare un tipo, anche questo 37 00:03:11,520 --> 00:03:12,680 usa solo 38 00:03:12,690 --> 00:03:15,440 un'istruzione if, puoi usare un'istruzione switch case 39 00:03:15,750 --> 00:03:19,260 anche e che controllo l'azione. digitare qui dipende totalmente 40 00:03:19,290 --> 00:03:24,030 da me, puoi nominarlo come vuoi perché sarai tu a inviare l'azione 41 00:03:24,030 --> 00:03:29,800 in seguito e qui controllo l'azione di aggiornamento che è anche un identificatore che ho 42 00:03:29,820 --> 00:03:39,050 scelto e che, proprio come in Redux, potresti anche memorizza questo identificatore in una costante autonoma qui, quindi potresti avere qui l'azione di aggiornamento 43 00:03:39,620 --> 00:03:45,850 del riduttore, ad esempio l'identificatore di aggiornamento del riduttore come questo e utilizzalo qui se lo 44 00:03:45,920 --> 00:03:48,260 desideri e puoi nominarlo come preferisci. 45 00:03:48,380 --> 00:03:57,180 Quindi ora sto verificando questa azione e se si verifica questa azione, voglio archiviare un valore di input e convalidarlo, ma per capirlo, 46 00:03:57,340 --> 00:04:00,850 dobbiamo capire come utilizziamo il riduttore di modulo. 47 00:04:00,920 --> 00:04:05,510 Quindi lasciamolo così per il momento e scendiamo al componente stesso, lì iniziamo a 48 00:04:05,600 --> 00:04:08,950 impostare il nostro stato del modulo quaggiù, quindi qui 49 00:04:08,960 --> 00:04:15,200 voglio chiamare il riduttore utente e ora usare il riduttore prendere una tale funzione del riduttore quindi passerò il 50 00:04:15,200 --> 00:04:19,540 mio riduttore di forma che ho installato qui e che è ancora incompiuto. 51 00:04:19,940 --> 00:04:24,990 Usa il riduttore prende anche qualche secondo argomento facoltativo che è lo stato 52 00:04:24,990 --> 00:04:30,860 iniziale che vuoi passare e che può essere qualsiasi cosa ma qui passerò un oggetto 53 00:04:30,860 --> 00:04:38,630 Javascript e lo stato iniziale che voglio usare qui è alla fine un oggetto che ha valori di input, che 54 00:04:38,630 --> 00:04:39,990 poi è 55 00:04:40,220 --> 00:04:46,670 l'ennesimo oggetto nidificato che presto popolerò, input di validità che è anche un oggetto nidificato e 56 00:04:46,670 --> 00:04:49,610 forse una validità complessiva del modulo, lo 57 00:04:49,620 --> 00:04:55,700 chiamerò form valido, che inizialmente è falso diciamo. Quindi questo è ora il mio stato iniziale in cui passo 58 00:04:55,700 --> 00:05:03,260 e questo è lo stato che in seguito voglio cambiare dall'interno del riduttore di forma. Ora sui valori di input, possiamo ad esempio aggiungere il nostro titolo e 59 00:05:03,260 --> 00:05:06,070 dipende da te come lo chiami, che inizialmente 60 00:05:06,070 --> 00:05:11,150 è una stringa vuota, diciamo, questi saranno i valori iniziali che voglio impostare sui miei input, questo sarà 61 00:05:11,150 --> 00:05:15,980 nel sostituisco la mia gestione dello stato laggiù, dove memorizzo manualmente i miei input in diversi stati. 62 00:05:15,980 --> 00:05:20,220 Ora unirò tutto in un oggetto gestito attraverso quel riduttore. 63 00:05:20,480 --> 00:05:25,610 Quindi ho il mio titolo qui e in realtà non è sempre vuoto ovviamente ma in realtà 64 00:05:25,610 --> 00:05:27,410 è vuoto solo se non 65 00:05:27,410 --> 00:05:31,140 abbiamo prodotti modificati, quindi copierò questo controllo da lì e lo userò qui. 66 00:05:31,370 --> 00:05:34,590 Ora lo stesso ovviamente per imageUrl, lì ho inizializzato 67 00:05:35,410 --> 00:05:40,150 questo con il prodotto modificato. imageUrl se è disponibile e altrimenti uso 68 00:05:40,150 --> 00:05:40,930 una stringa 69 00:05:40,930 --> 00:05:43,540 vuota, praticamente anche quello che ho fatto laggiù. 70 00:05:44,110 --> 00:05:48,030 E ovviamente faccio lo stesso per la descrizione, qui voglio 71 00:05:48,070 --> 00:05:52,990 controllare se il prodotto modificato è impostato e uso questa descrizione o lo metto 72 00:05:53,080 --> 00:05:59,410 su una stringa vuota se non è disponibile. Ora, ultimo ma non meno importante, abbiamo il prezzo e 73 00:05:59,410 --> 00:06:02,450 lì ho sempre una stringa vuota perché o non ne 74 00:06:02,470 --> 00:06:05,830 abbiamo bisogno nel caso di un prodotto modificato, quindi non mi 75 00:06:05,860 --> 00:06:08,140 interessa il suo valore o ne 76 00:06:08,140 --> 00:06:15,020 abbiamo bisogno, beh quindi voglio inizializzarlo comunque con un valore vuoto. Ora ovviamente ogni input ha anche una validità, quindi possiamo aggiungere un titolo 77 00:06:15,020 --> 00:06:16,790 qui e ancora controllare se il prodotto 78 00:06:16,850 --> 00:06:19,010 modificato è impostato, se è impostato, quindi so 79 00:06:19,040 --> 00:06:21,320 che sto modificando, quindi avremo prepopolato il titolo, quindi 80 00:06:21,320 --> 00:06:22,700 inizialmente essere valido, quindi 81 00:06:22,700 --> 00:06:24,950 in questo caso il mio valore iniziale sarebbe vero, 82 00:06:24,950 --> 00:06:32,250 altrimenti sarà falso e ora anche questo è qualcosa che possiamo ripetere per imageUrl. Se abbiamo un prodotto modificato, sappiamo che era 83 00:06:32,250 --> 00:06:33,080 prepopolato, 84 00:06:33,080 --> 00:06:36,650 quindi sarà inizialmente valido, quindi lo impostiamo su 85 00:06:36,650 --> 00:06:39,550 true, altrimenti lo imposterò su false. 86 00:06:39,740 --> 00:06:44,420 Per la mia descrizione qui, è lo stesso - vero o falso e 87 00:06:44,540 --> 00:06:46,760 per il prezzo, è un 88 00:06:46,760 --> 00:06:49,090 po 'uguale, ovviamente non prepopoliamo il prezzo 89 00:06:49,100 --> 00:06:55,200 se stiamo modificando ma se stiamo modificando non mi interessa comunque il prezzo perché non sarà modificabile. 90 00:06:55,310 --> 00:07:00,890 Quindi so che se sto modificando, dovrei considerare questo come valido perché non può essere modificato 91 00:07:00,890 --> 00:07:02,420 comunque e quindi non 92 00:07:02,440 --> 00:07:09,680 mi interessa questo input ma non voglio bloccare l'invio del modulo a causa dell'impostazione su false quando non posso modificarlo comunque. 93 00:07:09,980 --> 00:07:13,110 Quindi lo imposterò su true se questo non è pianificato per essere modificato, se 94 00:07:13,190 --> 00:07:18,770 non stiamo modificando un prodotto ma ne stiamo aggiungendo uno, il prezzo sarà modificabile e quindi inizieremo in uno stato falso perché l'input del 95 00:07:18,770 --> 00:07:24,230 prezzo verrà essere vuoto inizialmente, è quello che stiamo allestendo qui. E ora la validità complessiva del modulo, bene 96 00:07:24,320 --> 00:07:26,150 ancora una volta posso controllare 97 00:07:26,150 --> 00:07:31,130 se abbiamo un prodotto modificato, il che significa che stiamo modificando, quindi il modulo è vero, 98 00:07:31,130 --> 00:07:33,590 il modulo è valido inizialmente, altrimenti è 99 00:07:33,590 --> 00:07:39,240 falso inizialmente se stiamo aggiungendo un nuovo prodotto . Ora questo è il mio stato iniziale 100 00:07:39,260 --> 00:07:45,050 qui, ora questa funzione di riduzione dovrebbe essere in grado di cambiare quello stato quando vengono 101 00:07:45,050 --> 00:07:48,660 inviate le azioni e un'azione dovrebbe essere inviata qualunque 102 00:07:48,730 --> 00:07:58,190 cosa digitiamo in uno dei nostri input di testo, che sarà il trigger. Pertanto, ora possiamo sbarazzarci di tutte queste assegnazioni di stato qui e 103 00:07:58,220 --> 00:08:05,780 quindi possiamo anche sbarazzarci dell'intera importazione dello stato d'uso e assicurarci di inviare l'azione di aggiornamento del riduttore per 104 00:08:05,790 --> 00:08:09,610 ogni sequenza di tasti che facciamo in un input. 105 00:08:09,710 --> 00:08:18,670 Quindi qui nel gestore della modifica del titolo, alla fine rimuoverò questo codice, lascerò il controllo if per ora ma non avrò alcun codice lì per 106 00:08:18,740 --> 00:08:22,770 il momento, invece laggiù, voglio inviare l'aggiornamento del riduttore e ora 107 00:08:22,790 --> 00:08:28,960 questo viene fatto con il risultato della chiamata dell'utilità di riduzione perché l'uso dell'utilità di riduzione ovviamente restituisce 108 00:08:28,960 --> 00:08:35,000 qualcosa, proprio come ha fatto lo stato d'uso. Restituisce anche un array con esattamente due elementi 109 00:08:35,000 --> 00:08:40,710 e quindi possiamo distruggerlo con questa sintassi di destrutturazione dell'array che abbiamo anche usato nello 110 00:08:40,730 --> 00:08:47,450 stato d'uso e lì ottengo il mio stato del modulo come primo valore e una funzione di invio come 111 00:08:47,450 --> 00:08:48,250 secondo valore. 112 00:08:48,290 --> 00:08:55,280 Questo è sempre ciò che il riduttore ti restituirà, un'istantanea dello stato che si aggiorna ogni volta che lo cambi ovviamente, quindi 113 00:08:55,280 --> 00:08:55,770 ogni 114 00:08:55,790 --> 00:09:01,490 volta che lo cambi, questo componente renderà di nuovo e ti darà una nuova istantanea dello stato e 115 00:09:01,550 --> 00:09:07,160 una funzione, l'invio alla fine è una funzione che ti consente di inviare azioni contro questo riduttore. 116 00:09:07,250 --> 00:09:11,760 Certo, puoi nominare questi due elementi come vuoi, ma penso che questa sia 117 00:09:11,780 --> 00:09:13,270 una denominazione sensata, questa 118 00:09:13,280 --> 00:09:20,100 è la nostra istantanea di stato, questa è una funzione. Ora la spedizione è un nome che ho già usato qui da Redux, 119 00:09:20,100 --> 00:09:24,460 quindi qui darò un nome a questo stato del modulo di spedizione per evitare uno scontro di 120 00:09:24,480 --> 00:09:25,980 nomi, puoi nominarlo come vuoi. 121 00:09:26,760 --> 00:09:33,350 Quindi ora lo stato del modulo di spedizione può essere utilizzato qui nel mio gestore di modifica del titolo, lo 122 00:09:33,410 --> 00:09:39,170 chiamo e devo passare lì un oggetto che descriva la mia azione e questo oggetto avrà una proprietà 123 00:09:39,170 --> 00:09:40,820 type, non devi avere 124 00:09:40,820 --> 00:09:46,130 una proprietà type , è possibile denominare questo ID o identificatore o come si desidera, ma 125 00:09:46,130 --> 00:09:52,010 qui uso il tipo perché in realtà controllo la proprietà type all'interno della mia funzione di riduzione e 126 00:09:52,010 --> 00:09:59,260 questa funzione di riduzione verrà eseguita per ogni nuova azione inviata. Quindi, se torno laggiù, il tipo sarà l'aggiornamento del 127 00:09:59,500 --> 00:10:07,650 riduttore o forse un nome migliore sarebbe in realtà l'aggiornamento del modulo, penso, quindi è anche quello che userò qui 128 00:10:07,650 --> 00:10:10,830 ovviamente e qui, quindi aggiornamento del modulo, forse 129 00:10:10,830 --> 00:10:18,750 input del modulo aggiornamento, il nome ovviamente dipende da te, ma dovrebbe essere chiaro su ciò che fa, quindi qui, 130 00:10:18,750 --> 00:10:19,790 avrò 131 00:10:19,800 --> 00:10:22,110 anche l'aggiornamento di input del modulo, 132 00:10:22,180 --> 00:10:23,280 sì, sembra buono. 133 00:10:23,280 --> 00:10:24,510 Quindi, aggiornamento dell'input 134 00:10:24,510 --> 00:10:26,120 del modulo, è quello che 135 00:10:26,130 --> 00:10:27,600 ho spedito laggiù, dobbiamo cambiarlo 136 00:10:27,600 --> 00:10:33,100 anche qui e ovviamente puoi anche passare qualsiasi altro dato che potresti voler usare all'interno del tuo 137 00:10:33,210 --> 00:10:38,250 riduttore e ho altri dati che voglio uso. Questo sarebbe il valore e chiamerò questo valore 138 00:10:38,250 --> 00:10:39,270 qui, questa proprietà, 139 00:10:39,300 --> 00:10:40,730 puoi nominarlo come vuoi, è 140 00:10:40,740 --> 00:10:42,390 il testo che è stato 141 00:10:42,420 --> 00:10:48,490 inserito, quindi lo inoltro al riduttore in modo che possiamo memorizzarlo nel nostro stato lì e la validità di 142 00:10:48,490 --> 00:10:49,400 questo input. 143 00:10:49,470 --> 00:11:02,110 Quindi quindi qui, aggiungerò effettivamente un prop è valido che inizialmente diciamo che è falso e ora rimuoverò questo altro caso e controllerò se qui siamo maggiori di zero, il che 144 00:11:02,110 --> 00:11:07,480 significherebbe che dovrebbe essere vero perché poi ho impostato è valido uguale a 145 00:11:07,480 --> 00:11:12,850 vero, altrimenti rimarrà falso e con ciò, possiamo anche aggiungere è valido 146 00:11:12,850 --> 00:11:19,050 come chiave per l'azione e inoltrare il valore memorizzato all'interno della nostra è una variabile 147 00:11:19,060 --> 00:11:20,230 valida e 148 00:11:20,350 --> 00:11:26,320 questo sarà inizialmente falso ma se la nostra lunghezza di input per il titolo è 149 00:11:26,320 --> 00:11:35,230 maggiore di zero, quindi sarà effettivamente vero e ora ovviamente dobbiamo anche far sapere al nostro riduttore quale input ha innescato questo. 150 00:11:35,330 --> 00:11:43,730 Quindi aggiungerò un campo ID di input qui o semplicemente input, qualunque cosa ti piaccia e uso il titolo qui e questa chiave 151 00:11:43,730 --> 00:11:49,670 qui dovrebbe essere una chiave che hai anche all'interno del tuo stato, come qui in valori 152 00:11:49,790 --> 00:11:54,800 di input e validità di input perché ciò consentirà scrivere un codice 153 00:11:54,890 --> 00:12:01,920 riduttore che faremo presto che è altamente riutilizzabile e altamente flessibile perché ora possiamo fare il passo successivo e 154 00:12:01,920 --> 00:12:09,210 assicurarci di trasformarlo in una funzione che funziona effettivamente per tutti gli input e che è davvero flessibile riguardo come 155 00:12:09,210 --> 00:12:10,080 lo usiamo.