Per il pulsante Elimina, ricominciamo con la logica Redux.
Quindi qui nelle azioni, ad esempio, possiamo registrare un nuovo identificatore, rimuovere dal carrello suona come un
nome appropriato dato che avevamo aggiunto al carrello prima, quindi rimuovere dal carrello.
Aggiungerò anche qui una funzione di creatore di azioni, rimuoverla dal carrello.
Questo ora richiede solo l'ID del prodotto che dovrebbe essere rimosso, quindi solo l'ID prodotto e
quindi restituisce un nuovo oggetto azione in cui il tipo di corso viene rimosso dal carrello e dove abbiamo il pid,
l'ID prodotto, dove inoltro il ID prodotto Sto arrivando qui. Ora nel riduttore, abbiamo aggiunto la
custodia al carrello, ora dobbiamo semplicemente aggiungere un
altro caso qui e quella custodia è la
custodia da rimuovere dal carrello.
Per questo, devi assicurarti di importare l'identificatore dell'azione rimosso dal carrello dal file delle
azioni del
carrello e nel caso di
rimozione dal carrello qui, abbiamo di nuovo due casi.
Uno è che nel carrello c'era un solo articolo di quel prodotto, come per
il tappeto blu,
in questo caso dobbiamo rimuoverlo completamente dall'oggetto
carrello, quindi
da questo oggetto e questo lo rimuoverà quindi da questa riga che abbiamo prodotto qui.
Se abbiamo due o più articoli, vogliamo solo ridurre la quantità di 1.
Ovviamente potresti sempre cancellare completamente questo elemento se lo volessi, ma voglio mostrarti come
potresti distinguere tra questi due casi.
Quindi in realtà se abbiamo una quantità superiore a una, non voglio cancellare l'articolo dal carrello, ma
in realtà ridurre la quantità di 1.
Quindi, per rimuovere dal carrello, dobbiamo scoprire qual è la nostra quantità. Quindi la nostra quantità attuale che conservo in questa costante
può essere dedotta dal nostro stato ovviamente, lì negli articoli, dobbiamo trovare il prodotto che stiamo cercando e ovviamente
possiamo farlo con l'aiuto dell'ID
che è parte della nostra azione qui nel campo pid perché ora state items
è un oggetto e quindi possiamo accedere all'azione. pid qui, giusto.
Questo accederà dinamicamente al valore con la chiave ID prodotto qui nel nostro articolo, quindi con
l'ID prodotto stiamo entrando
in questa azione e questo è il modo
in cui aggiungiamo articoli al nostro oggetto articoli qui a destra.
Usiamo il nostro ID prodotto come identificatore, questo
è quello che uso qui per accedervi.
Questo avrà una quantità perché conterrà un valore che è un articolo del prodotto, puoi ovviamente
aggiungere anche un controllo se questo articolo è effettivamente parte del carrello ma il
modo in cui costruiamo questa app, non dovremmo mai essere in grado di raggiungere questo azione senza che quel
prodotto faccia parte del carrello perché possiamo solo attivare la nostra azione di eliminazione qui all'interno della schermata del carrello,
quindi non è necessario controllare qui, ma è necessario ottenere la quantità.
Ora possiamo verificare se la quantità corrente è maggiore di 1, il che significa che
dobbiamo ridurla, dobbiamo ridurla, non cancellarla,
altrimenti dobbiamo cancellarla.
Ora cominciamo con il caso di cancellazione.
Quindi qui dobbiamo solo restituire un nuovo oggetto oggetti che include tutti gli oggetti
vecchi ma non include più questo oggetto. Quindi possiamo avere i nostri articoli del carrello aggiornati qui in cui
cloniamo articoli di stato, come questo e ora per rimuovere una proprietà, possiamo usare la parola chiave di eliminazione che Javascript conosce e lì, possiamo eliminare gli
articoli del carrello aggiornati per l'azione. pid.
Quindi questo eliminerà questo articolo dal nostro oggetto Javascript copiato qui, eliminerà completamente questo articolo, questo articolo del prodotto interamente
dal nostro oggetto articoli del carrello. Ecco come possiamo cancellarlo. Ora nell'altro caso che dobbiamo semplicemente
ridurlo, posso avere il mio articolo carrello
aggiornato, in modo che quel singolo articolo carrello in cui creo un nuovo articolo carrello con
la classe articolo carrello e lì, voglio copiare i valori dell'esistente carrello ma semplicemente ridurre la quantità.
Quindi l'articolo del carrello prende la quantità proprio come
i primi valori, quindi ora l'obiettivo è quello di ottenere l'accesso agli articoli dello stato per l'ID prodotto che
ottengo sull'azione e poiché ripetere questo sarà ingombrante, lo conserverò in un aiuto una costante , l'articolo carrello selezionato è questo
qui, ora possiamo sostituirlo qui con l'articolo carrello selezionato e
qui posso usare cartItem selezionato. quantità meno una.
Ora ovviamente sappiamo che questo non sarà zero perché la quantità era maggiore di 1 e ora possiamo ovviamente conservare
il resto dei dati.
Quindi manteniamo il prezzo del prodotto qui, manteniamo il titolo del prodotto, che tutto non cambia, la
somma tuttavia ovviamente cambia e questa è
la somma, la vecchia somma meno il prezzo ovviamente, quindi
meno il prezzo del prodotto perché ne abbiamo rimosso uno articolo, dobbiamo ridurre la somma del prezzo di un articolo.
Ora questo articolo carrello aggiornato deve sostituire l'articolo corrente nel nostro oggetto articoli carrello. Affinché possiamo anche riutilizzare un po 'di codice, in realtà lo cambierò un
po' e creerò articoli del carrello aggiornati come variabili qui invece di una costante qui
nel blocco else, in modo che io aggiorni semplicemente questo valore di variabili, così che qui in il blocco
if, possiamo
anche usare lo stesso nome di variabile, articoli carrello aggiornati in cui ho impostato questo uguale a una copia degli
articoli esistenti ma poi sostituisco il mio pid di azione qui, quindi il mio ID prodotto, il mio identificatore, il valore lì con il articolo carrello aggiornato che è il
mio vecchio articolo carrello con la quantità e la somma aggiornate. Questi sono gli articoli del carrello aggiornati, ora
ovviamente
dovremo anche regolare l'importo totale del nostro stato, quindi dopo questo blocco
in caso contrario, restituiamo una copia dello stato, gli articoli possono essere impostati su articoli del carrello aggiornati e
ora importante, il l'importo totale può
essere impostato in modo da indicare l'importo totale meno il prezzo del prodotto dell'articolo
carrello selezionato poiché, proprio come ho aggiornato la somma per questo singolo articolo carrello, ovviamente anche la somma
totale del carrello deve essere regolata come tale. Ora possiamo provare a inviare questa azione di rimozione dal carrello.
Quindi andiamo alla schermata del carrello in cui alla fine ho questa funzione di rimozione e lì,
ora voglio inviare un'azione, quindi avrò bisogno dell'accesso
alla funzione di spedizione con l'aiuto del gancio di spedizione usa. Ora possiamo usarlo qui, accedervi chiamando semplicemente usa l'invio in questo modo e
quindi inviando questo laggiù.
La spedizione ora importa tutte le azioni di cui abbiamo bisogno, quindi importa tutto come azioni carrello dalla cartella del negozio, dal carrello azioni come questo, usando di nuovo questa importazione
in bundle che è totalmente opzionale, puoi anche scegliere come target le cose specifiche di cui hai bisogno, quindi
scegli come target creatori
di azioni, in questo caso la rimozione dal creatore di carrelli di cui avremmo bisogno e
poi laggiù, esegui semplicemente questo creatore di
azioni, nel mio caso usando le azioni di carrelli. removeFromCart, inoltra l'ID prodotto che ovviamente otteniamo
qui, è itemData. articolo.
e ora tieni presente che stiamo eseguendo il ciclo tra gli articoli di questa forma, quindi avremo un campo
ID prodotto lì dentro e quindi possiamo usarlo qui per inoltrarlo per rimuoverlo dal carrello, si spera
quindi che ci consenta di aggiornare Questo. E questo dovrebbe essere tutto, Redux dovrebbe
fare il resto dietro le quinte e dovrebbe ridare automaticamente lo schermo del carrello ogni volta
che il carrello cambia, quindi ogni volta che rimuoviamo gli articoli. Quindi ho aggiunto due camicie rosse e un tappeto blu e se
rimuovo
una maglietta rossa, anzi un problema che abbiamo sono gli interruttori dell'ordine,
dovremo risolverlo ma vedrai che la quantità è stata aggiornata correttamente.
Se lo rimuovo ora, anche l'importo totale viene aggiornato correttamente, se lo rimuovo ora, in effetti è andato completamente e
ora anche questo è disabilitato.
Quindi in genere funziona, ma ovviamente il passaggio dell'ordine, non è
qualcosa che voglio succedere qui.
Ora per evitare che l'ordine cambi, possiamo semplicemente andare alla schermata del carrello dove cambio i miei articoli per essere
un array e lì, dobbiamo solo assicurarci che questo array sia sempre ordinato allo stesso
modo perché questo selettore attivare e recuperare i nostri dati ogni volta che cambia il nostro stato Redux.
Quindi quindi qui, avremo sempre l'ultima istantanea dei dati che abbiamo dentro e quindi, è qui
che dobbiamo solo ordinarli allo stesso modo in ogni momento e quindi renderli sempre
allo stesso modo.
Quindi dobbiamo solo assicurarci che il nostro array di articoli del carrello trasformato sia ordinato chiamando ordina lì.
Se lo chiamo in questo modo, comincio ad aggiungere alcuni dati qui, ora vedi
che da solo non ha funzionato perché non gli stiamo
dicendo come ordinare e non sa come farlo per oggetti da la casella ma possiamo passare
una funzione per ordinare in cui confrontiamo sempre due elementi, a e b, tra
loro e quindi l'ordinamento deve restituire un numero
alla fine che determina ciò
che viene prima e lì, puoi ovviamente ordinare questo comunque vuoi, ad esempio per ID prodotto, quindi possiamo semplicemente restituire un confronto in
cui controlliamo l'ID prodotto A, confrontarlo con l'ID prodotto B e se è maggiore, quindi con un'espressione ternaria
qui, ne ho restituito uno, altrimenti restituisco meno uno .
Questa è la normale funzione di ordinamento fornita da Javascript e ora questo assicura che
ordiniamo sempre
allo stesso modo, quindi ora vedi se rimuovo questo, il corto rosso rimane al suo posto e quindi la nostra logica del carrello è finita.
Ora possiamo assicurarci di poter effettivamente anche fare clic sul pulsante di quell'ordine ora e lo aggiungiamo come un ordine
che in seguito possiamo visitare con l'utile cassetto qui che ci consente di andare alla schermata degli ordini
che ovviamente dobbiamo ancora Inserisci.