Quindi, ora che il componente dell'articolo del prodotto è stato riorganizzato, è ora di poter dire di eliminare
gli articoli perché è effettivamente tra le cose più semplici che possiamo fare.
Questo ci riporta a Redux e lì, ora è il momento di lavorare sui prodotti e
inizierò le azioni che
attualmente è un file vuoto, i prodotti. File js nella cartella delle azioni
in cui desidero esportare un'azione che ci aiuta a eliminare i prodotti. L'identificatore quindi si chiama semplicemente elimina prodotto e contiene un
testo di eliminazione del prodotto qui ed esporterò anche un creatore di azioni elimina prodotto che accetta l'ID prodotto, come questo e che quindi restituisce un oggetto
azione in cui il tipo è elimina prodotto e il pid, l'ID prodotto è semplicemente l'ID
prodotto inoltrato, in questo modo.
Ora nel riduttore, nel file dei riduttori dei prodotti, possiamo ascoltarlo perché al momento
non ci preoccupiamo mai di nessuna azione. Ora possiamo attivare il tipo di azione qui e gestire il caso in cui si tratta di eliminare il prodotto che
otteniamo dal nostro file di azione dei prodotti e quindi è necessario aggiungere tale importazione. In questo caso, è necessario rimuovere il
prodotto dall'array di prodotti dell'utente e, naturalmente, anche dall'array di prodotti disponibili perché viene
eliminato in generale, non solo nei nostri prodotti utente ma dall'intera
app.
Quindi qui,
restituirò un nuovo oggetto in cui copiamo lo stato esistente per essere sicuri che non perdiamo alcuno stato e ora i prodotti
dell'utente sono semplicemente stato. userProducts, quindi i vecchi
prodotti utente su cui possiamo filtrare, questo è un metodo Javascript incorporato che restituisce
un nuovo array, un nuovo array che fondamentalmente viene creato eseguendo una funzione su ogni elemento nel vecchio array e
se tale funzione restituisce true , manteniamo quell'elemento, se restituisce false lasciamo cadere l'articolo.
Quindi questo esegue una funzione in cui otteniamo il prodotto, questa funzione viene eseguita per noi da
Javascript per così dire e passa nell'elemento che sta attualmente dando un'occhiata a questa funzione.
Quindi otteniamo il prodotto per ogni prodotto nel nostro array di prodotti utente e vogliamo restituire l'ID prodotto, a differenza
dell'azione pid che è l'ID prodotto che vogliamo eliminare.
Ciò significa che fondamentalmente manterrà tutti i prodotti in cui gli ID non corrispondono, se corrispondono, sappiamo che
è il prodotto di cui vogliamo sbarazzarci
e quindi restituiamo
falso che significa nel nuovo array, non sarà incluso.
Ora è essenzialmente la stessa logica per i prodotti disponibili, non
ci resta che esaminare tutti i prodotti disponibili e filtrare lì il prodotto.
Questa è una modifica che dobbiamo apportare, un'altra modifica deve essere apportata nel carrello, tuttavia,
poiché quando eliminiamo un prodotto, è necessario rimuoverlo anche dal carrello perché altrimenti abbiamo un
prodotto nel carrello che non esiste più .
Quindi qui aggiungerò anche un caso per eliminare il prodotto e quindi è necessario importare il prodotto di eliminazione dai prodotti di azioni
nel carrello. Anche
js riduzione e qui,
dobbiamo assicurarci di rimuovere il prodotto dal carrello se è stato eliminato.
Quindi qui nel carrello, ovviamente otteniamo il nostro ID prodotto del prodotto che vogliamo
eliminare, è questo pid in quell'azione che viene spedito, quindi qui restituiamo un nuovo stato in cui vogliamo aggiornare il nostro carrello e l'importo totale
tale che il prodotto è sparito e sparito, intendo totalmente cancellato dal carrello,
non solo ridotto di uno ma totalmente cancellato. Quindi alla fine gli articoli sono una copia
degli
articoli esistenti senza quel prodotto, quindi creerò una nuova costante, articoli aggiornati in cui copio i miei articoli di stato
esistenti qui, come
questo e quindi elimino gli articoli aggiornati per l'azione pid, quindi elimino questo articolo dal carrello.
Naturalmente questo ha senso solo se questo articolo esiste nel carrello, quindi prima di tutto verificherò se dichiarare articoli per
azione pid, se restituisce qualcosa di significativo e se non è
il caso, allora restituirò semplicemente lo stato esistente perché poi ho finito con questo caso, non ho
bisogno di cambiare nulla nello stato, quindi restituirò lo stato esistente senza modifiche.
Se riesco a superare
questo controllo, quindi so che il prodotto con l'ID che stiamo per eliminare fa parte dell'articolo.
Quindi quindi continuo a copiare i miei articoli, quindi elimino il prodotto da lì, ma prima
di farlo, ottengo il totale dell'articolo accedendo agli articoli di stato per l'azione pid e quindi lì, ovviamente abbiamo questo, se diamo
un'occhiata al carrello modello di articolo Voglio dire, abbiamo questo campo somma qui, quindi alla
fine qui devo rimuovere la somma. Sono interessato alla somma perché ora posso aggiornare i miei
articoli laggiù con gli articoli aggiornati in cui l'ho eliminato con la parola chiave delete e l'importo totale del carrello è lo stato
totale meno il totale dell'articolo, quindi il totale di questo carrello oggetto che avevamo aggiunto prima. Quindi ora aggiorniamo il carrello in modo
appropriato
anche quando lo eliminiamo. Ora dobbiamo solo inviare questa
eliminazione, quindi torniamo ai
prodotti degli utenti, qui in eliminazione, vogliamo spedire. Quindi da React Redux possiamo importare use dispatch
per ottenere l'accesso alla funzione di spedizione qui chiamando
use dispatch come abbiamo fatto molte volte prima e poi qui, quando si preme delete, possiamo spedire la
nostra
azione e
per quello, ovviamente, abbiamo bisogno per importare questa azione, quindi facciamolo, importiamo forse tutto come azioni dei prodotti dalla cartella del negozio, lì dalla
cartella delle azioni e lì dal file dei prodotti e ora usiamo l'azione
dei prodotti laggiù quando spediamo questo per chiamare elimina prodotto e inoltra l'ID prodotto che
ovviamente è itemData. articolo. Id qui perché stiamo
esaminando tutti i prodotti qui e ciò significa sostanzialmente che ItemData. l'articolo fa riferimento alle istanze del nostro modello
di prodotto, ogni istanza ha una proprietà ID e la inoltriamo per eliminare il prodotto.
Quindi, se ci proviamo e andiamo all'amministratore e faccio clic su Elimina sulla maglietta rossa, in effetti è andata qui e
se torno ai prodotti, è andata anche qui.
Ora se ricarichiamo questo e aggiungo la maglietta rossa al carrello, la vedi qui, l'ho aggiunta due volte.
Ora se vado all'amministratore e lo elimino e torno ai prodotti e al carrello, il carrello è vuoto ora.
D'altra parte, se aggiungo diciamo ora il tappeto e la tazza di caffè, torna all'amministratore, elimina
il tappeto ma non la tazza di caffè, vedi nei prodotti, la tazza
di caffè è ancora nel carrello, quindi opera. A proposito, potresti notare che la tazza di caffè è un po 'tagliata qui,
è qualcosa che riparerò più tardi insieme al fatto che qui, in realtà, vediamo un segno negativo ora per il totale,
è anche qualcosa che risolverò in un secondo.
Prima di tutto assicuriamoci che nella
sezione admin possiamo comunque accedere alla schermata di modifica o che abbiamo anche un elemento lassù che ci consente di
aggiungere un nuovo prodotto.