Il nostro approccio qui ovviamente funziona. Stiamo memorizzando gli input in alcuni stati, stiamo
memorizzando la validità in alcuni stati e potremmo fare questa gestione della validità per tutti i nostri input qui e semplicemente avere le
nostre diverse funzioni di gestione dei cambiamenti qui per i nostri diversi input, che funzionerebbe.
Una nota importante tra l'altro prima di andare avanti, poiché controllo la validità del titolo qui
nel gestore di invio, ovviamente dovremmo anche aggiungerlo lì
come dipendenza, quindi il titolo è valido deve essere aggiunto lì come dipendenza nel callback dell'uso array di
dipendenze, questo è
importante, altrimenti questa funzione non verrà ricostruita quando la validità cambia,
il che significa che non saremo in grado di inviarlo in seguito. Il problema con il nostro approccio attuale
è che gestiamo stati diversi per memorizzare l'input per i diversi input e quindi abbiamo anche stati di
validità diversi, almeno potenzialmente se iniziamo a gestire la nostra validità, come questa
e per forme molto grandi, ovviamente questo significa molta copia e incolla, molta gestione statale.
Ora, se hai molti stati che sono in qualche modo connessi, puoi anche farlo in un modo più elegante, invece
di avere i tuoi stati separati per ogni
input, puoi avere un grande stato che unisce tutti i valori di input e che unisce tutte le
validità e quindi utilizzare un concetto chiamato riduttore, non un riduttore Redux ma supportato da React pronto all'uso per gestire
quello stato.
Puoi farlo con il gancio del riduttore che non ha nulla a che fare con Redux, il
concetto di riduttore non è esclusivo di Redux, un riduttore alla fine è solo una funzione che prende input e sputa un
po 'di output e quindi React supporta anche questo e vedrai come puoi usarlo in
questa lezione ora.
Allora, qual è l'idea di un riduttore? Ora prima è importante capire che
l'uso del riduttore è un gancio che ti aiuta a gestire lo stato. In genere lo si utilizza se si dispone
di stati connessi o di uno stato più complesso e non si desidera disporre di un gruppo di chiamate di stato
per uso individuale e di un gruppo di singoli stati gestiti. È quindi possibile utilizzare il riduttore ed ecco
come funziona.
Inizi a creare un riduttore, diciamo un riduttore di forma qui, puoi nominarlo come vuoi e tieni presente che lo creo al di
fuori del mio componente di modulo, potresti farlo lì ma se non
dipendi da oggetti di scena, tu puoi farlo al di fuori di lì in modo che questo
non si ricostruisca con ogni ciclo di nuovo rendering e non devi nemmeno usare l'uso del callback che ovviamente
costa anche delle prestazioni se lo usi. Quindi usalo fuori da lì, costruiscilo
fuori da lì per evitare inutili ricreazioni di quella funzione e ora il riduttore, proprio come
un riduttore Redux ottiene lo stato corrente e un'azione, ma di nuovo non è correlato a Redux, non è usato da Redux,
il riduttore funziona sempre in questo modo. Ora, di nuovo, proprio come in
un riduttore Redux perché, di nuovo, funzionano in questo modo, puoi controllare diversi
tipi di azioni e qui voglio controllare un tipo, anche questo
usa solo
un'istruzione if, puoi usare un'istruzione switch case
anche e che controllo l'azione. digitare qui dipende totalmente
da me, puoi nominarlo come vuoi perché sarai tu a inviare l'azione
in seguito e qui controllo l'azione di aggiornamento che è anche un identificatore che ho
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
del riduttore, ad esempio l'identificatore di aggiornamento del riduttore come questo e utilizzalo qui se lo
desideri e puoi nominarlo come preferisci.
Quindi ora sto verificando questa azione e se si verifica questa azione, voglio archiviare un valore di input e convalidarlo, ma per capirlo,
dobbiamo capire come utilizziamo il riduttore di modulo.
Quindi lasciamolo così per il momento e scendiamo al componente stesso, lì iniziamo a
impostare il nostro stato del modulo quaggiù, quindi qui
voglio chiamare il riduttore utente e ora usare il riduttore prendere una tale funzione del riduttore quindi passerò il
mio riduttore di forma che ho installato qui e che è ancora incompiuto.
Usa il riduttore prende anche qualche secondo argomento facoltativo che è lo stato
iniziale che vuoi passare e che può essere qualsiasi cosa ma qui passerò un oggetto
Javascript e lo stato iniziale che voglio usare qui è alla fine un oggetto che ha valori di input, che
poi è
l'ennesimo oggetto nidificato che presto popolerò, input di validità che è anche un oggetto nidificato e
forse una validità complessiva del modulo, lo
chiamerò form valido, che inizialmente è falso diciamo. Quindi questo è ora il mio stato iniziale in cui passo
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
dipende da te come lo chiami, che inizialmente
è una stringa vuota, diciamo, questi saranno i valori iniziali che voglio impostare sui miei input, questo sarà
nel sostituisco la mia gestione dello stato laggiù, dove memorizzo manualmente i miei input in diversi stati.
Ora unirò tutto in un oggetto gestito attraverso quel riduttore.
Quindi ho il mio titolo qui e in realtà non è sempre vuoto ovviamente ma in realtà
è vuoto solo se non
abbiamo prodotti modificati, quindi copierò questo controllo da lì e lo userò qui.
Ora lo stesso ovviamente per imageUrl, lì ho inizializzato
questo con il prodotto modificato. imageUrl se è disponibile e altrimenti uso
una stringa
vuota, praticamente anche quello che ho fatto laggiù.
E ovviamente faccio lo stesso per la descrizione, qui voglio
controllare se il prodotto modificato è impostato e uso questa descrizione o lo metto
su una stringa vuota se non è disponibile. Ora, ultimo ma non meno importante, abbiamo il prezzo e
lì ho sempre una stringa vuota perché o non ne
abbiamo bisogno nel caso di un prodotto modificato, quindi non mi
interessa il suo valore o ne
abbiamo bisogno, beh quindi voglio inizializzarlo comunque con un valore vuoto. Ora ovviamente ogni input ha anche una validità, quindi possiamo aggiungere un titolo
qui e ancora controllare se il prodotto
modificato è impostato, se è impostato, quindi so
che sto modificando, quindi avremo prepopolato il titolo, quindi
inizialmente essere valido, quindi
in questo caso il mio valore iniziale sarebbe vero,
altrimenti sarà falso e ora anche questo è qualcosa che possiamo ripetere per imageUrl. Se abbiamo un prodotto modificato, sappiamo che era
prepopolato,
quindi sarà inizialmente valido, quindi lo impostiamo su
true, altrimenti lo imposterò su false.
Per la mia descrizione qui, è lo stesso - vero o falso e
per il prezzo, è un
po 'uguale, ovviamente non prepopoliamo il prezzo
se stiamo modificando ma se stiamo modificando non mi interessa comunque il prezzo perché non sarà modificabile.
Quindi so che se sto modificando, dovrei considerare questo come valido perché non può essere modificato
comunque e quindi non
mi interessa questo input ma non voglio bloccare l'invio del modulo a causa dell'impostazione su false quando non posso modificarlo comunque.
Quindi lo imposterò su true se questo non è pianificato per essere modificato, se
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
prezzo verrà essere vuoto inizialmente, è quello che stiamo allestendo qui. E ora la validità complessiva del modulo, bene
ancora una volta posso controllare
se abbiamo un prodotto modificato, il che significa che stiamo modificando, quindi il modulo è vero,
il modulo è valido inizialmente, altrimenti è
falso inizialmente se stiamo aggiungendo un nuovo prodotto . Ora questo è il mio stato iniziale
qui, ora questa funzione di riduzione dovrebbe essere in grado di cambiare quello stato quando vengono
inviate le azioni e un'azione dovrebbe essere inviata qualunque
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
quindi possiamo anche sbarazzarci dell'intera importazione dello stato d'uso e assicurarci di inviare l'azione di aggiornamento del riduttore per
ogni sequenza di tasti che facciamo in un input.
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
il momento, invece laggiù, voglio inviare l'aggiornamento del riduttore e ora
questo viene fatto con il risultato della chiamata dell'utilità di riduzione perché l'uso dell'utilità di riduzione ovviamente restituisce
qualcosa, proprio come ha fatto lo stato d'uso. Restituisce anche un array con esattamente due elementi
e quindi possiamo distruggerlo con questa sintassi di destrutturazione dell'array che abbiamo anche usato nello
stato d'uso e lì ottengo il mio stato del modulo come primo valore e una funzione di invio come
secondo valore.
Questo è sempre ciò che il riduttore ti restituirà, un'istantanea dello stato che si aggiorna ogni volta che lo cambi ovviamente, quindi
ogni
volta che lo cambi, questo componente renderà di nuovo e ti darà una nuova istantanea dello stato e
una funzione, l'invio alla fine è una funzione che ti consente di inviare azioni contro questo riduttore.
Certo, puoi nominare questi due elementi come vuoi, ma penso che questa sia
una denominazione sensata, questa
è la nostra istantanea di stato, questa è una funzione. Ora la spedizione è un nome che ho già usato qui da Redux,
quindi qui darò un nome a questo stato del modulo di spedizione per evitare uno scontro di
nomi, puoi nominarlo come vuoi.
Quindi ora lo stato del modulo di spedizione può essere utilizzato qui nel mio gestore di modifica del titolo, lo
chiamo e devo passare lì un oggetto che descriva la mia azione e questo oggetto avrà una proprietà
type, non devi avere
una proprietà type , è possibile denominare questo ID o identificatore o come si desidera, ma
qui uso il tipo perché in realtà controllo la proprietà type all'interno della mia funzione di riduzione e
questa funzione di riduzione verrà eseguita per ogni nuova azione inviata. Quindi, se torno laggiù, il tipo sarà l'aggiornamento del
riduttore o forse un nome migliore sarebbe in realtà l'aggiornamento del modulo, penso, quindi è anche quello che userò qui
ovviamente e qui, quindi aggiornamento del modulo, forse
input del modulo aggiornamento, il nome ovviamente dipende da te, ma dovrebbe essere chiaro su ciò che fa, quindi qui,
avrò
anche l'aggiornamento di input del modulo,
sì, sembra buono.
Quindi, aggiornamento dell'input
del modulo, è quello che
ho spedito laggiù, dobbiamo cambiarlo
anche qui e ovviamente puoi anche passare qualsiasi altro dato che potresti voler usare all'interno del tuo
riduttore e ho altri dati che voglio uso. Questo sarebbe il valore e chiamerò questo valore
qui, questa proprietà,
puoi nominarlo come vuoi, è
il testo che è stato
inserito, quindi lo inoltro al riduttore in modo che possiamo memorizzarlo nel nostro stato lì e la validità di
questo input.
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
significherebbe che dovrebbe essere vero perché poi ho impostato è valido uguale a
vero, altrimenti rimarrà falso e con ciò, possiamo anche aggiungere è valido
come chiave per l'azione e inoltrare il valore memorizzato all'interno della nostra è una variabile
valida e
questo sarà inizialmente falso ma se la nostra lunghezza di input per il titolo è
maggiore di zero, quindi sarà effettivamente vero e ora ovviamente dobbiamo anche far sapere al nostro riduttore quale input ha innescato questo.
Quindi aggiungerò un campo ID di input qui o semplicemente input, qualunque cosa ti piaccia e uso il titolo qui e questa chiave
qui dovrebbe essere una chiave che hai anche all'interno del tuo stato, come qui in valori
di input e validità di input perché ciò consentirà scrivere un codice
riduttore che faremo presto che è altamente riutilizzabile e altamente flessibile perché ora possiamo fare il passo successivo e
assicurarci di trasformarlo in una funzione che funziona effettivamente per tutti gli input e che è davvero flessibile riguardo come
lo usiamo.