1
00:00:02,270 --> 00:00:07,520
Quindi l'archiviazione è ottima, il recupero sarebbe anche dolce e alla fine, voglio assicurarmi che quando ad

2
00:00:07,520 --> 00:00:10,510
esempio visitiamo la schermata di panoramica dei prodotti, raggiungiamo

3
00:00:10,580 --> 00:00:15,200
semplicemente il server e prendiamo tutti i prodotti da lì, in modo che su

4
00:00:15,290 --> 00:00:16,510
questa schermata ,

5
00:00:16,550 --> 00:00:19,390
ogni volta che lo visitiamo, cariciamo gli ultimi prodotti.

6
00:00:19,400 --> 00:00:22,500
Ora, per questo, dobbiamo inviare una richiesta HTTP da lì

7
00:00:22,520 --> 00:00:28,250
e quindi alla fine quello che voglio fare è inviare una nuova azione Redux che raggiungerà il server, ottenere i

8
00:00:28,250 --> 00:00:35,590
miei prodotti da lì e quindi impostare i prodotti nel mio negozio. Quindi ho bisogno di un'azione nuova di zecca

9
00:00:35,620 --> 00:00:43,060
qui, impostare prodotti, di cui non avevo bisogno prima perché abbiamo lavorato solo con prodotti fittizi ma ora

10
00:00:43,060 --> 00:00:50,660
non è più il caso, quindi ora i prodotti impostati dovrebbero essere spediti e avrò bisogno di un

11
00:00:50,660 --> 00:00:58,110
nuovo creatore di azioni qui che chiamerò fetch products. Per questo non ho un identificatore perché non lo spedirò mai

12
00:00:58,110 --> 00:01:01,310
come un'azione che dovrebbe raggiungere il riduttore, invece questo

13
00:01:01,310 --> 00:01:06,110
sarà solo il mio creatore di azioni con il codice asincrono con la richiesta HTTP.

14
00:01:06,110 --> 00:01:12,950
Non avrà bisogno di argomenti, ma grazie a Redux Thunk, restituisce una funzione che ottiene quella funzione di invio come

15
00:01:13,070 --> 00:01:16,470
argomento e lì alla fine, voglio inviare un oggetto

16
00:01:16,490 --> 00:01:23,460
azione in cui il tipo è impostato prodotti e dove voglio inoltrare il mio prodotti ma ovviamente non dovrebbe essere un

17
00:01:23,480 --> 00:01:30,490
array vuoto ma i prodotti che ottengo dalla mia API. Quindi possiamo quindi fare una specie di copia

18
00:01:30,490 --> 00:01:38,610
di questo codice qui, inclusa la parte di spedizione asincrona qui, fino a lì dove otteniamo i dati di risposta,

19
00:01:38,610 --> 00:01:40,590
copiarli dal creare prodotto e

20
00:01:40,590 --> 00:01:47,810
sostituire questa parte qui con esso e ora quello che facciamo è inviamo una richiesta allo stesso

21
00:01:47,970 --> 00:01:52,530
URL di prima che ha senso perché è lì che vengono

22
00:01:52,530 --> 00:01:54,380
archiviati i prodotti.

23
00:01:54,390 --> 00:01:58,650
Tuttavia ora voglio impostare una richiesta get e questo è in realtà l'impostazione predefinita

24
00:01:58,740 --> 00:02:04,380
quando utilizziamo il recupero, quindi non è necessario impostarlo. Per ottenere una richiesta, non è nemmeno necessario impostare alcuna

25
00:02:04,380 --> 00:02:04,860
intestazione

26
00:02:04,890 --> 00:02:09,150
e non è possibile impostare un corpo, quindi in realtà qui, possiamo eliminare completamente questo secondo

27
00:02:09,150 --> 00:02:12,020
argomento su fetch, inviamo semplicemente una richiesta di recupero come questa.

28
00:02:12,210 --> 00:02:18,000
Ora la risposta recupererà i nostri dati, ma ora c'è una caratteristica importante nel formato

29
00:02:18,000 --> 00:02:21,880
di quei dati ed è meglio se semplicemente li vediamo.

30
00:02:21,900 --> 00:02:28,470
Quindi consenti a me di registrare i dati di risposta qui e commentarli per il momento o possiamo lasciarli lì

31
00:02:28,470 --> 00:02:29,680
dentro, non fa

32
00:02:29,700 --> 00:02:32,050
alcun danno, non fa nulla di utile,

