Per la funzione Aggiungi al carrello, dovremo lavorare su due cose: una è
ovviamente che possiamo avere una schermata del carrello, che abbiamo
un'icona qui nella nostra intestazione che ci porta alla schermata del carrello dove possiamo vedere come la somma totale e gli articoli
del carrello e dove abbiamo quell'ordine ora pulsante, ma direi
che è il secondo passo perché il primo passo più importante è che aggiungiamo la logica per gestire
gli articoli del carrello e che coinvolge Redux. Per questo, aggiungerò un riduttore nuovo
di zecca, un secondo riduttore che chiamerò carrello, carrello. js e anche un file di azioni e questo è in
realtà un file di azioni che popoleremo.
Lo faremo anche con il file dei prodotti in seguito
una volta che ci immergeremo nell'aggiunta di prodotti e così via, ma per ora, iniziamo con la funzione carrello. Quindi qui nel
carrello. file js nella cartella
dei riduttori, imposterò il mio stato iniziale per quella sezione carrello e ancora, sono tutti questi riduttori
separati e gli stati che riescono a comporre il negozio Redux totale perché alla fine, questo
è quello che poi combini qui con combinato riduce in un riduttore di radice e un grande stato alla fine.
Abbiamo solo questi singoli stati secondari per facilitare la gestione dei dati.
Quindi qui nel riduttore del carrello, come dovrebbe essere lo stato del nostro carrello?
Bene, il nostro carrello avrà un sacco di oggetti, potrebbe essere un array e una somma che inizialmente è zero, quindi un importo totale che potresti
dire, potresti ovviamente anche nominare questo importo totale forse per chiarire di cosa
si tratta.
Quindi queste sono le due cose che compongono il mio carrello
qui e, come sempre, non posso sottolinearlo abbastanza, c'è più di un modo per implementarlo. Quindi, se vuoi gestire anche altri dati qui, fallo
sicuramente, non esiste un approccio
giusto o
sbagliato, questo è solo il mio
approccio alla costruzione di questa app.
Ora è importante che per questo carrello qui, voglio assicurarmi che se abbiamo già un articolo
nel carrello, diciamo la maglietta rossa e clicco sul carrello una
seconda volta, non aggiungo due articoli a questo array ma Ho ancora un solo articolo lì dentro e invece ogni articolo nella
matrice di articoli dovrebbe essere un oggetto in cui gestisco forse come l'ID del prodotto, dove ho il titolo e
la quantità dell'articolo nel carrello, in modo che
passare a 2 se faccio clic su di esso una seconda volta.
Pertanto potresti effettivamente sostenere che gli articoli potrebbero non essere una matrice ma forse un oggetto Javascript perché ciò ci consente di memorizzare l'ID
del prodotto come chiave e il valore potrebbe essere un oggetto con il titolo, con
la quantità, con il prezzo e questa è solo un'alternativa,
potresti anche fare
tutto questo con un array ma in realtà è l'approccio che userò.
Ora il riduttore che esporto è quindi un riduttore che ovviamente ottiene uno stato
che ha il nostro stato iniziale come valore predefinito e un'azione come argomento che alla fine deve restituire alcuni dati.
Quindi, alla fine, deve restituire un nuovo stato che viene quindi utilizzato da Redux.
Ora abbiamo bisogno di un'azione per continuare.
Quindi qui esporterò una costante, un identificatore di azione e chiamerò questo aggiungi al carrello, l'identificatore dipende da te,
andrò con aggiungi al carrello in questo modo e nel file delle azioni, creerò un tale funzione
di creatore di azioni.
Quindi ecco un'altra costante
che chiamerò aggiungi al carrello che riceve diciamo l'oggetto prodotto completo che voglio aggiungere, in modo che io possa estrarre le informazioni
di cui ho bisogno e quindi qui, dobbiamo restituire un tale oggetto d'azione che ha
un tipo che viene aggiunto al carrello e quindi al nostro prodotto.
Questo è solo un modo per creare queste azioni che ci rende molto semplice farlo all'interno
dei nostri componenti.
Quindi alla fine, nel riduttore del carrello, in realtà in tutti i riduttori ma nel posto dei riduttori del
carrello dove
ci interessa, otterremo quell'azione Aggiungi al carrello, quindi qui dobbiamo cambiare il tipo di azione e gestire il caso in cui è aggiunto al carrello e quindi è
necessario importare aggiungi al carrello
dalla cartella delle azioni e lì, dal file del carrello. Ora e comunque importante, questa azione quando viene spedita viene
ricevuta su tutti i riduttori ma se non li gestisci con un caso separato, il tuo caso
predefinito entrerà in funzione che normalmente dovrebbe solo restituire la tua porzione di stato corrente per questo riduttore, che significa che la porzione di
stato per questo riduttore è invariata. Qui però nel riduttore del carrello,
ovviamente voglio cambiare il mio stato, quindi mi occupo
di aggiungere al carrello qui
e ora in aggiungi al carrello, cosa
dovrebbe succedere lì?
Bene, otteniamo il nostro prodotto aggiunto, possiamo tirarlo fuori dall'azione perché lì nell'azione, avremo un codice Product Key, è quello che
abbiamo appena
impostato qui nel carrello dell'azione. js file, quindi prenderò il nostro
prodotto e lo memorizzerò in un prodotto aggiunto costante qui con il quale ora possiamo lavorare
e avremo il nostro prezzo del prodotto qui che è ovviamente aggiuntoProdotto. prezzo e avremo il titolo del nostro
prodotto che viene aggiuntoProdotto. titolo. Prima di continuare, definiamo come dovrebbe
essere l'articolo del carrello, quindi l'aspetto che conserviamo qui, il valore che abbiamo dentro.
Quindi andrò nella cartella dei miei modelli e aggiungerò un carrello. file js qui e quindi aggiungere una classe di articoli carrello
che riceve un costruttore e
prima che me ne dimentichi di nuovo, che deve essere esportato qui e ora in
quel costruttore, mi aspetto di ottenere la quantità del prodotto che stiamo per aggiungere, il prezzo del
prodotto, il titolo del prodotto e la somma per questo articolo, se abbiamo tre volte la maglia rossa, la nostra somma sarebbe tre volte
29. 99,
quindi circa $ 90.
Ora quello che non ottengo qui è l'ID prodotto perché lo userò come chiave all'interno del mio oggetto qui che contiene gli articoli
e quindi diventerà più chiaro una volta implementato.
Quindi, qui nell'articolo del carrello, memorizzo solo
tutti i dati che ricevo, la quantità, il prezzo del prodotto e
ho quei dati che devo produrre in seguito, quindi il titolo del prodotto e la somma, come questo e ora di nuovo nel riduttore, possiamo ovviamente
importare questa classe di articoli del carrello dalla cartella dei modelli e dall'articolo del carrello qui e
ora di nuovo in quel caso di aggiunta al carrello laggiù, prima di tutto dobbiamo
scoprire se quel prodotto fa già parte dei nostri articoli.
Ora, come ho già detto, aggiungerò ogni nuovo prodotto aggiungendo una nuova chiave agli articoli che è l'ID di quel prodotto, dal
momento che è unico abbiamo
sempre ogni chiave solo una volta e quindi il valore sarà un articolo del carrello come abbiamo appena
definito nei modelli e quindi so se l'ID del prodotto che sto ricevendo qui è già una chiave degli
articoli, quindi questo ha già il nostro articolo come articolo del carrello.
Quindi, qui, possiamo semplicemente verificare se gli articoli per il prodotto aggiunto. L'ID esiste, quindi se questo restituisce qualcosa di
vero, quindi non indefinito, allora abbiamo già l'articolo nel carrello che va bene ma allora dobbiamo solo cambiare
la quantità, altrimenti
dovremo aggiungere un nuovo articolo.
Quindi iniziamo con l'altro caso perché è il caso che incontreremo per la prima
volta quando aggiungiamo
qualcosa per la prima volta, lì abbiamo bisogno di un nuovo articolo carrello, lo creo
con la nuova parola chiave e la classe di articoli carrello che ho definito e lì dentro , dobbiamo fornire la
quantità che ovviamente è una solo
se aggiungiamo solo un nuovo articolo, dobbiamo fornire il prezzo del prodotto, il titolo del prodotto qui e la somma e la somma ovviamente inizialmente
è solo il nostro prezzo del prodotto, giusto?
Perché se aggiungiamo un articolo di quel prezzo, la somma per questo articolo carrello è il prezzo del nostro prodotto e ora
questo nuovo articolo carrello deve essere aggiunto ai nostri articoli carrello qui.
Quindi qui, restituiamo una copia del nostro stato e impostiamo gli
oggetti uguali a un nuovo oggetto in cui copio tutti i miei oggetti di stato esistenti, in modo da copiare
qui il
mio oggetto esistente e quindi aggiungo una nuova chiave con questa sintassi dinamica con le parentesi quadre
in cui viene aggiunto il nome della chiave Prodotto. ID, questo è ciò che intendevo con l'ID del prodotto che è la chiave
nel nostro oggetto articoli e il valore è il nostro nuovo articolo carrello.
Questa è solo una sintassi che devi sapere, è Javascript vaniglia, ecco come puoi aggiungere o accedere fin
qui a una proprietà dinamica anziché codificarla come stringa qui. A proposito, questo qui dovrebbe
ovviamente essere anche stato. articoli, errore mio. Quindi, con questo, dovremmo aggiungere un nuovo articolo carrello qui.
Ora se hai già un articolo nel carrello, ovviamente non creiamo un nuovo
articolo nel carrello, ma vogliamo aggiornare quello esistente. Quindi avrò il mio articolo carrello aggiornato
qui e per questo, creerò ancora un nuovo articolo
carrello ma lo prepopolerò con alcuni dati esistenti, ad esempio la quantità qui. Lo ricaviamo dagli articoli di stato per l'ID del prodotto aggiunto perché dovrebbe già essere parte degli
articoli di stato, stiamo controllando questo qui e questo avrà ovviamente una chiave di quantità
perché un tale articolo qui nei miei articoli è solo di digitare articoli carrello, quindi avrà una
proprietà
quantità e ne aggiungeremo semplicemente uno perché stiamo aggiungendo un
nuovo articolo carrello, quindi dobbiamo incrementare questo. Ora carrello articolo come secondo argomento prende il prezzo del prodotto. Quindi, naturalmente, poiché costruiremo l'app in
modo che il prezzo non cambi mai, il che aggiungerebbe molta complessità qui, dovremmo
gestire il carrello in un modo completamente diverso in quel caso, dovremmo memorizzare ogni articolo
del carrello come elenco delle transazioni per questo articolo carrello che è troppo per questo qui.
Quindi, dal momento che questo non cambia mai, dal momento che il prezzo non cambia mai, alla fine possiamo semplicemente
prendere il prezzo del prodotto che stiamo ottenendo o prendere il prezzo esistente che abbiamo archiviato prima perché quello non cambierà mai più.
Il titolo potrebbe cambiare e voglio archiviare qui il titolo più recente, quindi prenderò sicuramente quello
del prodotto che stiamo ottenendo qui invece della mia vecchia istantanea e, ultimo
ma non meno importante, l'ultimo valore qui, la mia somma totale per questo articolo carrello,
ovviamente, è la somma corrente, quindi accedo agli articoli di stato per l'ID qui, somma più il prezzo del prodotto perché aggiungiamo un nuovo articolo
qui, dobbiamo aggiungere il prezzo 1 volte alla somma corrente. Questo è l'articolo del
carrello aggiornato.
Ora, con ciò, possiamo restituire qui la nostra nuova fetta di stato copiando i vecchi stati e impostando gli elementi uguali e ora importanti
su un oggetto in cui copiamo lo stato. articoli ma dove ora impostiamo di nuovo gli articoli aggiunti. ID e sì, questo esiste già, ma
con ciò lo sostituiamo semplicemente con il nostro articolo del carrello aggiornato, quindi facciamo lo stesso
aggiornamento che facciamo lì. Ora che comunque non
è tutto ciò che dobbiamo fare, dobbiamo
cambiare anche l'importo totale perché quello ovviamente cambia.
Pertanto, quando aggiungiamo un articolo per la prima volta, l'importo totale dovrebbe essere sostanzialmente il nostro vecchio importo totale, quindi indica l'importo
totale più il prezzo del prodotto ed è lo stesso se aggiungiamo un
articolo a un carrello esistente o quando esiste già lì perché alla fine, il nostro totale è sempre solo il
vecchio totale più il prezzo, perché aggiungiamo sempre un articolo di quel prodotto, ecco
come funzionerà questa app.
Quindi la nostra dichiarazione di aggiornamento
qui è quasi la stessa, l'unica cosa che differisce è qui come creiamo quell'elemento
carrello, quindi ovviamente possiamo anche riutilizzare questo codice, spostarlo fuori dal blocco if else e invece
di avere due diverse costanti qui , possiamo creare una
variabile prima di inserire l'istruzione if, aggiornata
o un nuovo articolo del carrello, che potrebbe essere un nome perché
non sappiamo quale sarà in anticipo e quindi qui nella sezione if qui, impostiamo aggiornato o nuovo articolo carrello a questo articolo carrello
aggiornato, qui d'altra parte lo impostiamo su questo nuovo articolo carrello e qui, quindi utilizziamo sempre
l'articolo carrello nuovo o aggiornato e con quello, abbiamo un riutilizzo del codice
qui e non ripetiamoci, il che è sempre positivo. Un'altra nota a margine, copiare lo stato qui ovviamente
è sempre ridondante perché si impostano sempre sia gli articoli che l'importo totale.
Quindi se hai sempre solo questi due campi qui e cambi sempre entrambi, non è necessario copiare
lo stato esistente, se hai mai introdotto un altro pezzo di dati nella tua porzione di stato qui che non cambi
qui tuttavia, è necessario copiare il vecchio stato in modo da non perdere quei dati
aggiuntivi.
Quindi qui lascerò quella funzionalità di copia anche se tecnicamente non ne abbiamo bisogno qui, ma
se mai dovessimo cambiare il nostro stato in cui è stato salvato e
non dimentichiamo di copiarlo e quindi perdiamo i dati.
Bene, c'è stato molto lavoro,
con quello possiamo iniziare a inviare questa
azione e, naturalmente, voglio inviarlo dalla panoramica del prodotto e dai dettagli del
prodotto perché in entrambe le schermate, ho aggiunto i pulsanti al carrello.
Quindi iniziamo dalla schermata di panoramica dei prodotti, lì per inviare le
azioni di Redux,
dobbiamo includere qui l'hook di spedizione, con quello qui possiamo semplicemente accedere a questa funzione di spedizione chiamando usa la
spedizione in questo modo e ora quando facciamo clic su Aggiungi a carrello laggiù, possiamo spedire la nostra
azione qui e ovviamente a proposito invece di usare funzioni in linea
qui, potresti avere funzioni memorizzate
in costanti separate all'interno del tuo componente funzionale qui, in alternativa, mi atterrò alle funzioni inline per ora e importerò tutte
le mie azioni qui come azioni carrello dalla cartella negozio e lì, la cartella azioni, il file carrello.
Ora questa è una sintassi di importazione che unisce tutte le esportazioni dal file in
un unico oggetto, qui abbiamo una sola esportazione quindi
potresti anche scegliere come destinazione quella
specifica esportazione, in seguito avremo più esportazioni e quindi userò questo approccio.
Quindi qui, spediamo l'azione del carrello.
aggiungi al carrello e questa è una funzione che dobbiamo eseguire, questa è la nostra funzione di creatore
di azioni e questo come
argomento prende il nostro prodotto, quindi alla fine qui, dobbiamo passare itemData. articolo che è solo il nostro prodotto qui nella schermata dei dettagli
del prodotto.
Quindi facciamo esattamente la stessa cosa, importiamo la spedizione dell'uso da React Redux, quindi qui possiamo accedere
alla funzione di spedizione chiamando usa la spedizione e quindi per questo
pulsante qui nella funzione in linea o in una funzione denominata separata se ti piace ,
puoi chiamare il dispacciamento,
ora dobbiamo importare le nostre azioni e userò la stessa sintassi di prima in
cui importare tutto come azioni del carrello dalla cartella del negozio, la cartella delle azioni, il file del carrello e ora le azioni del carrello, chiama aggiungi a carrello
qui e inoltra il prodotto selezionato che è il nostro prodotto che vogliamo aggiungere al carrello qui.
Si spera che questo spedisca le azioni in modo tale che l'articolo venga aggiunto al carrello, ma ovviamente
in questo momento non possiamo confermarlo.
Bene, in realtà possiamo. Puoi avviare il debugger di React Native e non l'ho mai
usato prima, ma lì dentro, ora puoi premere il comando o controllare t per aprire una nuova scheda, quindi
confermare
questa importazione
qui, quindi andare alle tue app e lì, aprire il menu di debug su iOS con comando D, su Android
con controllo o comando M e fare clic sul debug Javascript remoto. Ora il mio si è aperto sulla porta 19003 in realtà, quindi ho
aperto il debugger
React Native sulla porta sbagliata, selezionami di nuovo premi il comando T o controlla T nel debugger e scegli
19003, usa qualsiasi porta aperta per te in Chrome, fai clic su Conferma e ora questo si connette alla tua app React in
esecuzione qui nel debugger, assicurati di chiudere il debugger di Chrome e
quindi ricaricare l'app, ora questo dovrebbe connettersi qui e ora non
solo puoi controllare l'app
qui
come ho spiegato in precedenza, no, puoi anche dai un'occhiata alla parte lassù e che è il
tuo debugger Redux, lì puoi vedere cosa sta facendo Redux per te.
L'unica cosa che devi fare per farlo funzionare è installare un nuovo pacchetto con npm
install --save dev perché è una dipendenza di sviluppo di cui abbiamo
bisogno solo durante lo sviluppo e lì, installa l'estensione degli strumenti di sviluppo Redux, vai
alla tua app . file js da allora
in poi e quindi importare da
questa estensione degli strumenti di sviluppo Redux. Puoi importare compose con gli strumenti dev da lì e questa
è una funzione che passi per creare store come secondo argomento, puoi semplicemente
eseguirlo lì in questo modo. A proposito, questo è il
codice, questa importazione
e questo utilizzo che dovresti rimuovere prima di distribuire l'app perché questo è solo qualcosa che dovrebbe
essere in esecuzione durante lo sviluppo, non nell'app di produzione, devi rimuoverlo prima
di distribuire l'app ma durante lo sviluppo, va bene. E con ciò aggiunto, se ora lo salvi, in
realtà vedrai che qui in questo Redux Inspector, vedi che viene inviata un'azione init, non l'hai mai vista prima.
Questa è un'azione che viene inviata automaticamente all'avvio dell'app.
Se ora faccio clic sul carrello qui, vedrai anche l'azione Aggiungi al carrello e
ora qui, puoi visualizzare i dettagli su quell'azione come i dati ad essa collegati e sul tuo
stato qui e là vedi per esempio questo è lo stato del mio prodotto e dov'è lo
stato del mio carrello?
Beh, ovviamente manca, perché mentre abbiamo il riduttore nell'azione impostata, nell'app. file js, nei
riduttori combinati, non includiamo lo stato del carrello.
Quindi, importiamo il riduttore del carrello da. / StoreReducers / cart e ora con quello importato, possiamo aggiungerlo al nostro
oggetto riduttori combinato e ora lì, ad esempio, aggiungiamo una fetta di carrello, puntiamo al riduttore del carrello e
quindi ora questo viene incluso nel nostro negozio Redux. Detto questo, se ora aspetti che venga ricaricato e fai
di nuovo clic sul carrello, ora in questa azione aggiungi al carrello, sotto lo stato, vedrai che
ora c'è una sezione carrello e ora vedi che c'è un importo totale, vedi c'è un
articolo con la chiave P1 che è il nostro prodotto con una quantità di
1, quel prezzo, la somma di questo e se ora clicco sul carrello una seconda volta qui, c'è un'altra azione spedita e se abbiamo un guarda
lo stato dopo questa azione, ora vediamo, raffredda solo un articolo ma ora con la
quantità due, il prezzo del prodotto per articolo è questo ma la
somma è questa.
Questa è
la maglietta, se ora spedisco anche il tappeto
blu, dobbiamo aggiungere un'altra volta al carrello e lì nello stato, ora vediamo davvero che
ci sono due elementi, P1
e P2, P1 è invariato ma P2 è stato ora aggiunto e anche l'importo totale mi sembra buono.
Quindi questo sembra funzionare ed è così che puoi guardare nel tuo stato Redux mentre la tua app è in esecuzione
senza emetterla qui.
Ora ovviamente vogliamo anche visualizzarlo visivamente, ma questo è un bel modo di esaminare il
tuo stato dietro le quinte con l'aiuto del debugger React Native.
Ora lo chiuderemo qui perché rallenta un po 'l'app e quindi qui nel
menu di debug, interromperò anche il mio debug remoto e chiuderò completamente l'ispettore qui.
Anche di nuovo nell'app. js file, mi sbarazzerò del comporre con gli strumenti di
sviluppo qui in modo
da non dimenticarlo più tardi ma puoi sempre aggiungerlo qui o lasciarlo qui mentre stai sviluppando in modo da
poter guardare nel tuo negozio.
Il principale takeaway per noi qui è che
questo sembra funzionare e con quello che funziona, ovviamente ora possiamo lavorare sull'aggiunta di un pulsante di azione qui all'intestazione e assicurarci
di poter andare alla pagina del carrello da quello o con l'aiuto di quello pulsante di azione in modo che sulla
pagina del carrello sia possibile visualizzare le informazioni del carrello.