Ora siamo davvero vicini alla fine di questo modulo, quindi dobbiamo assicurarci che ora inviamo le azioni per
creare un nuovo prodotto o per aggiornare un prodotto e
quindi prima di tutto dobbiamo aggiungere queste azioni qui nella nostra cartella delle azioni .
Esporterò quindi una costante qui, creerò un prodotto come questo qui, creerò un prodotto e poi anche qui, un altro identificatore per l'aggiornamento in un
prodotto con un prodotto di aggiornamento e aggiornerò un prodotto come questo e creerò creatori di azioni adeguate o
creeremo un prodotto e ora tocca a te come vuoi strutturarlo, quali dati ti aspetti di ottenere
quando crei un prodotto.
Sono un fan della creazione del prodotto proprio qui nell'azione o nel riduttore, quindi
in realtà mi aspetto di ottenere un titolo qui, una descrizione, un URL di immagine e un prezzo diciamo
e quindi restituisco un oggetto azione in cui il tipo è creare un prodotto e i dati del prodotto sono semplicemente tutti quei
dati uniti.
Quindi qui ho il mio titolo che è mappato al titolo che otteniamo come argomento, descrizione mappata alla
descrizione e quindi possiamo anche usare un moderno collegamento Javascript dove se
il nome della proprietà e il nome della
variabile valore sono gli stessi, puoi semplicemente scrivere in questo modo, quindi se
è uguale al prezzo:
prezzo, possiamo semplicemente scriverlo qui, ovviamente è anche possibile per titolo e descrizione in modo da mappare tutti questi
argomenti in proprietà con lo stesso nome in questo oggetto e se aggiorniamo un prodotto relativamente uguale, aggiorna il prodotto, quindi generalmente
possiamo copiarlo, ma c'è una differenza importante. Qui abbiamo anche bisogno dell'ID del prodotto che deve cambiare, quindi lo
otteniamo come argomento aggiuntivo e possiamo archiviarlo nella nostra azione quindi in una proprietà separata del nostro oggetto azione. Ora nel riduttore, ovviamente,
dobbiamo gestirlo,
dobbiamo gestire la creazione e l'aggiornamento. Quindi aggiungiamo un nuovo caso qui nel riduttore di prodotti per creare
un prodotto e per questo, assicurati di importare creare un prodotto da azioni prodotti e ovviamente uno per l'aggiornamento di
un prodotto con aggiornamento del prodotto, assicurati di importare anche quello.
Nel creare un prodotto, ovviamente dobbiamo creare un nuovo prodotto e lo memorizzerò in una costante qui con la nuova
parola chiave nel modello di prodotto che abbiamo creato
in precedenza, per questo devi solo assicurarti di importare questo modello di prodotto da la cartella dei modelli e quel prodotto
qui ricevono un ID che per ora può essere generato manualmente con una nuova data nella stringa per avere una
sorta di ID fittizio univoco pseudo per il momento successivo, questo verrà generato su un server ma non lo
abbiamo ancora .
L'ID proprietario per ora è codificato su U1 perché al momento non abbiamo utenti in questa app ma
titolo e così via possono essere popolati con i dati dell'azione perché nell'azione per la creazione di un prodotto abbiamo
la chiave dati del prodotto e che contiene un oggetto con titolo, descrizione,
imageUrl e prezzo e sono dati
che ora possiamo recuperare.
Quindi qui per il titolo, otteniamo i dati di azione del prodotto. titolo, per imageUrl, è azione. dati del
prodotto. imageUrl, non sorprende per la descrizione, è azione. dati del prodotto. descrizione e per
il prezzo, è azione. dati del prodotto. prezzo. Questo è ora un nuovo prodotto che creo.
Ora dobbiamo aggiungerlo al nostro negozio restituendo qui il nostro stato aggiornato, dove prima di tutto copio lo stato
esistente e ora devo aggiungerlo sia ai prodotti disponibili che ai prodotti utente perché l'abbiamo
creato, quindi sicuramente appartiene per noi, quindi deve far parte sia degli array che dei prodotti disponibili, quindi lì
possiamo prendere questi prodotti disponibili che abbiamo ottenuto e usare concat per ottenere un nuovo array che è
il vecchio array più aggiungere un nuovo elemento e qui, il nuovo prodotto è quel nuovo elemento e io facciamo esattamente
la stessa cosa qui per i prodotti degli utenti.
Quindi qui utilizzo prodotti per utenti di stato e concedo il mio nuovo prodotto. E che dire dell'aggiornamento? Per l'aggiornamento, dobbiamo prima di tutto
trovare l'indice del prodotto corrente, quindi l'indice del
prodotto potrebbe essere un nome costante che può essere trovato accedendo ai nostri prodotti utente e lì con l'indice di ricerca che
è un metodo Javascript incorporato, possiamo trovare l'indice di un certo elemento.
Ancora una volta, questa assume una funzione che viene eseguita su ogni elemento in quell'array e che deve
restituire true in modo da avere un indice e lì cercherò gli ID e cercherò gli ID
dove è uguale al mio pid,
la mia azione pid perché se ti ricordi come abbiamo impostato quell'azione, per l'aggiornamento abbiamo qui il campo pid
che contiene gli ID prodotto che stiamo ottenendo.
Quindi sto cercando quel prodotto e quindi memorizzo l'indice di quel prodotto nella matrice dei
prodotti dell'utente nell'indice del prodotto qui,
ora possiamo creare un prodotto aggiornato qui che è tecnicamente un nuovo oggetto prodotto ma ovviamente
prepopolato con alcuni vecchi dati,
ad esempio conserviamo
l'ID, quindi intraprendiamo un'azione pid come valore qui.
Conservo anche l'ID proprietario e, per questo, posso accedere ai prodotti utente di stato per l'indice che
abbiamo appena scoperto, quindi per quell'indice di prodotto,. ownerID, non lo cambierò.
Naturalmente memorizzerò il nuovo
titolo, quindi qui memorizzerò l'azione. dati del prodotto. titolo, memorizzerò il nuovo imageUrl, quindi azione. dati del
prodotto. imageUrl e io memorizzeremo
una nuova descrizione, quindi azione. dati del prodotto. descrizione. Tuttavia, ho menzionato che il prezzo non dovrebbe essere
modificabile, quindi come valore per questo, manterrò il prezzo originale, quindi indica l'indice del prodotto dei prodotti dell'utente. prezzo qui.
A proposito, ciò significa anche che la nostra azione non è del tutto corretta, lì mi aspetto anche un prezzo, non dovrei
farlo perché non possiamo inserirlo comunque nei nostri input, non ne abbiamo bisogno, quindi non dovremmo aspettiamolo qui, non dovremmo inoltrarlo come parte dei
dati del prodotto per l'aggiornamento del prodotto, per un nuovo prodotto ne abbiamo bisogno ma per l'aggiornamento no.
Quindi, con questo, abbiamo il nostro prodotto aggiornato con alcuni nuovi dati e alcuni vecchi
dati, ora abbiamo bisogno di aggiornare il nostro stato ovviamente e per questo, abbiamo i prodotti utente aggiornati dove alla fine copio i miei prodotti
utente esistenti con questa sintassi qui per creare una copia e quindi ho impostato i prodotti utente aggiornati per l'indice
del prodotto selezionato uguale al prodotto aggiornato, quindi sostituisco il prodotto in questo indice con il nuovo prodotto aggiornato nella mia copia,
non nella matrice originale ma nella mia copia. Devo fare lo stesso nei prodotti disponibili,
ma prima di tutto ho bisogno di trovare l'indice perché quell'indice qui funziona
solo per i prodotti dell'utente, è molto probabile che l'indice nei prodotti
disponibili sia diverso, quindi ho i miei disponibili indice del prodotto qui se si desidera chiamarlo in
questo modo, che generalmente ha la stessa logica di selezione, quindi possiamo copiarlo, ma
ovviamente esaminerò l'array di prodotti disponibili anziché l'array di prodotti dell'utente. E ora di nuovo, qui possiamo avere i prodotti disponibili
aggiornati in cui copio i miei prodotti disponibili di stato e quindi ho impostato i prodotti disponibili aggiornati
per l'indice di prodotto dato uguale, mi scusi per l'indice di prodotto disponibile ovviamente uguale al prodotto aggiornato, in modo che
Sostituisco il mio prodotto esistente con il prodotto aggiornato in entrambi i
prodotti disponibili e l'array di prodotti dell'utente. Bene e ora, dobbiamo solo restituire il nostro nuovo
stato, prima di tutto copiare quello esistente e ora impostare i prodotti disponibili uguali ai prodotti disponibili aggiornati e impostare i prodotti utente uguali
ai prodotti utente aggiornati, quindi per i miei array aggiornati sto configurando Là. Con ciò, speriamo di avere tutta la logica di cui abbiamo bisogno, ora
spediamo questi eventi dalla schermata del prodotto aggiunto. Quindi qui dobbiamo importare utilizzare l'invio da
React Redux e importare le nostre azioni, quindi importa tutto come azioni dei prodotti dalla cartella
del negozio, lì dalla cartella delle azioni e lì dal file dei prodotti e quindi spedisci queste cose
nel gestore di invio, ovviamente. Qui, ciò che inviamo dipende dal fatto che stiamo
modificando o aggiungendo
amd come ho già detto, possiamo scoprire qual è il caso con l'aiuto del prodotto modificato, se
è impostato, stiamo modificando, se non è impostato, siamo aggiungendo.
Quindi qui, nel gestore di invio, possiamo aggiungere un controllo if e verificare se il prodotto modificato, se impostato, stiamo
modificando,
quindi quindi voglio inviare il mio evento di aggiornamento del prodotto, per quello, prima di tutto, io ho
bisogno di creare quella funzione di spedizione con l'aiuto di usa la spedizione e ora con quella creata, laggiù possiamo chiamare le
azioni dei prodotti di spedizione aggiornare il prodotto perché è quello che stiamo facendo
qui e ora inoltrare tutti
i dati di cui abbiamo bisogno
che è il mio ID prodotto , questo è l'ID del
prodotto che stiamo modificando, lo stiamo estraendo qui e, naturalmente, inoltre, inoltriamo anche il titolo, inoltriamo la descrizione, tutte queste
costanti di stato che abbiamo qui, il nostro imageUrl e non il prezzo perché noi non ne ho bisogno e nell'altro caso qui, ciò
significa che stiamo aggiungendo,
quindi voglio inviare l'azione dei prodotti. creare un prodotto,
qui inoltriamo titolo, descrizione, imageUrl e anche il prezzo e, con ciò, dovremmo avere una configurazione
in cui speriamo di poter aggiungere e modificare prodotti.
Quindi
salviamo questo e diamo un'occhiata. Se ora andiamo nell'area di amministrazione qui e ho aggiunto questo e aggiungo
un punto esclamativo qui e anche uno qui nella descrizione e premo Salva, ottengo indefinito non è un oggetto, valutando il prezzo degli
oggetti di scena su fisso.
Quindi sembra che abbia perso il mio prezzo qui quando ho provato ad aggiornarlo.
Bene, prima di risolvere questo problema, vediamo se l'aggiunta di un nuovo prodotto funziona affatto.
Se aggiungo un prodotto qui con test, test che ovviamente non è un imageUrl valido,
quindi non vedremo un'immagine ma almeno sorseggeremo qualcosa, anche questo è un test.
Se proviamo questo e premo invio, anche questo non funziona,
quindi in qualche modo il risparmio del
prezzo non funziona e penso che il problema sia ovviamente qui, il problema qui è che il prezzo è
in realtà una stringa qui ma dovrebbe essere un numero, quindi possiamo facilmente convertirlo in
un numero aggiungendo un plus qui prima di passarlo per creare un prodotto, per aggiornarlo d'altra parte, se diamo un'occhiata al nostro riduttore di prodotti,
normalmente dovrebbe mantenere il prezzo che aveva già .
Quindi vediamo se quel plus lo risolve per l'aggiunta o se c'è anche un problema diverso, questa è stata una modifica che è
comunque richiesta, ma vediamo se c'è un altro problema. Quindi prova, prova, dodici per
favore inserisci solo i numeri qui, non un testo che potresti attualmente ma che
potrebbe romperlo, prova questo, premi questo pulsante, sì che non sembra male, abbiamo qualche problema con l'immagine qui ma
se scorriamo verso il basso, in realtà qui se lo ignoriamo, possiamo vedere qui il
nostro prodotto, quindi il prezzo manca, quindi qualcosa non
va lì e anche noi non sembriamo salvare l'immagine
correttamente, non solo perché non viene visualizzata ma a
causa di quell'avvertimento che abbiamo ricevuto
ma generalmente funziona.
Tuttavia, ad esempio, se provo ad aggiornare e salvare questo, riceviamo ancora un errore, quindi
c'è ancora qualcosa di sbagliato.
Quindi una cosa che non va è nelle azioni ovviamente, per aggiornare il prodotto qui, il tipo dovrebbe essere aggiornare il
prodotto e non creare il
prodotto, altrimenti attiviamo un'azione sbagliata nel riduttore che spiega l'errore di prezzo che abbiamo ottenuto lì.
Quindi questo deve essere un aggiornamento del prodotto qui per l'aggiornamento di un prodotto non sorprende.
Quindi questo è un problema, ma un altro grosso problema può essere trovato nella schermata del prodotto aggiunto. Uso qui il mio metodo di callback per
avvolgere correttamente il gestore di invio e lo faccio
per evitare ricreazioni inutili delle funzioni.
Il problema è che inizialmente ho impostato questo per avere un array vuoto come elenco di dipendenze, il che significa
che questo non viene mai ricreato, il che ha senso quando abbiamo solo il login
della console lì, ma ora stiamo facendo cose lì e ora abbiamo effettivamente dipendenze.
In questo momento non ho mai ricreato questa funzione, il che significa che non viene mai ricreata per i suoi valori aggiornati.
Pertanto, quando inviamo il nostro modulo, non prendiamo mai in considerazione ciò che l'utente ha inserito.
Quindi in realtà ora
dobbiamo specificare le dipendenze qui, la funzione di invio ma, soprattutto, l'ID prod, il titolo, la descrizione
e l'immagineUrl e ovviamente anche il prezzo. Ora, se lo salviamo, dovremmo andare bene e tutti i problemi
dovrebbero essere eliminati.
Quindi aspettiamo che
questo si ricarichi, vai su admin ora e iniziamo a modificarlo forse e ora se aggiungiamo un punto esclamativo nel titolo e
nella descrizione e salviamo questo e torniamo indietro, vediamo che qui e se andiamo ai prodotti , lo vediamo
anche qui e nei dettagli, vediamo anche quel punto esclamativo.
Ora, se torniamo all'amministratore e creiamo un
nuovo prodotto, test,
test, dodici, test questo e lo salvo e torno indietro, ora
anche questo appare laggiù. Ovviamente l'immagine non viene visualizzata
perché non abbiamo inserito un URL valido ma vengono visualizzati tutti gli altri
dati, quindi in genere funziona e ovviamente potresti inserire un
URL di immagine valido e che si interromperebbe, proviamo rapidamente questo anche. Quindi torniamo alla sezione di amministrazione e forse aggiungiamo uno scaffale qui, per
questo ho selezionato l'URL di uno scaffale che ho trovato su Internet per 199. 99, questa è una bella
mensola come questa. Se ora salviamo questo e torniamo indietro, sembra buono, ecco la
nostra immagine e vediamo anche qui sullo schermo del prodotto e possiamo vederlo anche qui.
Quindi questo
sembra funzionare e con quello, generalmente abbiamo una configurazione che funziona.
Ora ci sono cose minori su cui voglio lavorare, ad esempio prima di eliminare, sarebbe
bello avere una piccola finestra di dialogo di conferma e, inoltre, voglio assicurarmi che quando abbiamo aggiunto o modificato un prodotto, quando
facciamo clic su Salva qui, torniamo automaticamente indietro.
Quindi queste sono solo cose secondarie, ovviamente, ma penso che siano un bel finale qui in questo modulo.