1
00:00:02,550 --> 00:00:04,670
Per essere sicuri che vengano caricati,

2
00:00:04,710 --> 00:00:10,260
dobbiamo nuovamente tornare al creatore dell'azione e aggiungere una nuova azione nel creatore dell'azione degli ordini, mi scusi.

3
00:00:11,590 --> 00:00:18,880
Un identificatore di cui ho bisogno è impostare ordini, così come ne abbiamo avuto uno per impostare prodotti per impostare gli ordini

4
00:00:18,880 --> 00:00:21,340
caricati e quindi qui ho il

5
00:00:21,340 --> 00:00:28,120
mio creatore di azioni di recupero ordini che non accetta argomenti ma che quindi restituisce la mia funzione di spedizione

6
00:00:28,140 --> 00:00:36,580
asincrona qui, grazie a Redux Thunk e lì alla fine invio o invio una nuova azione in cui il tipo è impostato ordini e dove

7
00:00:36,580 --> 00:00:41,250
ho i miei ordini caricati e, naturalmente, quello non dovrebbe essere un array vuoto.

8
00:00:41,290 --> 00:00:47,050
Invece, possiamo prendere in prestito la logica dal creatore dell'azione dei prodotti, da lì per recuperare i prodotti. Possiamo prendere tutta quella

9
00:00:47,110 --> 00:00:55,850
logica, copiarla qui e spostarla sul creatore dell'azione degli ordini ed

10
00:00:55,850 --> 00:00:57,180
eseguirla

11
00:00:57,410 --> 00:01:04,000
prima della spedizione, qui. Ora ovviamente dobbiamo perfezionare questo, ad esempio la richiesta deve essere inviata agli

12
00:01:04,190 --> 00:01:07,940
ordini / U1 e di nuovo che verrà sostituita in seguito con un valore dinamico,

13
00:01:07,940 --> 00:01:13,880
per ora è hardcoded per recuperare gli ordini per questo utente. Dovrebbe essere una richiesta, voglio controllare questo,

14
00:01:13,880 --> 00:01:14,930
va bene.

15
00:01:14,930 --> 00:01:16,250
Qui ho ottenuto

16
00:01:16,250 --> 00:01:19,450
i miei dati di risposta, ora qui ho ricevuto

17
00:01:19,460 --> 00:01:21,550
i miei ordini caricati, che sembra

18
00:01:21,560 --> 00:01:27,170
essere un nome più appropriato, continuo a scorrere tutti i dati che ho e voglio impostare i

19
00:01:27,230 --> 00:01:30,050
miei ordini caricati laggiù ma ora c'è un'importante

20
00:01:30,050 --> 00:01:34,210
differenza, Non creo qui nuovi prodotti che aggiungo agli ordini caricati, ma

21
00:01:34,340 --> 00:01:37,680
ovviamente devo creare nuovi ordini qui e per questo, è

22
00:01:37,890 --> 00:01:43,510
necessario importare gli ordini dal modello di ordine. Ora vedo anche che manca una parentesi

23
00:01:43,520 --> 00:01:48,990
graffa, ora prima di procedere con quello a proposito, devo assicurarmi di catturare anche

24
00:01:49,020 --> 00:01:57,550
tutti gli errori che potrei riscontrare e lì voglio lanciare l'errore, fondamentalmente ripensarlo, assicurarmi raggiunge il mio componente e ho bisogno di

25
00:01:57,550 --> 00:01:59,220
un'altra parentesi graffa

26
00:01:59,260 --> 00:02:04,530
di chiusura ma ora torniamo alla nostra logica qui dove creo nuovi ordini, lì

27
00:02:07,350 --> 00:02:11,480
l'ID è la chiave, proprio come per i prodotti, gli articoli

28
00:02:11,490 --> 00:02:18,920
possono essere trovati nei miei dati di risposta perché noi fondamentalmente torna qui qui, quindi i dati di risposta conterranno

29
00:02:18,920 --> 00:02:24,420
una chiave degli elementi della carta, ad esempio che contiene gli elementi della mia

