Per assicurarci di poter avere anche ordini in questa applicazione, ripeteremo qualcosa che abbiamo fatto prima,
lavoreremo nella schermata degli ordini e lavoreremo sulla nostra logica Redux in modo da poter archiviare gli ordini.
Quindi inizierò aggiungendo
un nuovo riduttore, gli ordini. file js che contiene il nostro riduttore di ordini e ovviamente avremo anche bisogno di un file di
azioni in cui gestiamo le nostre azioni relative agli ordini, gli ordini. anche file js.
Quindi iniziamo con gli ordini. i file js riduttori qui e di nuovo come sempre, avremo
uno stato iniziale qui che definisce anche il modo in cui i nostri dati sono modellati e gli ordini saranno davvero semplici in
questa applicazione, sarà solo
una serie di ordini , è davvero tutto ciò di cui abbiamo bisogno.
Quindi possiamo esportare qui una funzione predefinita che è il nostro riduttore, che ovviamente ha uno stato inizializzato
con lo stato iniziale, che riceve un'azione e che ovviamente è tutto gestito da Redux e restituiamo il nostro stato qui,
ma
ovviamente in genere, vogliamo inoltre attivare il tipo di azione e gestire un paio di casi diversi
qui, quindi possiamo già aggiungere questa istruzione switch. Ora per quanto riguarda i
casi che vogliamo gestire, le azioni che vogliamo gestire, c'è una azione che voglio
gestire in questo momento e che è il mio aggiungere le azioni dell'ordine, quindi aggiungere l'ordine sembra anche
un identificatore adatto e quindi esporterò il mio aggiungi qui il creatore dell'azione dell'ordine che dovrebbe ricevere due cose
ora: gli articoli del mio carrello o gli articoli che fanno parte dell'ordine
ma questi sono gli articoli del mio carrello alla fine e, naturalmente, l'importo totale e ovviamente
tutti i dati che abbiamo nel carrello alla fine, riusciamo nel carrello, giusto?
Abbiamo un importo totale del carrello e abbiamo gli articoli del carrello e poiché ordiniamo il
nostro intero carrello, ovviamente ha senso che questi dati finiscano nell'ordine.
Ora qui nel creatore dell'azione, restituiamo quindi il nostro nuovo oggetto azione e questo
oggetto azione ha un tipo che è aggiungi ordine e quindi ad esempio una chiave dei dati dell'ordine in cui uniamo i nostri
articoli carrello, li archiviamo in una proprietà articoli carrello e quindi l'importo contiene l'importo totale per esempio.
Ora dipende da te se lo passi in una proprietà dei dati dell'ordine unito o se hai
due o più proprietà come parte dell'oggetto azione.
Questa è l'azione, tornando al riduttore, cosa dovrebbe succedere quando riceviamo un ordine?
Bene, voglio creare un nuovo oggetto ordine e per questo, proprio come prima, lavorerò con i miei modelli.
Quindi andiamo nella cartella dei modelli e lì, aggiungiamo un ordine. file js dove abbiamo un ordine di classe che esporterò in
modo
da non dimenticarlo di nuovo e lì dentro abbiamo un costruttore che ci permette di creare un nuovo ordine.
Ora come dovrebbe essere un ordine? Un ordine dovrebbe ovviamente avere un ID, che
non
è l'ID del prodotto perché ovviamente possiamo ordinare lo stesso prodotto più volte e, quindi, un ordine è totalmente staccato.
Inoltre, un ordine può contenere più di
un prodotto, alla fine ordiniamo l'intero carrello lì.
Quindi l'ordine ha un ID
autonomo, otterrà gli articoli, l'importo totale e un ordine ha anche bisogno di una data ovviamente perché quando effettuiamo un ordine,
vogliamo memorizzare quella data in cui è stato effettuato.
E poi memorizzerò tutti
quei dati, ottengo il mio ID, ottengo i miei articoli qui, ottengo l'importo totale e anche la data. Con ciò torniamo al riduttore, al riduttore degli ordini e vediamo
cosa possiamo fare con gli ordini lì. Lì, voglio gestire il caso di ordine aggiuntivo
in questo momento, che è l'unica azione che ho.
Quindi devi ovviamente importare questo identificatore di azione e lì, voglio creare un nuovo ordine, memorizzarlo in una nuova
costante
d'ordine con il modello di ordine che abbiamo appena creato che devi quindi importare.
Ora con la nuova parola chiave, possiamo creare un nuovo oggetto Javascript basato su quella classe e lì, abbiamo bisogno
dell'ID, degli articoli, dell'importo totale e della data di creazione.
Ora riceviamo solo gli articoli e l'importo totale come parte della nostra azione qui, come puoi dire.
Ora l'ID è qualcosa che in seguito genereremo dinamicamente su un server, per
il momento, userò un ID pseudo univoco fittizio con una nuova data da stringare, la data ovviamente è un oggetto
Javascript incorporato e questo alla fine genera un ID che è un po 'unico.
Tecnicamente, potremmo creare due ordini nello stesso identico timestamp, esattamente nello stesso millisecondo, sebbene nella nostra app in
cui cancelliamo il carrello dopo aver premuto Aggiungi ordine o ordina ora,
questo non sarà davvero possibile.
Quindi per il momento questo è un buon ID fittizio, dovrebbe essere
una stringa quindi è importante
e, oltre a ciò, gli elementi che possono essere memorizzati. Otteniamo questo sulla nostra azione, giusto, l'azione
ha questa proprietà dei dati dell'ordine e lì dentro avremo gli articoli.
Quindi i dati dell'ordine di azione. articoli ci dà gli articoli e per l'importo totale, possiamo
usare l'azione.
orderData.
e poi lì, abbiamo questa quantità di proprietà che possiamo
estrarre, quindi lì possiamo usarla.
Ultimo ma non meno importante per la data, ovviamente voglio generare un timestamp qui con
una nuova data, questo costruttore Javascript incorporato, se lo eseguiamo in questo modo ci dà il timestamp
corrente memorizzato in un oggetto Javascript alla fine.
Ora questo nuovo ordine deve solo essere aggiunto al nostro array di ordini, quindi restituiamo una nuova istantanea di
stato qui dove copiamo il vecchio
stato, di nuovo non abbiamo davvero nessun altro stato qui, quindi la copia è ridondante se
sostituiamo comunque, ma nel caso
in cui tu avessi un'istantanea di stato più complessa qui per questa porzione del tuo negozio Redux, ti consigliamo
di assicurarti di copiare l'altro stato in modo da non perderlo.
Ecco perché lo aggiungo qui e quindi imposto ordini uguali agli ordini di stato e ora chiamo concat su questo array che
è una funzione Javascript integrata che aggiunge un nuovo elemento a un array e restituisce un nuovo array
che include quell'elemento.
Quindi il vecchio array rimane intatto, il nuovo array viene restituito e ciò ovviamente ci consente di aggiornarlo in modo
immutabile in cui non tocchiamo mai i dati originali ma impostiamo il nuovo stato creando un nuovo array che
include il nuovo oggetto e lì concatengo semplicemente il mio nuovo ordine. Con ciò,
possiamo andare all'app. js archivia e importa i riduttori degli ordini lì dalla cartella del negozio,
la cartella dei riduttori e lì, gli ordini. js file ovviamente e uniscilo nel nostro riduttore
di root, magari con un identificatore di ordini e poi indicando il riduttore di ordini.
Ora questo dovrebbe essere disponibile e ora possiamo inviare azioni, vale a dire qui la nostra azione per aggiungere ordini e,
naturalmente, attingere a quella fetta di stati e ottenere i nostri ordini. Le azioni di invio sono la prima cosa
che voglio fare, voglio farlo dall'interno dello schermo del carrello quando premiamo questo pulsante ora.
In questo momento non stiamo facendo nulla
lì, ora l'obiettivo è quello di effettuare un ordine e anche cancellare il nostro carrello. Quindi qui nella schermata del carrello, eseguiamo già
l'importazione e la spedizione e la stiamo eseguendo in modo da disporre della funzione di spedizione.
Tutto ciò che dobbiamo quindi fare è importare tutto come azioni ordine da ordini azioni negozio e quindi nominerò queste azioni azioni
per essere super precise e ora qui quando
facciamo clic su questo pulsante, questo ordine ora pulsante, possiamo eseguire un funzione
e in questa funzione, inviamo un'azione Redux, l'azione ordini, aggiungiamo l'ordine con questo creatore
di azioni. Ora dobbiamo passare due cose: gli articoli del carrello e l'importo totale. Naturalmente entrambi sono disponibili
qui, l'importo totale è memorizzato nella costante di importo totale del carrello, gli articoli del carrello
sono qui, quindi inoltriamo questo, inoltriamo l'importo totale del carrello e quello dovrebbe essere il secondo argomento, quindi
come primo argomento, in realtà gli articoli del carrello, come questo. Ora, tieni presente che, ovviamente, inoltro gli articoli del carrello, sono gli articoli
del carrello di archiviazione che sono nell'array e non nel formato che ho nel mio
carrello Redux store. Lì, ho un
oggetto ma l'archiviazione di un tale array di articoli del carrello in un ordine dovrebbe effettivamente andare
bene, quindi non c'è bisogno di ottenere anche quell'oggetto
invariato,
mi atterrò a quell'array che ora conservo.
Quindi ora spediamo questo, per vederlo, ora
abbiamo bisogno di aggiungere una schermata degli ordini ovviamente e
per questo, voglio anche aggiungere un pulsante di menu e un cassetto che ci consente di arrivarci in alternativa alle schermate
del nostro negozio qui.