Quindi, ora che abbiamo aggiunto l'archiviazione, il recupero, l'aggiornamento e l'eliminazione e quindi tutte le funzionalità di base e
abbiamo dato un'occhiata alla visualizzazione di un filatore di caricamento e alla gestione
degli errori, mancano due cose.
Uno è che quando effettuiamo effettivamente un ordine, lo inviamo anche a un server e lo memorizziamo anche lì e non
solo localmente perché in questo momento ovviamente
quando ordiniamo qualcosa lo vediamo qui ma non appena ricarichiamo l'app poiché non la stiamo
memorizzando su un server, che è andata persa, quindi
questa è una cosa.
L'altra cosa è ovviamente che mostriamo solo uno spinner di caricamento
qui e gestiamo anche solo gli errori qui. Nella schermata di amministrazione se qualcosa
va storto, non otteniamo alcun errore, anche qui se lo modificiamo e lo inviamo, non
vediamo alcun filatore di caricamento mentre stiamo aspettando che venga inviato.
Quindi è anche qualcosa che potremmo migliorare
ed è proprio la parte con cui voglio iniziare.
Quindi qui nella schermata di modifica del prodotto quando inviamo l'aggiornamento o la creazione, in entrambi i casi
questo richiede ovviamente un po 'di tempo e in effetti otteniamo una promessa qui perché sia nell'aggiornamento che nella creazione del
prodotto, stiamo usando la funzione Redux Thunk di restituendo qui una funzione di invio asincrono che pertanto restituisce una
promessa che pertanto viene restituita come parte della nostra chiamata di funzione di invio qui.
Pertanto, in realtà otteniamo le informazioni, sia che stiamo aspettando la risposta, sia che si sia verificato
un errore o che sia stato
fatto, dobbiamo solo usarle
e ovviamente possiamo usarle in un modo simile a quello che abbiamo fatto prima, con lo stato d'uso importato da React e
quindi gestendo qui il caricamento e lo stato di errore. Nota a margine, puoi ovviamente lavorare anche con un
riduttore in cui unisci entrambi gli stati se lo desideri con l'aiuto del gancio del riduttore.
Qui, tuttavia, mi atterrò a isLoading e imposterò isLoading e inizialmente ovviamente questo è falso e anche l'errore e impostare le
variabili di errore qui con lo stato d'uso come questo, che inizialmente non è definito e ora dobbiamo solo impostare questo come noi
' ri-invio di azioni o durante la ricezione di errori.
Quindi qui quando stiamo per spedire questo, non importa se stiamo modificando o
se stiamo creando, voglio impostare isLoading su true e voglio anche impostare il mio errore qui su false o non su false, su null , ripristinalo.
Ora, una volta terminato, voglio fare qualcos'altro ma, prima di tutto, dobbiamo prima aspettare che
il dispacciamento sia finito.
Ora possiamo quindi trasformarlo di nuovo in una funzione asincrona, solo per poter utilizzare la parola
chiave in attesa, l'alternativa sarebbe quella di non trasformarla in una funzione asincrona e aggiungere semplicemente e catturare da quel
momento in
poi, che funzionerebbe anche ma Mi piace usare Async wait. Quindi ora possiamo aspettare che entrambi i dispacci finiscano, ovviamente
solo uno dei due verrà eseguito perché è una condizione if, ma possiamo aspettare
che finisca e quindi dopo questo blocco, sappiamo
che verrà fatto il dispacciamento, quindi qui può impostare isLoading su false. Quindi questo è lo stato di caricamento, ora
per gestire gli errori, dobbiamo solo avvolgerlo con un blocco try catch e possiamo effettivamente avvolgere l'intero
blocco if qui con try catch, quindi prendiamolo, spostiamolo qui e quindi catturiamo qualsiasi potenziale errori che potremmo arrivare
qui e ora qui, ovviamente voglio impostare il mio errore sull'errore che sto arrivando
qui
o sul messaggio di errore che sto arrivando qui Ora stiamo impostando l'errore, stiamo impostando il
caricamento stato, ovviamente questo non ha alcun effetto qui su questa schermata. Quindi per mostrare un filatore di caricamento, dobbiamo importare l'indicatore di attività
da React Native, l'indicatore di attività da
React Native e per mostrare un errore, voglio anche lanciare un
avviso e, per questo, devi assicurarti che stai importando l'avviso che stiamo già facendo. Ora come passaggio successivo, per gestire lo stato di caricamento, magari laggiù prima
di restituire il mio modulo, controllerò se isLoading è vero e, se lo è, restituirò la mia vista qui con
l'indicatore di attività qua e là, io ' Imposta la dimensione su grande e imposta il colore su colori e, per questo,
devi assicurarti di importare quel colore costante primario. Quindi assicurati di avere i colori costanti importati
qui, è necessario e ora userò anche il foglio di stile qui per aggiungere un nuovo stile, questo
stile centrato per essere precisi, qui aggiungerò centrato e sì, quindi potremmo anche esternalizzare questo in
un componente di avvolgimento separato, se lo si desidera.
Lì, imposterò flex su uno, giustificherò il contenuto al centro e allineerò anche gli elementi al centro, in questo modo.
Ora possiamo applicare questo stile centrato qui alla vista che avvolgo il mio indicatore di attività impostando
qui lo stile su stili. centrato.
Ora dovremmo vedere questo mentre stiamo caricando e su una nota a margine, ora non dovremmo tornare indietro prima
di aver finito.
Quindi, se aggiungo o rimuovo quel punto esclamativo e poi lascio questo input in modo che questo sia inviato e faccio
clic su Salva,
hai visto lo spinner di caricamento e torniamo indietro solo dopo averlo fatto.
Ora Firebase è super veloce ma comunque, è quello che è successo.
Ora per simulare un errore, andrò alle azioni dei prodotti e lì nell'aggiornamento del prodotto qui, lo rimuoverò di nuovo qui per forzare un errore e aggiungerò anche qualcos'altro,
ora memorizzerò la risposta qui in un costante perché ora mi interessa davvero, voglio assicurarmi
che se la risposta non va bene, quindi se abbiamo un codice di
stato 400 o 500, lancio anche un nuovo errore in
cui dico che qualcosa è andato storto o in cui fai qualsiasi errore gestione che vuoi fare, in modo che
anche in questo caso generiamo un errore. A proposito, farò lo stesso
per l'eliminazione prima di testare questo errore forzato che ho implementato.
Quindi qui per l'eliminazione, voglio anche controllare questo e per quello ovviamente qui, ho
anche bisogno di ottenere la mia risposta in attesa del recupero qui. Va bene, vediamo se quell'errore forzato
per l'aggiornamento a causa del licenziamento è qui,
se ciò ha un effetto. Se ora torno qui all'amministratore, comincio ad aggiungere questo, aggiungo
un punto esclamativo
e faccio clic su questo, ora vedrai che l'aggiornamento è semplicemente respinto, quindi non vediamo il punto esclamativo qui
ma anche non viene visualizzato alcun messaggio di errore che ha senso perché non ho alcuna logica per farlo.
Ora come possiamo gestirlo?
Come ho detto, voglio lanciare
un avviso e quindi userò l'effetto, in modo da utilizzare l'effetto hook che React offre
che troviamo qui, voglio usarlo e posso semplicemente implementarlo qui dopo aver inizializzato
il riduttore diciamo, la posizione esatta non ha importanza. Usa l'effetto qui dovrebbe essere rieseguito ogni volta che l'errore
cambia, quindi se impostiamo questo come errore per non
essere un errore, allora qui controllo se l'errore è vero, quindi se abbiamo un
errore e se lo abbiamo, allora io può lanciare un avviso,
si è verificato un errore.
Voglio emettere il mio errore qui e questo dovrebbe essere il messaggio di errore perché è quello che sto impostando qui,
sto
impostando il mio errore sul messaggio in modo che dovrebbe essere una stringa che posso emettere
e quindi aggiungerò un pulsante dove dico OK che semplicemente respinge questo. Ora anche importante, se riceviamo un errore,
non voglio andare via. Quindi, per evitare che ciò accada, voglio assicurarmi
che qui, questi oggetti di scena, questa navigazione qui venga effettivamente eseguita solo se non finiamo in questo blocco di cattura.
Quindi sostanzialmente qui dopo il blocco if else ma ancora nel blocco try, lì voglio andare via.
Quindi ora diamo un altro tentativo, torniamo qui,
modificalo, aggiungi un punto esclamativo,
fai clic da qualche altra parte, fai clic su Salva e ora ricevo
il mio messaggio di errore qui e rimango su questa pagina e viene anche ripristinato. Posso aggiungerlo di nuovo, fare clic
qui ed è sparito.
D'altra parte se ora risolviamo questo errore qui nelle azioni leggendo che è qui e ora torniamo indietro e diamo
un'occhiata a questo, se lo modifico, aggiungo il
mio punto esclamativo, faccio clic da qualche altra parte e faccio clic su
Salva, ora che tutto funziona come dovrebbe.
Quindi ora funziona davvero e ora si comporta come dovrebbe comportarsi.
Ora puoi ovviamente aggiungere anche uno spinner di caricamento e un gestore di errori qui alla schermata del prodotto utente,
se lo desideri.
Quindi se elimini questo che non farò qui, ma se lo eliminassi, al momento non otterrai
uno spinner, uno spinner
di caricamento, inoltre non otterrai un errore se fallisce. Per risparmiare un po 'di tempo, non lo implementerò qui,
ma potresti implementarlo praticamente nello stesso modo in cui lo abbiamo fatto prima se lo volessi.
Quindi è sicuramente qualcosa che puoi fare anche tu.