30
00:02:24,420 --> 00:02:30,360
carta di cui ho bisogno. Quindi i dati di risposta per la chiave data e lì,. cardItems, ecco dove trovo

31
00:02:30,360 --> 00:02:38,200
i miei articoli perché è quello che inviamo qui alla fine per archiviare gli articoli della carta, quindi il

32
00:02:38,200 --> 00:02:42,610
mio ordine che creo qui ovviamente ha bisogno anche dell'importo

33
00:02:42,640 --> 00:02:48,700
totale, lo ottengo dalla chiave resData e poi lì se abbiamo uno sguardo a

34
00:02:48,700 --> 00:02:53,290
Firebase, è quel campo di importo totale qui e la data.

35
00:02:53,330 --> 00:03:00,520
Bene, creo un nuovo oggetto data ma lo inizializzo con la chiave resData. Data.

36
00:03:00,540 --> 00:03:05,760
Ora dobbiamo creare un nuovo oggetto dati grazie alla chiave resData. la data è solo quella stringa di data qui

37
00:03:05,850 --> 00:03:08,190
e ho bisogno di un oggetto data,

38
00:03:08,190 --> 00:03:13,800
non una stringa di data, quindi la avvolgiamo, questa stringa la avvolgiamo con la creazione dell'oggetto data qui e quindi

39
00:03:13,800 --> 00:03:14,220
otteniamo

40
00:03:14,250 --> 00:03:17,130
un oggetto dati e questo è l'ordine che aggiungo qui

41
00:03:17,130 --> 00:03:22,470
per caricare gli ordini, lo facciamo per tutti gli ordini che stiamo recuperando e con quello, possiamo spedire questo

42
00:03:22,470 --> 00:03:24,950
e ora dobbiamo solo gestirlo nel riduttore degli ordini.

43
00:03:25,080 --> 00:03:32,230
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

44
00:03:32,290 --> 00:03:37,500
oggetto stato in cui gli ordini sono uguali all'azione. ordini e questo è tutto ciò

45
00:03:37,570 --> 00:03:39,280
che dobbiamo fare,

46
00:03:39,280 --> 00:03:40,640
così semplice.

47
00:03:40,720 --> 00:03:42,250
Ora, perché è così semplice?

48
00:03:42,280 --> 00:03:47,530
Perché nel creatore dell'azione, facciamo tutto il lavoro. Lì mappiamo i nostri ordini e poi qui, ho

49
00:03:47,530 --> 00:03:50,290
solo la chiave degli ordini nella mia azione che contiene

50
00:03:50,440 --> 00:03:53,740
tutti gli ordini mappati, quindi è proprio quello che devo archiviare qui.

51
00:03:54,150 --> 00:04:03,570
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

52
00:04:03,840 --> 00:04:10,560
per farlo e per spedire, dobbiamo anche importare l'invio use da React Redux e

53
00:04:10,560 --> 00:04:14,470
quindi qui possiamo accedere a quella funzione di

54
00:04:14,730 --> 00:04:20,050
invio eseguendo use dispatch e quindi qui in use effect, aggiungiamo

55
00:04:20,250 --> 00:04:28,420
la spedizione come dipendenza perché in questa funzione di effetto qui, invio e ora ho bisogno delle

56
00:04:28,420 --> 00:04:31,640
mie azioni di ordine, quindi

57
00:04:31,660 --> 00:04:39,730
lasciami importare tutto come azioni di ordini dalla cartella del negozio, dalla cartella delle azioni, dal file

58
00:04:39,730 --> 00:04:50,840
degli ordini e con quello importato qui , possiamo dire azioni ordini. fetchOrdina così e poi andiamo avanti e facciamo quella richiesta e quindi

59
00:04:51,110 --> 00:04:56,690
ora se salviamo questo e andiamo alla schermata degli ordini, è inizialmente

60
00:04:56,690 --> 00:05:05,790
vuoto ma molto veloce e carica tutti gli ordini che abbiamo archiviato e che sono questi tre ordini che ho

61
00:05:05,790 --> 00:05:14,260
qui e, naturalmente, possiamo espandere questo come prima. Ora anche uno spinner di caricamento sarebbe bello e ovviamente puoi anche

