1
00:00:02,060 --> 00:00:07,190
Quindi nel creatore di azioni di creazione del prodotto che attualmente è una funzione che restituisce semplicemente

2
00:00:07,550 --> 00:00:12,560
un'azione, ora possiamo modificarlo un po '. Invece di restituire un'azione, ora possiamo restituire

3
00:00:12,560 --> 00:00:13,050
un'altra

4
00:00:13,070 --> 00:00:18,890
funzione lì grazie a Redux Thunk, grazie a questo pacchetto possiamo farlo ora e questa sarà una funzione

5
00:00:18,890 --> 00:00:29,650
che riceve la funzione di invio come argomento e quindi a sua volta deve inviare un azione. Quindi, qui, in questa funzione di ritorno, ora non ho

6
00:00:29,650 --> 00:00:31,100
semplicemente bisogno

7
00:00:31,180 --> 00:00:36,310
di non restituirlo ma di spedire questa azione, questa

8
00:00:36,310 --> 00:00:42,090
è la differenza importante e qui mi manca una parentesi graffa.

9
00:00:42,130 --> 00:00:43,110
Allora, cos'è successo?

10
00:00:43,360 --> 00:00:50,230
Cambio prodotto per essere una funzione che in realtà possiamo ancora inviare dall'interno dei nostri componenti ma che ora

11
00:00:50,740 --> 00:00:53,500
può ancora funzionare come prima, quindi

12
00:00:53,530 --> 00:00:58,870
non abbiamo bisogno di cambiare tutti questi creatori di azioni, quindi puoi rimanere fedele alla

13
00:00:58,870 --> 00:01:03,770
vecchia sintassi ma ora grazie a Redux Thunk, una sintassi alternativa, per così

14
00:01:03,970 --> 00:01:10,180
dire, è supportata anche quando questa funzione di creatore di azioni non restituisce immediatamente un oggetto di

15
00:01:10,180 --> 00:01:15,970
azione ma invece, dove restituisce una funzione e, se lo fa, Redux Thunk interverrà e si

16
00:01:16,510 --> 00:01:22,180
assicurerà che tutto ancora funziona e se restituisce una funzione, allora questa è una funzione che

17
00:01:22,390 --> 00:01:28,390
deve ricevere un argomento, la funzione di invio che verrà passata automaticamente da Redux Thunk, quindi Redux

18
00:01:28,390 --> 00:01:28,900
Thunk

19
00:01:29,620 --> 00:01:35,560
alla fine chiamerà questa funzione per te e quindi puoi quindi invia una nuova azione e

20
00:01:35,560 --> 00:01:39,680
qui, invia l'oggetto azione reale che in precedenza volevamo inviare, ma

21
00:01:39,850 --> 00:01:47,170
prima di farlo, ora puoi eseguire qualsiasi codice asincrono che desideri e che sarà permesso e non romperà il tuo

22
00:01:47,200 --> 00:01:52,240
Redux perché Redux Thunk si occuperà di questo e puoi saperne di più su

23
00:01:52,240 --> 00:01:56,020
questo nel mio corso React, ad esempio o ovviamente nella

24
00:01:56,110 --> 00:02:00,340
documentazione ufficiale di Redux Thunk, anche nei documenti ufficiali di Redux.

25
00:02:00,350 --> 00:02:05,900
Quindi ora qui possiamo inviare una richiesta HTTP e in React Native, possiamo usare l'API di recupero

26
00:02:05,900 --> 00:02:08,120
che è integrata e il recupero

27
00:02:08,120 --> 00:02:12,590
qui funziona sostanzialmente come l'API di recupero nel browser dove è disponibile anche questa.

28
00:02:12,590 --> 00:02:17,210
Ci vuole un URL a cui si desidera inviare la richiesta e questo è questo URL

29
00:02:17,210 --> 00:02:21,180
che abbiamo qui, quindi copierò quell'URL da Firebase e lo inserirò qui.

30
00:02:21,380 --> 00:02:24,440
Ora il recupero sembra che recuperi sempre solo i

31
00:02:24,440 --> 00:02:30,440
dati, quindi se ottiene dati ma in realtà il nome è un po 'confuso qui, non è solo usato

32
00:02:30,440 --> 00:02:33,950
per ottenere dati, puoi anche usarlo per inviare una richiesta post

33
00:02:34,040 --> 00:02:40,640
o una richiesta put, quindi qualsiasi tipo di richiesta HTTP. Inoltre, non solo inviamo una richiesta a questo URL, ma

34
00:02:40,640 --> 00:02:47,930
ora, come ho detto, Firebase traduce le tue richieste in un tipo di query di database e una struttura di database,

35
00:02:47,930 --> 00:02:50,990
in modo da poter aggiungere qui qualsiasi nodo

36
00:02:50,990 --> 00:02:57,230
desiderato, qualsiasi segmento desiderato, come ad esempio prodotti e Firebase creeranno una cartella qui nel database e memorizzeranno

37
00:02:57,230 --> 00:02:58,410
i tuoi dati.

38
00:02:58,700 --> 00:03:03,800
Importante e questa è solo una cosa specifica di Firebase, è necessario aggiungere. JSON qui.

