Cominciamo con i preferiti.
Voglio assicurarmi che, quando sono in una ricetta, posso fare clic su quella stella e ciò aggiunge questo come preferito e lo mostra qui nella
schermata dei preferiti dove attualmente non vedo nulla perché ho rimosso questi preferiti fittizi.
Per questo
inizierò nella cartella del negozio, nella cartella delle azioni e aggiungerò una nuova cartella che nominerò anche i pasti. js, puoi nominarlo in modo diverso se ti confonde,
ma sì, questi due file di pasti. js qui in azioni
e pasti. js nei riduttori e nelle azioni pasti. js file,
imposterò alcune azioni Redux che in genere iniziano impostando alcuni identificatori
univoci che memorizzo in costanti e che saranno i preferiti.
Puoi usare quello che vuoi qui,
il valore che memorizzi qui in genere è lo stesso identificatore, quindi
questo è il valore dell'identificatore e viene semplicemente memorizzato in una costante in modo che non sia necessario digitarlo
manualmente in seguito, ma possiamo sempre importare questa costante ed evitare errori
di battitura.
Ancora una volta, se
è nuovo di zecca per te, controlla prima una risorsa React Redux dedicata.
Ora userò anche il modello del creatore di
azioni qui, il che significa che ho quell'identificatore qui, ma ora esporterò anche una funzione che mi crea un'azione perché un'azione
non è solo un identificatore spesso e in questo caso è anche il caso, ma
ha bisogno di qualche payload extra e quindi in realtà abbiamo un'azione che è un oggetto con identificativo
e payload e quindi qui, aggiungerò una funzione che mi crea un tale oggetto azione e chiamerò questo interruttore
preferito come questo, selezionare
l'identificatore ma nel caso del cammello e questa è una funzione che può ricevere alcuni dati perché
sarò io quello che lo chiama e che dovrebbe restituire un oggetto Javascript che descrive questa azione,
quindi che ha un tipo,
diciamo che in genere si chiama quel campo identificatore ma in genere sei libero
di
usare quello che vuoi lì
e nel mio caso, questo sarà il preferito, quindi indico questo identificatore, uso questa stringa come identificatore e quindi qualsiasi
dato aggiuntivo che desideri, ad esempio qui ' dovrò fare pubblicità d l'ID del pasto che deve essere
attivato e ciò significa che anche questa funzione deve ottenere questo ID come input perché altrimenti
non posso memorizzarlo nell'azione che ho creato.
Quindi questo è il mio creatore di azioni per l'azione preferita di attivazione
/ disattivazione, ora nel riduttore, voglio agire quando ricevo un'azione preferita di attivazione / disattivazione e per questo, userò uno schema
che
probabilmente hai visto se hai lavorato con Redux prima , Userò qui un'istruzione switch e accenderò il mio
tipo di azione perché tieni presente che l'azione sarà un oggetto con una proprietà type che identifica l'azione che si è verificata.
Quindi accendo quel tipo di azione e quindi gestisco diversi casi per le diverse
azioni che potrei avere.
Quindi qui ho l'opzione di attivazione / disattivazione dei preferiti e per questo, è necessario importare l'opzione di attivazione / disattivazione dai pasti di azioni ed è
per questo che lo sto memorizzando nella costante separata perché ora non è necessario digitare manualmente l'opzione di attivazione / disattivazione
dei preferiti dove potrei avere un errore di
battitura lì dentro, invece uso solo quella costante in cui è memorizzata la stringa. E ora qui, eseguo qualsiasi logica che voglio eseguire per
poi lavorare con quell'azione e cambiare il mio stato in modo tale che il pasto con l'ID pasto che fa
parte della mia azione venga aggiunto ai pasti preferiti o rimosso da lì se già faceva parte perché è un'azione
di commutazione qui, voglio
aggiungere elementi che non sono ancora preferiti, voglio rimuovere elementi che lo sono. Nota a margine, nell'istruzione switch, aggiungerò anche un
caso predefinito in cui restituisco solo lo stato invariato.
Non dovremmo davvero raggiungerlo, ma nel caso in cui lo facciamo, beh, allora è quello che
facciamo, ma torniamo al caso preferito. Qui dentro, ora voglio
scoprire se il mio pasto con l'ID che fa parte dell'azione perché sto aggiungendo l'ID del
pasto all'azione, se quel
pasto fa già parte dei pasti
preferiti, se
sì voglio rimuoverlo, se non lo è, voglio aggiungerlo. Quindi, per questo, inizierò trovando l'indice del pasto nella matrice dei pasti
preferiti perché se è allora -1, so che non ho trovato un indice quindi non era parte, se è maggiore o
uguale
a zero, so che l'oggetto faceva parte di quello. Quindi avrò il mio indice esistente qui e
lo ottengo usando i pasti preferiti dallo stato e lì ho inserito un segno di uguale e lo stato è semplicemente la mia istantanea
dello stato corrente che ottengo e lì, avremo una proprietà dei pasti preferiti e posso
utilizzare il metodo find index, un normale metodo Javascript che posso usare sugli array per ottenere l'indice di
un elemento che corrisponde a determinati criteri che ho impostato qui in una funzione che passo per
trovare l'indice, questa funzione viene eseguita su ogni pasto nel array e se ritorna vero, allora mi dà l'indice dell'elemento
per cui è passato.
Quindi qui voglio tornare vero se il pasto. id è uguale all'azione. mealId. Ciò significa semplicemente che il pasto
che sto guardando nei miei pasti preferiti ha la stessa idea del pasto per cui si
verifica questa azione e ciò significa che se ciò è vero per qualsiasi elemento nei pasti preferiti, che il
pasto che stiamo cercando di attivare fa già parte dei preferiti, quindi dovremo rimuoverlo
perché
questo ora ci restituirà l'indice dell'elemento, quindi l'indice esistente sarà maggiore di -1 e quindi, possiamo quindi utilizzare
quell'indice per rimuoverlo.
Se questo restituisce true per nessun articolo, quindi se alla
fine restituisce -1, so che l'articolo non fa ancora parte dei pasti preferiti. Quindi l'indice esistente contiene informazioni molto importanti e
quindi lo userò qui in un'istruzione if e verificherò se l'indice esistente
è maggiore o uguale a 0, il che significa che abbiamo già quel pasto come parte dei
pasti preferiti o meno.
Nel caso in cui, quindi l'articolo fa già parte dei pasti preferiti, voglio rimuoverlo.
Quindi qui, alla fine, restituirò un nuovo stato perché nel tuo riduttore, alla fine, devi
restituire un nuovo stato che è un nuovo oggetto in cui prima di tutto copio lo stato esistente con l'operatore di diffusione qui
per
estrarre tutte le coppie chiave-valore dello stato esistente, in modo da non perdere alcuno
stato e non
sovrascrivere alcuno stato che non voglio sovrascrivere, quindi sostituirò solo i pasti preferiti, quindi aggiungerò questo
proprietà di nuovo per sovrascrivere i pasti preferiti esistenti con i miei nuovi pasti preferiti che dovrebbero alla
fine essere i vecchi pasti preferiti senza l'elemento su questo indice.
E ora qui per ottenere i miei pasti preferiti aggiornati, creerò una nuova costante e aggiornata
FarMeals, lì creerò prima di tutto un nuovo array e lo popolerò con i miei pasti esistenti, quindi sposta i miei pasti preferiti esistenti
in questo modo e lo faccio per creare una copia di quell'array in modo da non manipolare l'array
originale se ora inizio a lavorarci perché ora voglio prendere i miei aggiornamenti preferiti, chiamare qui la giunzione
e quindi rimuovere l'elemento dall'indice esistente e solo quell'elemento.
Quindi, alla fine, questo prenderà questo indice UpdateMavMeals aggiornato, lo modificherà e rimuoverà l'elemento in questo indice e modificherà
questo array, ecco perché
l'ho copiato in modo da non modificare l'array originale e ora possiamo usare questo array AggiornatoFavMeals qui
e memorizzalo come pasti preferiti nel nostro negozio perché quello sarà l'array di pasti preferito
senza il pasto che abbiamo appena rimosso.
Nel caso contrario, che è ovviamente pertinente se non stiamo trovando un prodotto, quindi vogliamo
aggiungerlo, qui voglio anche restituire un nuovo stato in cui prima di tutto copio il vecchio stato
e poi sovrascriverò i pasti preferiti in fondamentalmente sono i miei vecchi pasti preferiti
e ora posso chiamare concat, un metodo Javascript incorporato in Javascript che restituisce un nuovo
array che prende il vecchio array e aggiunge un nuovo elemento e lì, voglio aggiungere il pasto per
quell'ID qui e ovviamente Posso trovare quel pasto sul mio stato, lì sui pasti, questa è questa proprietà, lo stato qui si riferisce sempre
solo a questa struttura statale qui tra l'altro e
ora qui, posso trovare il pasto che voglio aggiungere e poiché questo diventa
molto a lungo, in realtà lo esternalizzerò in una
nuova linea, quindi il mio pasto che voglio aggiungere può essere trovato con il metodo find che funziona su tutti i pasti e
lì, se mealId è uguale all'azione. mealId, quindi ho il pasto che voglio aggiungere ed è
questo pasto che concateno ai miei pasti preferiti, quindi aggiungo questo a quell'array. Dovrebbe essere la logica
che funziona e che gestisce i nostri preferiti.
Ora dobbiamo assicurarci di inviare effettivamente questa azione ogni volta che facciamo clic sull'icona a forma di stella
nell'intestazione.
Per inviare l'azione,
andiamo alla schermata dei dettagli del pasto perché è qui che abbiamo la
nostra icona a forma di stella qui e quando premo questo pulsante, alla fine voglio inviare un'azione.
La buona notizia è che l'invio di azioni è
molto semplice, abbiamo
utilizzato il selettore, abbiamo anche usato l'invio che alla fine ci dà un modo semplice per attivare una funzione.
La cattiva notizia è che questo ovviamente può essere utilizzato solo nel corpo del componente qui, nel nostro componente funzionale e
non nelle opzioni di navigazione.
Quindi dovremo di nuovo lavorare con i parametri impostati per comunicare tra le opzioni di navigazione e il componente, ma
questo è ovviamente qualcosa che possiamo fare. Quindi, qui nella schermata dei dettagli del
pasto, inizierò semplicemente chiamando use dispatch e ciò che fa è che ci dà una funzione di invio, una funzione che possiamo
chiamare per inviare nuove azioni e memorizzerò in una spedizione denominata costante. Successivamente, voglio creare un gestore preferito di
attivazione / disattivazione che è una funzione che alla fine dovrebbe inviare questa azione.
Quindi qui voglio chiamare la spedizione che ho a disposizione grazie a questo hook e
ora per spedire, devo inoltrare l'azione che voglio inviare e per questo,
userò questo creatore di azioni per attivare il preferito qui.
Quindi non ci resta che importarlo, importarlo dalla cartella del
negozio, lì dalle azioni e lì dai pasti. file js, da lì voglio importare il preferito,
non l'identificatore in maiuscolo ma questa funzione di creatore di azioni. Con quello importato qui, in spedizione possiamo chiamare il
favorito di commutazione come questo e ora qui dobbiamo inoltrare l'ID
e che ovviamente è il pastoId che stiamo già estraendo
lì o selezionato Pasto. Id funzionerebbe anche, qualunque
cosa tu voglia, andrò semplicemente a mangiare.
Ora possiamo riattivare l'uso dell'effetto per comunicare con la nostra intestazione, non con questa linea, ma invece con i parametri del set di navigazione
degli oggetti di scena e ora qui, chiamerò questo interruttore di attivazione, il nome dipende da te e indico il
mio gestore preferito di attivazione / disattivazione.
Ora attiva / disattiva il gestore preferito dovrebbe quindi essere aggiunto come dipendenza qui e
per evitare cicli infiniti, userò di nuovo l'uso callback che importerò da React per avvolgere questa funzione qui.
Quindi qui la callback è racchiusa in questa funzione e dobbiamo specificare qui le dipendenze e la dipendenza numero uno è
la spedizione, React Redux farà in modo che questo
non cambi mai, quindi questa è una dipendenza che non cambierà mai, la dipendenza
due è pastoId, che
anche non dovrebbe cambiare mentre ci troviamo
in questa pagina, avrà sempre lo stesso valore. Quindi, con ciò, questa funzione non dovrebbe essere ricreata, il
che significa che questo effetto non verrà mai eseguito nuovamente a meno che non venga ricreato, il che è
il caso solo se avessimo un nuovo ID, nel qual caso sarebbe bene che questo venga ricreato, ma in caso contrario, questo ha vinto cambiano e quindi
dovremmo avere un canale di comunicazione sicuro qui.
Ora nell'intestazione, ora possiamo estrarre quel gestore, dal modo in cui non abbiamo
più bisogno del pasto. Ora
qui, ora possiamo semplicemente estrarre la funzione preferita di commutazione dalla nostra navigazione dei dati di navigazione ottenere param e quindi nominare
quel comando fav , quindi questo è il nome param che possiamo estrarre e questo dovrebbe
darci accesso a questa funzione che passiamo. Ora attiva o disattiva il preferito è ciò che dovrebbe essere effettivamente eseguito quando
si preme questo pulsante.
Quindi qui indicherò il preferito perché questo tiene un puntatore su questa funzione e quindi questa
funzione verrà eseguita quando ora premiamo questa stella. Bene vedremo se funziona.
Salviamolo e torniamo agli spaghetti qui e fai clic su questa stella e fai clic su Preferiti e sembra buono,
gli
spaghetti fanno parte dei preferiti.
Facciamo di nuovo clic sulla stella qui e andiamo ai preferiti ed è sparito,
questo ha molto senso.
Fai clic di nuovo, è tornato, vai alla pagina dei dettagli qui nella scheda dei preferiti e fai clic sulla
stella e torna indietro, beh è sparito.
Verifichiamolo anche su Android, forse per la cotoletta, i preferiti sono vuoti in questo momento. Torniamo indietro e fai clic sulla stella,
vai ai preferiti, eccolo qui, torna
indietro, fai clic sulla stella e non c'è più. Quindi questa logica generalmente funziona.
Ci sono un paio di cose su cui voglio ancora lavorare, ad esempio voglio cambiare
l'icona in base
allo stato preferito, voglio anche mostrare un po 'di testo nella schermata preferita quando è vuota ma in generale, l'invio
e l'utilizzo dei dati funziona anche se ne abbiamo bisogno in un'intestazione.