1 00:00:02,110 --> 00:00:07,990 Quindi, ora che abbiamo aggiunto l'archiviazione, il recupero, l'aggiornamento e l'eliminazione e quindi tutte le funzionalità di base e 2 00:00:07,990 --> 00:00:12,070 abbiamo dato un'occhiata alla visualizzazione di un filatore di caricamento e alla gestione 3 00:00:12,070 --> 00:00:14,020 degli errori, mancano due cose. 4 00:00:14,020 --> 00:00:20,560 Uno è che quando effettuiamo effettivamente un ordine, lo inviamo anche a un server e lo memorizziamo anche lì e non 5 00:00:20,560 --> 00:00:22,900 solo localmente perché in questo momento ovviamente 6 00:00:22,900 --> 00:00:27,760 quando ordiniamo qualcosa lo vediamo qui ma non appena ricarichiamo l'app poiché non la stiamo 7 00:00:27,760 --> 00:00:30,650 memorizzando su un server, che è andata persa, quindi 8 00:00:30,660 --> 00:00:32,160 questa è una cosa. 9 00:00:32,170 --> 00:00:35,130 L'altra cosa è ovviamente che mostriamo solo uno spinner di caricamento 10 00:00:35,200 --> 00:00:39,570 qui e gestiamo anche solo gli errori qui. Nella schermata di amministrazione se qualcosa 11 00:00:39,610 --> 00:00:43,970 va storto, non otteniamo alcun errore, anche qui se lo modificiamo e lo inviamo, non 12 00:00:44,080 --> 00:00:47,320 vediamo alcun filatore di caricamento mentre stiamo aspettando che venga inviato. 13 00:00:47,320 --> 00:00:49,120 Quindi è anche qualcosa che potremmo migliorare 14 00:00:49,150 --> 00:00:51,310 ed è proprio la parte con cui voglio iniziare. 15 00:00:52,210 --> 00:00:57,670 Quindi qui nella schermata di modifica del prodotto quando inviamo l'aggiornamento o la creazione, in entrambi i casi 16 00:00:57,670 --> 00:01:04,210 questo richiede ovviamente un po 'di tempo e in effetti otteniamo una promessa qui perché sia nell'aggiornamento che nella creazione del 17 00:01:04,600 --> 00:01:10,270 prodotto, stiamo usando la funzione Redux Thunk di restituendo qui una funzione di invio asincrono che pertanto restituisce una 18 00:01:10,270 --> 00:01:15,340 promessa che pertanto viene restituita come parte della nostra chiamata di funzione di invio qui. 19 00:01:15,520 --> 00:01:20,680 Pertanto, in realtà otteniamo le informazioni, sia che stiamo aspettando la risposta, sia che si sia verificato 20 00:01:20,710 --> 00:01:22,470 un errore o che sia stato 21 00:01:22,630 --> 00:01:24,380 fatto, dobbiamo solo usarle 22 00:01:24,520 --> 00:01:31,300 e ovviamente possiamo usarle in un modo simile a quello che abbiamo fatto prima, con lo stato d'uso importato da React e 23 00:01:31,300 --> 00:01:37,650 quindi gestendo qui il caricamento e lo stato di errore. Nota a margine, puoi ovviamente lavorare anche con un 24 00:01:37,650 --> 00:01:43,080 riduttore in cui unisci entrambi gli stati se lo desideri con l'aiuto del gancio del riduttore. 25 00:01:43,380 --> 00:01:52,750 Qui, tuttavia, mi atterrò a isLoading e imposterò isLoading e inizialmente ovviamente questo è falso e anche l'errore e impostare le 26 00:01:52,750 --> 00:02:02,510 variabili di errore qui con lo stato d'uso come questo, che inizialmente non è definito e ora dobbiamo solo impostare questo come noi 27 00:02:02,880 --> 00:02:07,470 ' ri-invio di azioni o durante la ricezione di errori. 28 00:02:07,470 --> 00:02:13,530 Quindi qui quando stiamo per spedire questo, non importa se stiamo modificando o 29 00:02:13,530 --> 00:02:25,000 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. 30 00:02:25,190 --> 00:02:30,420 Ora, una volta terminato, voglio fare qualcos'altro ma, prima di tutto, dobbiamo prima aspettare che 31 00:02:30,420 --> 00:02:31,840 il dispacciamento sia finito. 32 00:02:31,860 --> 00:02:37,770 Ora possiamo quindi trasformarlo di nuovo in una funzione asincrona, solo per poter utilizzare la parola 33 00:02:37,770 --> 00:02:44,720 chiave in attesa, l'alternativa sarebbe quella di non trasformarla in una funzione asincrona e aggiungere semplicemente e catturare da quel 34 00:02:44,770 --> 00:02:45,810 momento in 35 00:02:45,810 --> 00:02:52,620 poi, che funzionerebbe anche ma Mi piace usare Async wait. Quindi ora possiamo aspettare che entrambi i dispacci finiscano, ovviamente 36 00:02:52,620 --> 00:02:57,230 solo uno dei due verrà eseguito perché è una condizione if, ma possiamo aspettare 37 00:02:57,330 --> 00:03:00,380 che finisca e quindi dopo questo blocco, sappiamo 38 00:03:00,370 --> 00:03:08,370 che verrà fatto il dispacciamento, quindi qui può impostare isLoading su false. Quindi questo è lo stato di caricamento, ora 39 00:03:08,370 --> 00:03:15,420 per gestire gli errori, dobbiamo solo avvolgerlo con un blocco try catch e possiamo effettivamente avvolgere l'intero 40 00:03:15,420 --> 00:03:23,250 blocco if qui con try catch, quindi prendiamolo, spostiamolo qui e quindi catturiamo qualsiasi potenziale errori che potremmo arrivare 41 00:03:23,250 --> 00:03:29,400 qui e ora qui, ovviamente voglio impostare il mio errore sull'errore che sto arrivando 42 00:03:29,400 --> 00:03:30,000 qui 43 00:03:33,030 --> 00:03:39,720 o sul messaggio di errore che sto arrivando qui Ora stiamo impostando l'errore, stiamo impostando il 44 00:03:39,780 --> 00:03:50,380 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à 45 00:03:50,410 --> 00:03:54,120 da React Native, l'indicatore di attività da 46 00:03:54,130 --> 00:03:58,930 React Native e per mostrare un errore, voglio anche lanciare un 47 00:03:58,930 --> 00:04:10,540 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 48 00:04:10,540 --> 00:04:19,930 di restituire il mio modulo, controllerò se isLoading è vero e, se lo è, restituirò la mia vista qui con 49 00:04:19,930 --> 00:04:30,010 l'indicatore di attività qua e là, io ' Imposta la dimensione su grande e imposta il colore su colori e, per questo, 50 00:04:30,310 --> 00:04:38,980 devi assicurarti di importare quel colore costante primario. Quindi assicurati di avere i colori costanti importati 51 00:04:38,980 --> 00:04:47,480 qui, è necessario e ora userò anche il foglio di stile qui per aggiungere un nuovo stile, questo 52 00:04:47,500 --> 00:04:55,120 stile centrato per essere precisi, qui aggiungerò centrato e sì, quindi potremmo anche esternalizzare questo in 53 00:04:55,120 --> 00:04:59,910 un componente di avvolgimento separato, se lo si desidera. 54 00:05:00,010 --> 00:05:08,300 Lì, imposterò flex su uno, giustificherò il contenuto al centro e allineerò anche gli elementi al centro, in questo modo. 55 00:05:08,410 --> 00:05:15,250 Ora possiamo applicare questo stile centrato qui alla vista che avvolgo il mio indicatore di attività impostando 56 00:05:15,250 --> 00:05:19,990 qui lo stile su stili. centrato. 57 00:05:20,040 --> 00:05:26,460 Ora dovremmo vedere questo mentre stiamo caricando e su una nota a margine, ora non dovremmo tornare indietro prima 58 00:05:26,460 --> 00:05:27,480 di aver finito. 59 00:05:27,840 --> 00:05:33,700 Quindi, se aggiungo o rimuovo quel punto esclamativo e poi lascio questo input in modo che questo sia inviato e faccio 60 00:05:33,700 --> 00:05:34,640 clic su Salva, 61 00:05:34,770 --> 00:05:38,400 hai visto lo spinner di caricamento e torniamo indietro solo dopo averlo fatto. 62 00:05:38,400 --> 00:05:42,180 Ora Firebase è super veloce ma comunque, è quello che è successo. 63 00:05:42,330 --> 00:05:52,970 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, 64 00:05:52,970 --> 00:05:58,310 ora memorizzerò la risposta qui in un costante perché ora mi interessa davvero, voglio assicurarmi 65 00:05:58,400 --> 00:06:03,130 che se la risposta non va bene, quindi se abbiamo un codice di 66 00:06:03,200 --> 00:06:07,240 stato 400 o 500, lancio anche un nuovo errore in 67 00:06:07,250 --> 00:06:14,360 cui dico che qualcosa è andato storto o in cui fai qualsiasi errore gestione che vuoi fare, in modo che 68 00:06:14,360 --> 00:06:20,200 anche in questo caso generiamo un errore. A proposito, farò lo stesso 69 00:06:20,210 --> 00:06:25,620 per l'eliminazione prima di testare questo errore forzato che ho implementato. 70 00:06:25,670 --> 00:06:29,150 Quindi qui per l'eliminazione, voglio anche controllare questo e per quello ovviamente qui, ho 71 00:06:29,360 --> 00:06:36,120 anche bisogno di ottenere la mia risposta in attesa del recupero qui. Va bene, vediamo se quell'errore forzato 72 00:06:36,120 --> 00:06:40,400 per l'aggiornamento a causa del licenziamento è qui, 73 00:06:40,470 --> 00:06:46,680 se ciò ha un effetto. Se ora torno qui all'amministratore, comincio ad aggiungere questo, aggiungo 74 00:06:46,680 --> 00:06:48,010 un punto esclamativo 75 00:06:48,030 --> 00:06:54,150 e faccio clic su questo, ora vedrai che l'aggiornamento è semplicemente respinto, quindi non vediamo il punto esclamativo qui 76 00:06:54,240 --> 00:07:00,230 ma anche non viene visualizzato alcun messaggio di errore che ha senso perché non ho alcuna logica per farlo. 77 00:07:00,310 --> 00:07:01,700 Ora come possiamo gestirlo? 78 00:07:01,720 --> 00:07:04,310 Come ho detto, voglio lanciare 79 00:07:04,330 --> 00:07:10,610 un avviso e quindi userò l'effetto, in modo da utilizzare l'effetto hook che React offre 80 00:07:10,690 --> 00:07:16,690 che troviamo qui, voglio usarlo e posso semplicemente implementarlo qui dopo aver inizializzato 81 00:07:16,710 --> 00:07:24,490 il riduttore diciamo, la posizione esatta non ha importanza. Usa l'effetto qui dovrebbe essere rieseguito ogni volta che l'errore 82 00:07:24,880 --> 00:07:28,670 cambia, quindi se impostiamo questo come errore per non 83 00:07:28,750 --> 00:07:34,510 essere un errore, allora qui controllo se l'errore è vero, quindi se abbiamo un 84 00:07:34,510 --> 00:07:39,010 errore e se lo abbiamo, allora io può lanciare un avviso, 85 00:07:39,010 --> 00:07:41,380 si è verificato un errore. 86 00:07:41,380 --> 00:07:48,920 Voglio emettere il mio errore qui e questo dovrebbe essere il messaggio di errore perché è quello che sto impostando qui, 87 00:07:48,920 --> 00:07:49,350 sto 88 00:07:49,370 --> 00:07:55,270 impostando il mio errore sul messaggio in modo che dovrebbe essere una stringa che posso emettere 89 00:07:55,270 --> 00:08:04,610 e quindi aggiungerò un pulsante dove dico OK che semplicemente respinge questo. Ora anche importante, se riceviamo un errore, 90 00:08:04,610 --> 00:08:11,180 non voglio andare via. Quindi, per evitare che ciò accada, voglio assicurarmi 91 00:08:11,210 --> 00:08:19,670 che qui, questi oggetti di scena, questa navigazione qui venga effettivamente eseguita solo se non finiamo in questo blocco di cattura. 92 00:08:19,700 --> 00:08:27,390 Quindi sostanzialmente qui dopo il blocco if else ma ancora nel blocco try, lì voglio andare via. 93 00:08:27,410 --> 00:08:29,300 Quindi ora diamo un altro tentativo, torniamo qui, 94 00:08:29,300 --> 00:08:30,710 modificalo, aggiungi un punto esclamativo, 95 00:08:30,710 --> 00:08:33,920 fai clic da qualche altra parte, fai clic su Salva e ora ricevo 96 00:08:33,920 --> 00:08:40,730 il mio messaggio di errore qui e rimango su questa pagina e viene anche ripristinato. Posso aggiungerlo di nuovo, fare clic 97 00:08:40,760 --> 00:08:43,430 qui ed è sparito. 98 00:08:43,700 --> 00:08:50,150 D'altra parte se ora risolviamo questo errore qui nelle azioni leggendo che è qui e ora torniamo indietro e diamo 99 00:08:50,150 --> 00:08:52,960 un'occhiata a questo, se lo modifico, aggiungo il 100 00:08:52,970 --> 00:08:57,170 mio punto esclamativo, faccio clic da qualche altra parte e faccio clic su 101 00:08:57,170 --> 00:08:59,880 Salva, ora che tutto funziona come dovrebbe. 102 00:08:59,900 --> 00:09:04,200 Quindi ora funziona davvero e ora si comporta come dovrebbe comportarsi. 103 00:09:04,220 --> 00:09:09,890 Ora puoi ovviamente aggiungere anche uno spinner di caricamento e un gestore di errori qui alla schermata del prodotto utente, 104 00:09:09,890 --> 00:09:10,840 se lo desideri. 105 00:09:10,850 --> 00:09:15,800 Quindi se elimini questo che non farò qui, ma se lo eliminassi, al momento non otterrai 106 00:09:15,800 --> 00:09:17,300 uno spinner, uno spinner 107 00:09:17,300 --> 00:09:22,610 di caricamento, inoltre non otterrai un errore se fallisce. Per risparmiare un po 'di tempo, non lo implementerò qui, 108 00:09:22,610 --> 00:09:26,590 ma potresti implementarlo praticamente nello stesso modo in cui lo abbiamo fatto prima se lo volessi. 109 00:09:26,600 --> 00:09:28,670 Quindi è sicuramente qualcosa che puoi fare anche tu.