39
00:03:03,830 --> 00:03:11,140
Quindi non è richiesto a causa di React Native o a causa di Javascript o perché è una richiesta HTTP, questa è

40
00:03:11,140 --> 00:03:15,690
solo una cosa specifica di Firebase. Per impostazione predefinita, questo invierebbe una

41
00:03:15,700 --> 00:03:21,280
richiesta get ma per memorizzare i dati Firebase vuole una richiesta post e per inviarlo, dobbiamo recuperare un

42
00:03:21,280 --> 00:03:27,610
secondo argomento per recuperare che dovrebbe essere un oggetto Javascript. In quel secondo argomento, puoi impostare la chiave

43
00:03:27,610 --> 00:03:34,480
del metodo e descrivere il metodo HTTP di questa richiesta e che può essere ottenuto, inserito

44
00:03:34,480 --> 00:03:42,070
e così via e qui dovrebbe essere post che aggiunge questo prodotto che stiamo per inviare a questo nodo

45
00:03:42,070 --> 00:03:44,130
che sarà creato lì.

46
00:03:44,140 --> 00:03:47,760
Ora puoi anche impostare alcune intestazioni lì e dobbiamo impostare un'intestazione,

47
00:03:47,920 --> 00:03:53,530
dobbiamo aggiungere l'intestazione del tipo di contenuto e devi semplicemente aggiungere intestazioni come oggetto e quindi avere coppie

48
00:03:53,530 --> 00:03:58,950
chiave-valore con i tuoi identificatori di intestazione come chiavi e i valori come valori e qui il

49
00:03:59,200 --> 00:04:04,290
valore è application / json per far sapere a Firebase che stiamo per inviare alcuni

50
00:04:04,360 --> 00:04:06,530
dati JSON e quindi dobbiamo farlo.

51
00:04:06,580 --> 00:04:11,680
Dobbiamo aggiungere un corpo con i dati che vogliamo aggiungere a questa richiesta e i dati dovrebbero essere

52
00:04:11,680 --> 00:04:12,730
nel formato JSON.

53
00:04:12,730 --> 00:04:19,240
Per fortuna, React Native supporta l'oggetto JSON supportato anche da Javascript lato browser e lì possiamo

54
00:04:19,240 --> 00:04:26,440
chiamare stringify per trasformare un array o un oggetto Javascript in formato JSON, quindi in una stringa

55
00:04:26,440 --> 00:04:28,040
alla fine e

56
00:04:28,040 --> 00:04:33,210
lì, voglio aggiungere il mio prodotto. Quindi, alla fine, voglio stringere qui

57
00:04:33,210 --> 00:04:37,420
un oggetto che contiene il mio titolo, la mia descrizione, il

58
00:04:39,100 --> 00:04:42,100
mio imageUrl e il mio prezzo, non

59
00:04:42,100 --> 00:04:47,830
l'ID perché in realtà Firebase genererà un ID per noi qui che è davvero conveniente.

60
00:04:49,070 --> 00:04:54,610
Ora questo invierà la richiesta, ma ovviamente voglio creare il prodotto localmente solo se

61
00:04:54,820 --> 00:05:00,490
la richiesta ha avuto successo perché allora posso effettivamente utilizzare anche l'ID creato automaticamente

62
00:05:00,490 --> 00:05:08,410
che Firebase mi restituirà e recuperare comodamente restituisce una promessa, che è questo oggetto Javascript che alla fine si risolverà in

63
00:05:08,410 --> 00:05:12,620
un valore in futuro o genererà un errore in futuro.

64
00:05:12,940 --> 00:05:19,290
Quindi per attendere questa risposta, possiamo quindi aggiungere qui dopo il recupero, quindi su questa

65
00:05:19,290 --> 00:05:26,170
promessa e otterremo la nostra risposta qui in modo da poter fare qualsiasi cosa con la risposta.

66
00:05:26,190 --> 00:05:31,200
Puoi anche ascoltare gli errori con catch ed è qualcosa che dovresti già

67
00:05:31,200 --> 00:05:33,290
sapere perché le promesse non

68
00:05:33,300 --> 00:05:39,900
sono specifiche di React Native, ovvero Javascript vaniglia e React Native supporta anche la sintassi più moderna di

69
00:05:39,900 --> 00:05:46,270
asincrono in attesa invece di allora e cattura. Per usarlo, aggiungi asincrono qui di fronte alla tua

70
00:05:46,290 --> 00:05:53,700
funzione, questa parola chiave asincrona e ora puoi attendere la tua risposta qui e archiviarla in una costante con questa sintassi, con

71
00:05:53,700 --> 00:05:55,400
la parola chiave wait.

72
00:05:55,410 --> 00:05:59,520
Ora dietro le quinte, questo trasforma questo nella vecchia sintassi con allora, quindi

73
00:05:59,580 --> 00:06:05,640
è come se tu avessi aggiunto allora qui e hai usato la tua risposta in un callback che ci sei arrivato.

74
00:06:05,640 --> 00:06:09,480
Ma è un po 'più facile da leggere ed è per questo che userò questa sintassi

