Per essere sicuri che vengano caricati,
dobbiamo nuovamente tornare al creatore dell'azione e aggiungere una nuova azione nel creatore dell'azione degli ordini, mi scusi.
Un identificatore di cui ho bisogno è impostare ordini, così come ne abbiamo avuto uno per impostare prodotti per impostare gli ordini
caricati e quindi qui ho il
mio creatore di azioni di recupero ordini che non accetta argomenti ma che quindi restituisce la mia funzione di spedizione
asincrona qui, grazie a Redux Thunk e lì alla fine invio o invio una nuova azione in cui il tipo è impostato ordini e dove
ho i miei ordini caricati e, naturalmente, quello non dovrebbe essere un array vuoto.
Invece, possiamo prendere in prestito la logica dal creatore dell'azione dei prodotti, da lì per recuperare i prodotti. Possiamo prendere tutta quella
logica, copiarla qui e spostarla sul creatore dell'azione degli ordini ed
eseguirla
prima della spedizione, qui. Ora ovviamente dobbiamo perfezionare questo, ad esempio la richiesta deve essere inviata agli
ordini / U1 e di nuovo che verrà sostituita in seguito con un valore dinamico,
per ora è hardcoded per recuperare gli ordini per questo utente. Dovrebbe essere una richiesta, voglio controllare questo,
va bene.
Qui ho ottenuto
i miei dati di risposta, ora qui ho ricevuto
i miei ordini caricati, che sembra
essere un nome più appropriato, continuo a scorrere tutti i dati che ho e voglio impostare i
miei ordini caricati laggiù ma ora c'è un'importante
differenza, Non creo qui nuovi prodotti che aggiungo agli ordini caricati, ma
ovviamente devo creare nuovi ordini qui e per questo, è
necessario importare gli ordini dal modello di ordine. Ora vedo anche che manca una parentesi
graffa, ora prima di procedere con quello a proposito, devo assicurarmi di catturare anche
tutti gli errori che potrei riscontrare e lì voglio lanciare l'errore, fondamentalmente ripensarlo, assicurarmi raggiunge il mio componente e ho bisogno di
un'altra parentesi graffa
di chiusura ma ora torniamo alla nostra logica qui dove creo nuovi ordini, lì
l'ID è la chiave, proprio come per i prodotti, gli articoli
possono essere trovati nei miei dati di risposta perché noi fondamentalmente torna qui qui, quindi i dati di risposta conterranno
una chiave degli elementi della carta, ad esempio che contiene gli elementi della mia
carta di cui ho bisogno. Quindi i dati di risposta per la chiave data e lì,. cardItems, ecco dove trovo
i miei articoli perché è quello che inviamo qui alla fine per archiviare gli articoli della carta, quindi il
mio ordine che creo qui ovviamente ha bisogno anche dell'importo
totale, lo ottengo dalla chiave resData e poi lì se abbiamo uno sguardo a
Firebase, è quel campo di importo totale qui e la data.
Bene, creo un nuovo oggetto data ma lo inizializzo con la chiave resData. Data.
Ora dobbiamo creare un nuovo oggetto dati grazie alla chiave resData. la data è solo quella stringa di data qui
e ho bisogno di un oggetto data,
non una stringa di data, quindi la avvolgiamo, questa stringa la avvolgiamo con la creazione dell'oggetto data qui e quindi
otteniamo
un oggetto dati e questo è l'ordine che aggiungo qui
per caricare gli ordini, lo facciamo per tutti gli ordini che stiamo recuperando e con quello, possiamo spedire questo
e ora dobbiamo solo gestirlo nel riduttore degli ordini.
Quindi, se gestisco gli ordini impostati e per questo, ovviamente devi importare questo identificatore di azione, l'unica cosa che devo fare è che devo restituire un nuovo
oggetto stato in cui gli ordini sono uguali all'azione. ordini e questo è tutto ciò
che dobbiamo fare,
così semplice.
Ora, perché è così semplice?
Perché nel creatore dell'azione, facciamo tutto il lavoro. Lì mappiamo i nostri ordini e poi qui, ho
solo la chiave degli ordini nella mia azione che contiene
tutti gli ordini mappati, quindi è proprio quello che devo archiviare qui.
Ora il passo rimanente è che spediamo gli ordini di recupero qui nella nostra schermata degli ordini. Quindi andiamo lì e aggiungiamo di nuovo l'effetto use
per farlo e per spedire, dobbiamo anche importare l'invio use da React Redux e
quindi qui possiamo accedere a quella funzione di
invio eseguendo use dispatch e quindi qui in use effect, aggiungiamo
la spedizione come dipendenza perché in questa funzione di effetto qui, invio e ora ho bisogno delle
mie azioni di ordine, quindi
lasciami importare tutto come azioni di ordini dalla cartella del negozio, dalla cartella delle azioni, dal file
degli ordini e con quello importato qui , possiamo dire azioni ordini. fetchOrdina così e poi andiamo avanti e facciamo quella richiesta e quindi
ora se salviamo questo e andiamo alla schermata degli ordini, è inizialmente
vuoto ma molto veloce e carica tutti gli ordini che abbiamo archiviato e che sono questi tre ordini che ho
qui e, naturalmente, possiamo espandere questo come prima. Ora anche uno spinner di caricamento sarebbe bello e ovviamente puoi anche
mettere in pausa
il video qui e provare questo da solo.
Lo farò rapidamente allo stesso modo di prima: importare lo
stato d'uso da React, quindi impostare lo stato isLoading e impostare isLoad eseguendo lo stato d'uso e impostandolo su false
inizialmente e poi qui nell'effetto, alla fine voglio per utilizzare async wait.
Ora ho detto che non puoi o non dovresti aggiungere asincrono qui, quindi possiamo usare semplicemente qui o avvolgerlo in una
funzione di aiuto.
Ora userò solo la chiamata then, quindi imposterò isLoading su true qui e quindi aggiungerò quindi qui e una volta fatto, so
che abbiamo una risposta, quindi qui imposterò isLoading su false.
Ora tieni presente che qui non sto gestendo gli errori, quindi
se questo non riesce non lo gestiamo, invece saremo sempre
nello stato di caricamento, quindi ovviamente potresti prendere in considerazione
l'idea di aggiungere anche la gestione degli errori. Non lo farò qui perché ho
mostrato come funziona, per non gonfiare troppo questo modulo,
non lo implementerò, ma posso
ma ovviamente potresti gestire gli errori qui se vuoi usarlo quindi avvicinati qui aggiungendo anche
la cattura, questo
è qualcosa che puoi assolutamente fare qui.
Mi concentrerò
sulla parte di caricamento comunque. Ora poiché ho impostato tutto ciò, possiamo importare l'indicatore
di attività e importare il
componente di visualizzazione e per alcuni stili, anche importare l'API del foglio di stile da React Native e quindi verificare se siamo nello
stato di caricamento, nel qual caso I voglio restituire qui il mio indicatore di attività centrato con una dimensione grande e un
colore che dovrebbe essere i colori che devi importare, quindi primario, quindi assicurati di avere quell'importazione dei
colori aggiunta e con quella aggiunta, qui aggiungerò lo stile uguale agli stili. centrato o comunque si desidera nominarlo e ora aggiungere gli oggetti di
stile qui con l'aiuto del foglio di stile. creare e centrare dovrebbe avere
la configurazione di flex one, giustificare il centro contenuti e allineare il centro elementi,
in questo modo. Detto questo se lo salviamo, diamo un'occhiata agli ordini, vediamo il filatore. Anche in questo caso si sta caricando
molto velocemente ma puoi vederlo se guardi da vicino, ecco lo spinner per una frazione
di secondo e, successivamente, gli ordini vengono caricati. Quindi ora funziona, l'archiviazione e il recupero degli ordini funziona
e con ciò abbiamo implementato le richieste HTTP e l'utilizzo di un server per l'archiviazione dei dati in questa app.