33
00:02:32,100 --> 00:02:37,200
non lo stiamo gestendo nel riduttore ma registriamolo e ora andiamo alla schermata di panoramica dei

34
00:02:37,200 --> 00:02:44,230
prodotti e assicuriamoci che inviamo questa azione di recupero dei prodotti. Ora per fortuna, ho già accesso alla funzione

35
00:02:44,230 --> 00:02:48,670
di spedizione Redux lì nella panoramica dei prodotti, quindi ora ho solo

36
00:02:48,850 --> 00:02:55,210
bisogno di aggiungere l'effetto d'uso in modo da poterlo attivare ogni volta che questo componente viene caricato.

37
00:02:55,210 --> 00:03:04,760
Quindi, qui, posso aggiungere l'effetto d'uso e nella mia funzione qui, posso chiamare il dispacciamento e ora raggiungere le mie azioni

38
00:03:04,790 --> 00:03:08,510
di prodotto che devo quindi importare come azioni

39
00:03:08,510 --> 00:03:22,210
di prodotti da azioni di negozio prodotti, come questo, che dovrebbero essere azioni e ora utilizzare le azioni dei prodotti qui per attivare la mia azione di recupero dei prodotti

40
00:03:22,250 --> 00:03:29,240
che alla fine eseguirà questa richiesta HTTP e questo effetto dovrebbe essere eseguito ogni volta

41
00:03:29,240 --> 00:03:36,260
che il mio componente viene caricato. Quindi posso aggiungere un array vuoto e in realtà aggiungere la mia unica

42
00:03:36,260 --> 00:03:38,300
dipendenza che ho che è la

43
00:03:38,310 --> 00:03:44,070
spedizione, qui è l'unica dipendenza che definiamo all'interno del nostro componente, in modo che questo non riesca mai più a funzionare.

44
00:03:44,150 --> 00:03:48,350
L'unica volta che verrà eseguito è quando questo componente viene caricato ed è esattamente

45
00:03:48,410 --> 00:03:49,830
quello che dovrebbe essere,

46
00:03:49,850 --> 00:03:52,950
ogni volta che visiterò lo schermo, voglio attivare questo effetto qui.

47
00:03:53,270 --> 00:03:57,410
Quindi, se ora lo salvo, salviamo questo e ora mentre questo si carica,

48
00:03:57,440 --> 00:04:03,780
vedi qui nel registro, questo è quello che è successo qui sia su Android che su iOS ed è per questo

49
00:04:03,790 --> 00:04:05,520
che lo vedo due volte.

50
00:04:05,560 --> 00:04:07,460
Questo è ciò che ho ottenuto

51
00:04:07,510 --> 00:04:09,900
alla fine, questo oggetto è stato restituito da Firebase.

52
00:04:09,910 --> 00:04:15,970
È un oggetto con tutti i miei prodotti e ne ho solo uno, motivo per cui ne vedo solo uno qui e ogni

53
00:04:15,970 --> 00:04:18,190
oggetto è abbinato al suo ID univoco, ma questo

54
00:04:18,700 --> 00:04:19,510
è importante.

55
00:04:19,510 --> 00:04:25,210
Non torniamo in array, recuperiamo un oggetto con ID univoci come chiavi e i valori per

56
00:04:25,210 --> 00:04:30,760
queste chiavi sono i miei dati oggetto e dobbiamo solo saperlo per gestirli correttamente.

57
00:04:30,760 --> 00:04:32,050
Quindi, nella nostra

58
00:04:32,050 --> 00:04:34,200
azione, ecco come appaiono i dati

59
00:04:34,270 --> 00:04:38,790
di risposta, ovviamente nella mia app lavoro con un array, quindi devo trasformarlo.

60
00:04:38,950 --> 00:04:43,980
Quindi i miei prodotti caricati o comunque tu voglia chiamarli qui

61
00:04:44,200 --> 00:04:49,580
dovrebbero essere un array vuoto e ora possiamo scorrere attraverso quell'oggetto per

62
00:04:49,610 --> 00:04:54,570
mappare i dati dell'oggetto, i prodotti dell'oggetto ai prodotti dell'array.

63
00:04:54,570 --> 00:05:00,490
È relativamente semplice da fare, possiamo aggiungere un ciclo for / in qui con la nostra chiave