75
00:06:09,480 --> 00:06:17,160
di attesa asincrona, basta essere consapevoli del fatto che è come aggiungere quindi, solo più leggibile. Quando usi async wait in ogni caso, questa

76
00:06:17,160 --> 00:06:22,770
funzione qui restituirà sempre automaticamente una promessa, quindi l'intera funzione di creazione

77
00:06:22,770 --> 00:06:23,780
del

78
00:06:23,820 --> 00:06:25,880
prodotto ora restituisce una promessa.

79
00:06:26,010 --> 00:06:27,330
Non l'aveva mai fatto

80
00:06:27,330 --> 00:06:28,300
prima, ora

81
00:06:28,350 --> 00:06:33,040
lo vedrai qui, ora restituisce una promessa. Quindi questa è la nostra risposta,

82
00:06:34,280 --> 00:06:38,960
questa risposta ora può essere un po 'spacchettata per ottenere i dati lì dentro, quindi

83
00:06:39,140 --> 00:06:45,430
i dati di risposta, ciò viene fatto chiamando la risposta. json, questo è un metodo disponibile

84
00:06:45,430 --> 00:06:50,730
sull'oggetto risposta che stiamo ottenendo. Anche questa è un'attività asincrona che dobbiamo

85
00:06:51,050 --> 00:06:56,910
attendere e alla fine questo ci darà i dati restituiti da Firebase quando aggiungiamo un prodotto.

86
00:06:56,920 --> 00:07:03,620
Ora per ora possiamo semplicemente registrare i dati di risposta per vedere cosa c'è dentro e continuo a inviare la mia

87
00:07:03,620 --> 00:07:09,320
azione qui, ma poiché abbiamo aspettato qui e quindi questo è come se fosse in più blocchi allora,

88
00:07:09,320 --> 00:07:13,520
questo sarà spedito solo una volta che queste operazioni qui sono fatto.

89
00:07:13,520 --> 00:07:19,190
Quindi, salviamo questo e aggiungiamo un nuovo prodotto andando nella sezione admin qui

90
00:07:19,190 --> 00:07:21,580
e poi aggiungerò una camicia

91
00:07:21,830 --> 00:07:24,820
bianca, ho scelto una bella immagineUrl per

92
00:07:24,820 --> 00:07:26,320
questo, eccola qui.

93
00:07:26,320 --> 00:07:34,510
Diciamo che costa 39. 99, questa è una camicia bianca che è piuttosto elegante.

94
00:07:34,510 --> 00:07:39,110
Se ora lo salvo, devo prima caricarlo, ora viene aggiunto, eccolo qui e ora

95
00:07:39,110 --> 00:07:40,130
se dai un'occhiata

96
00:07:40,130 --> 00:07:41,130
a Firebase,

97
00:07:41,210 --> 00:07:46,310
vediamo anche che ora c'è un nodo prodotti. In questo, questo è un ID univoco e

98
00:07:46,310 --> 00:07:50,430
lì abbiamo i dati che abbiamo inviato e se dai un'occhiata alla tua

99
00:07:50,620 --> 00:07:53,440
console, vedi che è ciò che abbiamo ricevuto, sono

100
00:07:53,440 --> 00:07:55,100
questi dati di risposta qui.

101
00:07:55,120 --> 00:08:01,780
Questo contiene una chiave nome e quindi anche questo ID generato da Firebase, ciò significa che quando spediamo i nostri dati qui,

102
00:08:01,780 --> 00:08:08,670
possiamo effettivamente aggiungere una chiave ID qui e aggiungere resData. nome per accedere a questa chiave nome

103
00:08:08,720 --> 00:08:14,800
sulla risposta restituita da Firebase per inoltrare l'ID generato sul lato server al

104
00:08:14,800 --> 00:08:21,330
nostro creatore di riduzione prodotto alla fine o alla logica che viene eseguita nel riduttore.

105
00:08:21,340 --> 00:08:28,960
Quindi ora nel riduttore di prodotti, non possiamo effettivamente utilizzare questo ID fittizio qui, ma invece, ci

106
00:08:28,960 --> 00:08:36,530
aspettiamo che dai nostri dati di prodotto. Ora otteniamo un campo ID che è l'ID generato sul lato

107
00:08:36,530 --> 00:08:43,430
server, per ora mi limiterò all'ID utente fittizio ma otterremo questo ID generato sul lato server qui ed eccolo qui

108
00:08:43,430 --> 00:08:48,910
e quindi lo usiamo su anche il frontend, che sarà importante per dopo quando elimineremo anche

109
00:08:48,920 --> 00:08:50,600
cose e così via.

110
00:08:50,630 --> 00:08:55,460
Quindi questo aggiunge un prodotto ma, ovviamente, non appena ricarichiamo l'app, è sparita perché nell'app è stata

111
00:08:55,460 --> 00:08:56,810
memorizzata solo in memoria.

112
00:08:56,810 --> 00:09:01,190
Ora lo memorizziamo anche su un server ma non lo recuperiamo mai da un

113
00:09:01,220 --> 00:09:03,170
server, quindi assicuriamoci di farlo.