62
00:05:14,260 --> 00:05:15,790
mettere in pausa

63
00:05:15,790 --> 00:05:18,830
il video qui e provare questo da solo.

64
00:05:18,830 --> 00:05:24,830
Lo farò rapidamente allo stesso modo di prima: importare lo

65
00:05:24,900 --> 00:05:36,120
stato d'uso da React, quindi impostare lo stato isLoading e impostare isLoad eseguendo lo stato d'uso e impostandolo su false

66
00:05:36,120 --> 00:05:42,540
inizialmente e poi qui nell'effetto, alla fine voglio per utilizzare async wait.

67
00:05:42,550 --> 00:05:50,920
Ora ho detto che non puoi o non dovresti aggiungere asincrono qui, quindi possiamo usare semplicemente qui o avvolgerlo in una

68
00:05:50,920 --> 00:05:52,150
funzione di aiuto.

69
00:05:52,150 --> 00:06:01,320
Ora userò solo la chiamata then, quindi imposterò isLoading su true qui e quindi aggiungerò quindi qui e una volta fatto, so

70
00:06:01,320 --> 00:06:05,880
che abbiamo una risposta, quindi qui imposterò isLoading su false.

71
00:06:05,880 --> 00:06:08,680
Ora tieni presente che qui non sto gestendo gli errori, quindi

72
00:06:08,700 --> 00:06:11,050
se questo non riesce non lo gestiamo, invece saremo sempre

73
00:06:11,070 --> 00:06:13,530
nello stato di caricamento, quindi ovviamente potresti prendere in considerazione

74
00:06:13,530 --> 00:06:18,200
l'idea di aggiungere anche la gestione degli errori. Non lo farò qui perché ho

75
00:06:18,200 --> 00:06:21,570
mostrato come funziona, per non gonfiare troppo questo modulo,

76
00:06:21,660 --> 00:06:23,360
non lo implementerò, ma posso

77
00:06:23,370 --> 00:06:28,710
ma ovviamente potresti gestire gli errori qui se vuoi usarlo quindi avvicinati qui aggiungendo anche

78
00:06:28,710 --> 00:06:30,400
la cattura, questo

79
00:06:30,420 --> 00:06:32,790
è qualcosa che puoi assolutamente fare qui.

80
00:06:33,430 --> 00:06:35,340
Mi concentrerò

81
00:06:35,350 --> 00:06:43,000
sulla parte di caricamento comunque. Ora poiché ho impostato tutto ciò, possiamo importare l'indicatore

82
00:06:43,000 --> 00:06:45,560
di attività e importare il

83
00:06:45,570 --> 00:06:55,340
componente di visualizzazione e per alcuni stili, anche importare l'API del foglio di stile da React Native e quindi verificare se siamo nello

84
00:06:55,370 --> 00:07:04,890
stato di caricamento, nel qual caso I voglio restituire qui il mio indicatore di attività centrato con una dimensione grande e un

85
00:07:04,920 --> 00:07:12,180
colore che dovrebbe essere i colori che devi importare, quindi primario, quindi assicurati di avere quell'importazione dei

86
00:07:12,220 --> 00:07:23,620
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

87
00:07:23,620 --> 00:07:32,190
stile qui con l'aiuto del foglio di stile. creare e centrare dovrebbe avere

88
00:07:32,840 --> 00:07:44,750
la configurazione di flex one, giustificare il centro contenuti e allineare il centro elementi,

89
00:07:44,750 --> 00:07:53,980
in questo modo. Detto questo se lo salviamo, diamo un'occhiata agli ordini, vediamo il filatore. Anche in questo caso si sta caricando

90
00:07:54,010 --> 00:07:59,890
molto velocemente ma puoi vederlo se guardi da vicino, ecco lo spinner per una frazione

91
00:07:59,980 --> 00:08:06,850
di secondo e, successivamente, gli ordini vengono caricati. Quindi ora funziona, l'archiviazione e il recupero degli ordini funziona

92
00:08:07,030 --> 00:08:13,770
e con ciò abbiamo implementato le richieste HTTP e l'utilizzo di un server per l'archiviazione dei dati in questa app.