1 00:00:02,130 --> 00:00:06,200 Ora, ovviamente, quando si memorizza un ordine, sarebbe anche bello vedere un 2 00:00:06,210 --> 00:00:11,640 piccolo spinner qui quando facciamo clic sul pulsante Ordina ora fino a quando non viene fatto e 3 00:00:11,640 --> 00:00:16,030 possiamo implementare anche questo, dobbiamo solo andare alla schermata del carrello che è dove 4 00:00:16,050 --> 00:00:20,800 spediamo questa azione per inviare un ordine, qui spediamo e ora spediamo qui ovviamente restituisce 5 00:00:20,970 --> 00:00:29,020 una promessa alla fine, proprio perché rimuoviamo dal carrello, come nel caso in cui facciamo clic su questo pulsante, e l'ordine, aggiungi ordine restituirà un promessa 6 00:00:29,020 --> 00:00:33,580 alla fine grazie al nostro cambiamento, quindi la spedizione restituirà quindi una promessa, quindi è 7 00:00:33,580 --> 00:00:36,780 qui che possiamo controllare il nostro stato di caricamento. 8 00:00:36,940 --> 00:00:41,590 Ora per renderlo un po 'più leggibile, lo sposterò da questa funzione anonima 9 00:00:41,590 --> 00:00:46,150 qui e in realtà creerò una nuova funzione memorizzata in una costante 10 00:00:46,160 --> 00:00:53,590 qui nel mio componente ma al di fuori dell'albero jsx e chiamerò questo gestore dell'ordine di invio o niente del genere. 11 00:00:53,660 --> 00:00:56,440 Questa è la stessa funzione che ho 12 00:00:56,510 --> 00:01:04,520 usato prima, ora mi occuperò solo del gestore degli ordini di invio e ora l'idea è semplice, qui aggiungere l'ordine restituirà una promessa 13 00:01:04,520 --> 00:01:10,400 come ho detto, la spedizione quindi restituisce una promessa, quindi possiamo aggiungere asincronizzazione qui che possiamo usare 14 00:01:10,400 --> 00:01:16,440 nuovamente async wait e gestire il caricamento e possibilmente anche lo stato di errore come abbiamo fatto prima. 15 00:01:16,460 --> 00:01:23,940 Quindi dobbiamo solo importare lo stato d'uso da React e ovviamente inizializzare nuovamente il nostro stato. 16 00:01:23,940 --> 00:01:33,150 Quindi qui abbiamo isLoading e set isLoading e inizialmente è falso e se vuoi ciò che non farò qui ma se vuoi, puoi anche aggiungere 17 00:01:33,150 --> 00:01:33,800 la 18 00:01:33,810 --> 00:01:39,810 gestione degli errori nello stesso modo in cui l'abbiamo fatto prima con use state error, forse 19 00:01:39,810 --> 00:01:43,610 use effect per mostrare un avviso e così via, mi 20 00:01:43,650 --> 00:01:45,530 concentrerò sulla parte di caricamento. 21 00:01:45,690 --> 00:01:47,970 Quindi ora qui nel gestore degli 22 00:01:48,000 --> 00:01:50,970 ordini di invio, chiamerò set isLoading e impostarlo 23 00:01:51,210 --> 00:01:56,610 su true, quindi attendiamo questo dispacciamento, quindi aspettiamo che questa promessa sia terminata e di 24 00:01:56,610 --> 00:02:02,760 nuovo questo avvolge in modo invisibile le parti da allora in poi in un blocco perché successivamente 25 00:02:02,760 --> 00:02:04,290 reimposterà il caricamento 26 00:02:04,290 --> 00:02:10,160 su false, non stiamo più caricando e ora possiamo usarlo per mostrare un indicatore di attività. 27 00:02:10,250 --> 00:02:19,880 Quindi importiamo l'indicatore di attività da React Native qui e quello che voglio fare è qui invece 28 00:02:19,910 --> 00:02:22,170 di quel pulsante 29 00:02:22,190 --> 00:02:30,320 ora ordine, voglio mostrare quell'indicatore mentre sto caricando. Quindi qui posso verificare se isLoading è vero, se è 30 00:02:30,320 --> 00:02:40,100 il caso, mostrerò il mio indicatore di attività con una dimensione diciamo piccola e un colore di colori, che è necessario assicurarsi che sia importato, 31 00:02:40,150 --> 00:02:45,200 primario e che si chiude automaticamente e altrimenti se non stiamo caricando, allora 32 00:02:45,240 --> 00:02:47,260 mostrerò questo pulsante ovviamente. 33 00:02:47,340 --> 00:02:53,690 Quindi qui voglio renderizzare questo pulsante nell'altro caso e ora proviamo. 34 00:02:53,720 --> 00:02:55,370 Salviamolo, aggiungilo alla scheda 35 00:02:55,430 --> 00:02:59,030 forse due volte, fai clic su Ordina ora, abbiamo 36 00:02:59,150 --> 00:03:06,560 visto lo spinner per una frazione di secondo qui e ora se diamo un'occhiata agli ordini, ecco il nostro ordine. 37 00:03:06,560 --> 00:03:10,250 Ora assicuriamo che anche gli ordini vengano caricati quando visitiamo lo schermo.