Quindi l'archiviazione è ottima, il recupero sarebbe anche dolce e alla fine, voglio assicurarmi che quando ad
esempio visitiamo la schermata di panoramica dei prodotti, raggiungiamo
semplicemente il server e prendiamo tutti i prodotti da lì, in modo che su
questa schermata ,
ogni volta che lo visitiamo, cariciamo gli ultimi prodotti.
Ora, per questo, dobbiamo inviare una richiesta HTTP da lì
e quindi alla fine quello che voglio fare è inviare una nuova azione Redux che raggiungerà il server, ottenere i
miei prodotti da lì e quindi impostare i prodotti nel mio negozio. Quindi ho bisogno di un'azione nuova di zecca
qui, impostare prodotti, di cui non avevo bisogno prima perché abbiamo lavorato solo con prodotti fittizi ma ora
non è più il caso, quindi ora i prodotti impostati dovrebbero essere spediti e avrò bisogno di un
nuovo creatore di azioni qui che chiamerò fetch products. Per questo non ho un identificatore perché non lo spedirò mai
come un'azione che dovrebbe raggiungere il riduttore, invece questo
sarà solo il mio creatore di azioni con il codice asincrono con la richiesta HTTP.
Non avrà bisogno di argomenti, ma grazie a Redux Thunk, restituisce una funzione che ottiene quella funzione di invio come
argomento e lì alla fine, voglio inviare un oggetto
azione in cui il tipo è impostato prodotti e dove voglio inoltrare il mio prodotti ma ovviamente non dovrebbe essere un
array vuoto ma i prodotti che ottengo dalla mia API. Quindi possiamo quindi fare una specie di copia
di questo codice qui, inclusa la parte di spedizione asincrona qui, fino a lì dove otteniamo i dati di risposta,
copiarli dal creare prodotto e
sostituire questa parte qui con esso e ora quello che facciamo è inviamo una richiesta allo stesso
URL di prima che ha senso perché è lì che vengono
archiviati i prodotti.
Tuttavia ora voglio impostare una richiesta get e questo è in realtà l'impostazione predefinita
quando utilizziamo il recupero, quindi non è necessario impostarlo. Per ottenere una richiesta, non è nemmeno necessario impostare alcuna
intestazione
e non è possibile impostare un corpo, quindi in realtà qui, possiamo eliminare completamente questo secondo
argomento su fetch, inviamo semplicemente una richiesta di recupero come questa.
Ora la risposta recupererà i nostri dati, ma ora c'è una caratteristica importante nel formato
di quei dati ed è meglio se semplicemente li vediamo.
Quindi consenti a me di registrare i dati di risposta qui e commentarli per il momento o possiamo lasciarli lì
dentro, non fa
alcun danno, non fa nulla di utile,
non lo stiamo gestendo nel riduttore ma registriamolo e ora andiamo alla schermata di panoramica dei
prodotti e assicuriamoci che inviamo questa azione di recupero dei prodotti. Ora per fortuna, ho già accesso alla funzione
di spedizione Redux lì nella panoramica dei prodotti, quindi ora ho solo
bisogno di aggiungere l'effetto d'uso in modo da poterlo attivare ogni volta che questo componente viene caricato.
Quindi, qui, posso aggiungere l'effetto d'uso e nella mia funzione qui, posso chiamare il dispacciamento e ora raggiungere le mie azioni
di prodotto che devo quindi importare come azioni
di prodotti da azioni di negozio prodotti, come questo, che dovrebbero essere azioni e ora utilizzare le azioni dei prodotti qui per attivare la mia azione di recupero dei prodotti
che alla fine eseguirà questa richiesta HTTP e questo effetto dovrebbe essere eseguito ogni volta
che il mio componente viene caricato. Quindi posso aggiungere un array vuoto e in realtà aggiungere la mia unica
dipendenza che ho che è la
spedizione, qui è l'unica dipendenza che definiamo all'interno del nostro componente, in modo che questo non riesca mai più a funzionare.
L'unica volta che verrà eseguito è quando questo componente viene caricato ed è esattamente
quello che dovrebbe essere,
ogni volta che visiterò lo schermo, voglio attivare questo effetto qui.
Quindi, se ora lo salvo, salviamo questo e ora mentre questo si carica,
vedi qui nel registro, questo è quello che è successo qui sia su Android che su iOS ed è per questo
che lo vedo due volte.
Questo è ciò che ho ottenuto
alla fine, questo oggetto è stato restituito da Firebase.
È un oggetto con tutti i miei prodotti e ne ho solo uno, motivo per cui ne vedo solo uno qui e ogni
oggetto è abbinato al suo ID univoco, ma questo
è importante.
Non torniamo in array, recuperiamo un oggetto con ID univoci come chiavi e i valori per
queste chiavi sono i miei dati oggetto e dobbiamo solo saperlo per gestirli correttamente.
Quindi, nella nostra
azione, ecco come appaiono i dati
di risposta, ovviamente nella mia app lavoro con un array, quindi devo trasformarlo.
Quindi i miei prodotti caricati o comunque tu voglia chiamarli qui
dovrebbero essere un array vuoto e ora possiamo scorrere attraverso quell'oggetto per
mappare i dati dell'oggetto, i prodotti dell'oggetto ai prodotti dell'array.
È relativamente semplice da fare, possiamo aggiungere un ciclo for / in qui con la nostra chiave
in cui passiamo attraverso tutti i dati di risposta che abbiamo recuperato qui alla fine e poi qui, aggiungo ogni prodotto ai miei prodotti caricati
con push, in modo che questo l'array cresce nel tempo e
quello che aggiungo qui alla fine è solo un nuovo prodotto, usando il modello del prodotto che quindi
devi
importare, quindi assicurati di avere quell'importazione qui che punta alla cartella dei tuoi modelli e
lì al file del prodotto
e io crea un nuovo prodotto qui in cui il mio ID è quella chiave perché è quell'ID univoco qui che
abbiamo in quell'oggetto per il quale stiamo eseguendo il loop, quindi quella cosa dell'utente, che è ancora U1, dati fittizi
perché non abbiamo dati utente coinvolti qui e poi dobbiamo esaminare l'oggetto che siamo tornati da Firebase per ottenere il titolo e
così via.
Quindi qui, il nostro titolo per questo nuovo prodotto che stiamo creando è semplicemente resData per la chiave fornita. titolo e lo stesso ovviamente
qui
per imageUrl, quindi. URL dell'immagine. Per la
descrizione e ovviamente anche per il prezzo, così. Quindi questo aggiunge tutto ai prodotti caricati e ora i prodotti
caricati saranno un array popolato che posso aggiungere qui all'azione che viene inviata, all'azione
dei prodotti impostati.
Quindi l'unica cosa che manca è che ora andiamo al riduttore e lì, possiamo gestire prodotti fissi, forse qui come
primo caso, ma ovviamente la posizione non ha importanza. Aggiungi i prodotti impostati qui e
per questo, assicurati di importarli dal tuo file di azioni e poi lì, è una
cosa molto banale che stiamo per fare. Alla fine ho solo bisogno di
restituire un nuovo stato in cui i prodotti disponibili sono uguali all'azione. prodotti, quindi ai prodotti che ho derivato qui nel mio creatore
di azioni che aggiungo all'azione inviata. E per il prodotto
utente, è abbastanza simile, c'è azione. prodotti, appena filtrati per tutti i prodotti che hanno il mio ID utente, quindi in
questo modo e al momento a causa del mio codice fittizio qui dove codifico il mio ID utente, ciò ovviamente
significa che tutti i prodotti caricati sono trattati come i miei prodotti.
Questo è qualcosa che cambieremo in seguito una volta aggiunta l'autenticazione. Quindi, ora che se viene ricaricato, vedi
che iniziamo con i dati fittizi, ma questi vengono immediatamente sostituiti
con questi dati caricati. Quindi il caricamento dei dati
funziona bene, possiamo lavorarci come potremmo con i nostri dati qui.
Ovviamente non stiamo memorizzando gli ordini sul server e niente del genere, ma siamo in grado di caricare i nostri
dati che abbiamo precedentemente archiviato sul server.