64
00:05:00,490 --> 00:05:09,190
in cui passiamo attraverso tutti i dati di risposta che abbiamo recuperato qui alla fine e poi qui, aggiungo ogni prodotto ai miei prodotti caricati

65
00:05:09,250 --> 00:05:13,240
con push, in modo che questo l'array cresce nel tempo e

66
00:05:13,240 --> 00:05:19,420
quello che aggiungo qui alla fine è solo un nuovo prodotto, usando il modello del prodotto che quindi

67
00:05:19,420 --> 00:05:20,250
devi

68
00:05:20,260 --> 00:05:25,610
importare, quindi assicurati di avere quell'importazione qui che punta alla cartella dei tuoi modelli e

69
00:05:26,860 --> 00:05:28,660
lì al file del prodotto

70
00:05:29,690 --> 00:05:36,910
e io crea un nuovo prodotto qui in cui il mio ID è quella chiave perché è quell'ID univoco qui che

71
00:05:36,910 --> 00:05:43,820
abbiamo in quell'oggetto per il quale stiamo eseguendo il loop, quindi quella cosa dell'utente, che è ancora U1, dati fittizi

72
00:05:43,820 --> 00:05:51,260
perché non abbiamo dati utente coinvolti qui e poi dobbiamo esaminare l'oggetto che siamo tornati da Firebase per ottenere il titolo e

73
00:05:51,260 --> 00:05:52,180
così via.

74
00:05:52,220 --> 00:05:58,720
Quindi qui, il nostro titolo per questo nuovo prodotto che stiamo creando è semplicemente resData per la chiave fornita. titolo e lo stesso ovviamente

75
00:05:58,760 --> 00:06:00,380
qui

76
00:06:00,380 --> 00:06:05,920
per imageUrl, quindi. URL dell'immagine. Per la

77
00:06:09,440 --> 00:06:19,610
descrizione e ovviamente anche per il prezzo, così. Quindi questo aggiunge tutto ai prodotti caricati e ora i prodotti

78
00:06:19,610 --> 00:06:25,570
caricati saranno un array popolato che posso aggiungere qui all'azione che viene inviata, all'azione

79
00:06:25,580 --> 00:06:27,070
dei prodotti impostati.

80
00:06:27,230 --> 00:06:32,530
Quindi l'unica cosa che manca è che ora andiamo al riduttore e lì, possiamo gestire prodotti fissi, forse qui come

81
00:06:32,690 --> 00:06:38,080
primo caso, ma ovviamente la posizione non ha importanza. Aggiungi i prodotti impostati qui e

82
00:06:38,080 --> 00:06:43,660
per questo, assicurati di importarli dal tuo file di azioni e poi lì, è una

83
00:06:43,670 --> 00:06:49,230
cosa molto banale che stiamo per fare. Alla fine ho solo bisogno di

84
00:06:49,230 --> 00:06:59,090
restituire un nuovo stato in cui i prodotti disponibili sono uguali all'azione. prodotti, quindi ai prodotti che ho derivato qui nel mio creatore

85
00:06:59,330 --> 00:07:05,810
di azioni che aggiungo all'azione inviata. E per il prodotto

86
00:07:06,280 --> 00:07:14,210
utente, è abbastanza simile, c'è azione. prodotti, appena filtrati per tutti i prodotti che hanno il mio ID utente, quindi in

87
00:07:15,450 --> 00:07:20,370
questo modo e al momento a causa del mio codice fittizio qui dove codifico il mio ID utente, ciò ovviamente

88
00:07:20,490 --> 00:07:23,670
significa che tutti i prodotti caricati sono trattati come i miei prodotti.

89
00:07:23,670 --> 00:07:29,790
Questo è qualcosa che cambieremo in seguito una volta aggiunta l'autenticazione. Quindi, ora che se viene ricaricato, vedi

90
00:07:30,080 --> 00:07:35,120
che iniziamo con i dati fittizi, ma questi vengono immediatamente sostituiti

91
00:07:35,420 --> 00:07:39,830
con questi dati caricati. Quindi il caricamento dei dati

92
00:07:39,830 --> 00:07:44,370
funziona bene, possiamo lavorarci come potremmo con i nostri dati qui.

93
00:07:44,390 --> 00:07:49,340
Ovviamente non stiamo memorizzando gli ordini sul server e niente del genere, ma siamo in grado di caricare i nostri

94
00:07:49,340 --> 00:07:51,410
dati che abbiamo precedentemente archiviato sul server.