1
00:00:02,220 --> 00:00:06,440
Per la funzione Aggiungi al carrello, dovremo lavorare su due cose: una è

2
00:00:06,450 --> 00:00:09,850
ovviamente che possiamo avere una schermata del carrello, che abbiamo

3
00:00:09,880 --> 00:00:17,250
un'icona qui nella nostra intestazione che ci porta alla schermata del carrello dove possiamo vedere come la somma totale e gli articoli

4
00:00:17,250 --> 00:00:20,640
del carrello e dove abbiamo quell'ordine ora pulsante, ma direi

5
00:00:20,640 --> 00:00:26,580
che è il secondo passo perché il primo passo più importante è che aggiungiamo la logica per gestire

6
00:00:26,910 --> 00:00:33,030
gli articoli del carrello e che coinvolge Redux. Per questo, aggiungerò un riduttore nuovo

7
00:00:33,040 --> 00:00:40,620
di zecca, un secondo riduttore che chiamerò carrello, carrello. js e anche un file di azioni e questo è in

8
00:00:40,750 --> 00:00:43,280
realtà un file di azioni che popoleremo.

9
00:00:43,330 --> 00:00:45,270
Lo faremo anche con il file dei prodotti in seguito

10
00:00:45,280 --> 00:00:52,250
una volta che ci immergeremo nell'aggiunta di prodotti e così via, ma per ora, iniziamo con la funzione carrello. Quindi qui nel

11
00:00:52,250 --> 00:00:55,010
carrello. file js nella cartella

12
00:00:55,250 --> 00:01:00,350
dei riduttori, imposterò il mio stato iniziale per quella sezione carrello e ancora, sono tutti questi riduttori

13
00:01:00,350 --> 00:01:05,390
separati e gli stati che riescono a comporre il negozio Redux totale perché alla fine, questo

14
00:01:05,390 --> 00:01:11,420
è quello che poi combini qui con combinato riduce in un riduttore di radice e un grande stato alla fine.

15
00:01:11,520 --> 00:01:16,150
Abbiamo solo questi singoli stati secondari per facilitare la gestione dei dati.

16
00:01:16,230 --> 00:01:22,100
Quindi qui nel riduttore del carrello, come dovrebbe essere lo stato del nostro carrello?

17
00:01:22,500 --> 00:01:31,000
Bene, il nostro carrello avrà un sacco di oggetti, potrebbe essere un array e una somma che inizialmente è zero, quindi un importo totale che potresti

18
00:01:31,360 --> 00:01:35,680
dire, potresti ovviamente anche nominare questo importo totale forse per chiarire di cosa

19
00:01:35,680 --> 00:01:36,720
si tratta.

20
00:01:36,730 --> 00:01:39,160
Quindi queste sono le due cose che compongono il mio carrello

21
00:01:39,160 --> 00:01:45,460
qui e, come sempre, non posso sottolinearlo abbastanza, c'è più di un modo per implementarlo. Quindi, se vuoi gestire anche altri dati qui, fallo

22
00:01:45,460 --> 00:01:47,350
sicuramente, non esiste un approccio

23
00:01:47,380 --> 00:01:48,480
giusto o

24
00:01:48,490 --> 00:01:50,920
sbagliato, questo è solo il mio

25
00:01:50,920 --> 00:01:53,330
approccio alla costruzione di questa app.

26
00:01:53,410 --> 00:01:58,480
Ora è importante che per questo carrello qui, voglio assicurarmi che se abbiamo già un articolo

27
00:01:58,590 --> 00:02:02,120
nel carrello, diciamo la maglietta rossa e clicco sul carrello una

28
00:02:02,440 --> 00:02:09,340
seconda volta, non aggiungo due articoli a questo array ma Ho ancora un solo articolo lì dentro e invece ogni articolo nella

29
00:02:09,340 --> 00:02:15,850
matrice di articoli dovrebbe essere un oggetto in cui gestisco forse come l'ID del prodotto, dove ho il titolo e

30
00:02:15,850 --> 00:02:18,940
la quantità dell'articolo nel carrello, in modo che

31
00:02:18,970 --> 00:02:22,630
passare a 2 se faccio clic su di esso una seconda volta.

32
00:02:22,720 --> 00:02:31,960
Pertanto potresti effettivamente sostenere che gli articoli potrebbero non essere una matrice ma forse un oggetto Javascript perché ciò ci consente di memorizzare l'ID

33
00:02:32,170 --> 00:02:37,930
del prodotto come chiave e il valore potrebbe essere un oggetto con il titolo, con

34
00:02:38,220 --> 00:02:42,420
la quantità, con il prezzo e questa è solo un'alternativa,

35
00:02:42,470 --> 00:02:43,840
potresti anche fare

36
00:02:43,840 --> 00:02:48,830
tutto questo con un array ma in realtà è l'approccio che userò.

37
00:02:49,180 --> 00:02:54,190
Ora il riduttore che esporto è quindi un riduttore che ovviamente ottiene uno stato

38
00:02:54,190 --> 00:03:00,700
che ha il nostro stato iniziale come valore predefinito e un'azione come argomento che alla fine deve restituire alcuni dati.

39
00:03:01,150 --> 00:03:04,890
Quindi, alla fine, deve restituire un nuovo stato che viene quindi utilizzato da Redux.

40
00:03:04,900 --> 00:03:07,210
Ora abbiamo bisogno di un'azione per continuare.

41
00:03:07,660 --> 00:03:15,610
Quindi qui esporterò una costante, un identificatore di azione e chiamerò questo aggiungi al carrello, l'identificatore dipende da te,

42
00:03:15,610 --> 00:03:22,790
andrò con aggiungi al carrello in questo modo e nel file delle azioni, creerò un tale funzione

43
00:03:22,780 --> 00:03:24,490
di creatore di azioni.

44
00:03:24,610 --> 00:03:26,620
Quindi ecco un'altra costante

45
00:03:26,650 --> 00:03:34,800
che chiamerò aggiungi al carrello che riceve diciamo l'oggetto prodotto completo che voglio aggiungere, in modo che io possa estrarre le informazioni

46
00:03:34,800 --> 00:03:40,260
di cui ho bisogno e quindi qui, dobbiamo restituire un tale oggetto d'azione che ha

47
00:03:40,260 --> 00:03:44,730
un tipo che viene aggiunto al carrello e quindi al nostro prodotto.

48
00:03:44,730 --> 00:03:50,010
Questo è solo un modo per creare queste azioni che ci rende molto semplice farlo all'interno

49
00:03:50,010 --> 00:03:51,240
dei nostri componenti.

50
00:03:51,240 --> 00:03:56,970
Quindi alla fine, nel riduttore del carrello, in realtà in tutti i riduttori ma nel posto dei riduttori del

51
00:03:57,310 --> 00:03:58,010
carrello dove

52
00:03:58,020 --> 00:04:06,180
ci interessa, otterremo quell'azione Aggiungi al carrello, quindi qui dobbiamo cambiare il tipo di azione e gestire il caso in cui è aggiunto al carrello e quindi è

53
00:04:06,360 --> 00:04:07,950
necessario importare aggiungi al carrello

54
00:04:07,950 --> 00:04:14,050
dalla cartella delle azioni e lì, dal file del carrello. Ora e comunque importante, questa azione quando viene spedita viene

55
00:04:14,070 --> 00:04:19,200
ricevuta su tutti i riduttori ma se non li gestisci con un caso separato, il tuo caso

56
00:04:19,200 --> 00:04:26,460
predefinito entrerà in funzione che normalmente dovrebbe solo restituire la tua porzione di stato corrente per questo riduttore, che significa che la porzione di

57
00:04:26,460 --> 00:04:31,100
stato per questo riduttore è invariata. Qui però nel riduttore del carrello,

58
00:04:31,140 --> 00:04:34,550
ovviamente voglio cambiare il mio stato, quindi mi occupo

59
00:04:34,710 --> 00:04:36,750
di aggiungere al carrello qui

60
00:04:36,750 --> 00:04:39,660
e ora in aggiungi al carrello, cosa

61
00:04:39,660 --> 00:04:41,240
dovrebbe succedere lì?

62
00:04:42,280 --> 00:04:50,720
Bene, otteniamo il nostro prodotto aggiunto, possiamo tirarlo fuori dall'azione perché lì nell'azione, avremo un codice Product Key, è quello che

63
00:04:50,720 --> 00:04:51,750
abbiamo appena

64
00:04:51,770 --> 00:04:56,040
impostato qui nel carrello dell'azione. js file, quindi prenderò il nostro

65
00:04:56,060 --> 00:05:00,710
prodotto e lo memorizzerò in un prodotto aggiunto costante qui con il quale ora possiamo lavorare

66
00:05:01,920 --> 00:05:08,910
e avremo il nostro prezzo del prodotto qui che è ovviamente aggiuntoProdotto. prezzo e avremo il titolo del nostro

67
00:05:08,940 --> 00:05:16,170
prodotto che viene aggiuntoProdotto. titolo. Prima di continuare, definiamo come dovrebbe

68
00:05:16,170 --> 00:05:21,460
essere l'articolo del carrello, quindi l'aspetto che conserviamo qui, il valore che abbiamo dentro.

69
00:05:21,650 --> 00:05:30,550
Quindi andrò nella cartella dei miei modelli e aggiungerò un carrello. file js qui e quindi aggiungere una classe di articoli carrello

70
00:05:30,580 --> 00:05:32,650
che riceve un costruttore e

71
00:05:32,890 --> 00:05:39,370
prima che me ne dimentichi di nuovo, che deve essere esportato qui e ora in

72
00:05:39,370 --> 00:05:46,750
quel costruttore, mi aspetto di ottenere la quantità del prodotto che stiamo per aggiungere, il prezzo del

73
00:05:47,020 --> 00:05:56,950
prodotto, il titolo del prodotto e la somma per questo articolo, se abbiamo tre volte la maglia rossa, la nostra somma sarebbe tre volte

74
00:05:56,950 --> 00:05:58,980
29. 99,

75
00:05:59,110 --> 00:06:01,690
quindi circa $ 90.

76
00:06:01,690 --> 00:06:10,220
Ora quello che non ottengo qui è l'ID prodotto perché lo userò come chiave all'interno del mio oggetto qui che contiene gli articoli

77
00:06:10,220 --> 00:06:13,440
e quindi diventerà più chiaro una volta implementato.

78
00:06:14,150 --> 00:06:17,690
Quindi, qui nell'articolo del carrello, memorizzo solo

79
00:06:17,840 --> 00:06:22,890
tutti i dati che ricevo, la quantità, il prezzo del prodotto e

80
00:06:22,900 --> 00:06:34,200
ho quei dati che devo produrre in seguito, quindi il titolo del prodotto e la somma, come questo e ora di nuovo nel riduttore, possiamo ovviamente

81
00:06:34,260 --> 00:06:41,520
importare questa classe di articoli del carrello dalla cartella dei modelli e dall'articolo del carrello qui e

82
00:06:41,520 --> 00:06:47,880
ora di nuovo in quel caso di aggiunta al carrello laggiù, prima di tutto dobbiamo

83
00:06:47,980 --> 00:06:52,680
scoprire se quel prodotto fa già parte dei nostri articoli.

84
00:06:52,680 --> 00:06:59,370
Ora, come ho già detto, aggiungerò ogni nuovo prodotto aggiungendo una nuova chiave agli articoli che è l'ID di quel prodotto, dal

85
00:06:59,370 --> 00:07:01,020
momento che è unico abbiamo

86
00:07:01,020 --> 00:07:06,870
sempre ogni chiave solo una volta e quindi il valore sarà un articolo del carrello come abbiamo appena

87
00:07:07,110 --> 00:07:12,990
definito nei modelli e quindi so se l'ID del prodotto che sto ricevendo qui è già una chiave degli

88
00:07:13,170 --> 00:07:17,050
articoli, quindi questo ha già il nostro articolo come articolo del carrello.

89
00:07:17,070 --> 00:07:26,190
Quindi, qui, possiamo semplicemente verificare se gli articoli per il prodotto aggiunto. L'ID esiste, quindi se questo restituisce qualcosa di

90
00:07:26,200 --> 00:07:36,290
vero, quindi non indefinito, allora abbiamo già l'articolo nel carrello che va bene ma allora dobbiamo solo cambiare

91
00:07:36,290 --> 00:07:38,800
la quantità, altrimenti

92
00:07:38,860 --> 00:07:41,600
dovremo aggiungere un nuovo articolo.

93
00:07:41,600 --> 00:07:45,920
Quindi iniziamo con l'altro caso perché è il caso che incontreremo per la prima

94
00:07:45,920 --> 00:07:47,170
volta quando aggiungiamo

95
00:07:47,330 --> 00:07:51,910
qualcosa per la prima volta, lì abbiamo bisogno di un nuovo articolo carrello, lo creo

96
00:07:51,920 --> 00:07:58,460
con la nuova parola chiave e la classe di articoli carrello che ho definito e lì dentro , dobbiamo fornire la

97
00:07:58,520 --> 00:08:00,530
quantità che ovviamente è una solo

98
00:08:00,920 --> 00:08:08,840
se aggiungiamo solo un nuovo articolo, dobbiamo fornire il prezzo del prodotto, il titolo del prodotto qui e la somma e la somma ovviamente inizialmente

99
00:08:09,050 --> 00:08:11,580
è solo il nostro prezzo del prodotto, giusto?

100
00:08:11,600 --> 00:08:17,810
Perché se aggiungiamo un articolo di quel prezzo, la somma per questo articolo carrello è il prezzo del nostro prodotto e ora

101
00:08:17,810 --> 00:08:21,200
questo nuovo articolo carrello deve essere aggiunto ai nostri articoli carrello qui.

102
00:08:24,100 --> 00:08:29,050
Quindi qui, restituiamo una copia del nostro stato e impostiamo gli

103
00:08:29,220 --> 00:08:38,290
oggetti uguali a un nuovo oggetto in cui copio tutti i miei oggetti di stato esistenti, in modo da copiare

104
00:08:38,290 --> 00:08:39,630
qui il

105
00:08:39,640 --> 00:08:47,200
mio oggetto esistente e quindi aggiungo una nuova chiave con questa sintassi dinamica con le parentesi quadre

106
00:08:47,200 --> 00:08:55,280
in cui viene aggiunto il nome della chiave Prodotto. ID, questo è ciò che intendevo con l'ID del prodotto che è la chiave

107
00:08:55,340 --> 00:08:59,190
nel nostro oggetto articoli e il valore è il nostro nuovo articolo carrello.

108
00:08:59,390 --> 00:09:04,730
Questa è solo una sintassi che devi sapere, è Javascript vaniglia, ecco come puoi aggiungere o accedere fin

109
00:09:04,730 --> 00:09:11,570
qui a una proprietà dinamica anziché codificarla come stringa qui. A proposito, questo qui dovrebbe

110
00:09:11,600 --> 00:09:20,170
ovviamente essere anche stato. articoli, errore mio. Quindi, con questo, dovremmo aggiungere un nuovo articolo carrello qui.

111
00:09:20,230 --> 00:09:24,790
Ora se hai già un articolo nel carrello, ovviamente non creiamo un nuovo

112
00:09:24,790 --> 00:09:31,480
articolo nel carrello, ma vogliamo aggiornare quello esistente. Quindi avrò il mio articolo carrello aggiornato

113
00:09:31,480 --> 00:09:35,470
qui e per questo, creerò ancora un nuovo articolo

114
00:09:35,800 --> 00:09:46,960
carrello ma lo prepopolerò con alcuni dati esistenti, ad esempio la quantità qui. Lo ricaviamo dagli articoli di stato per l'ID del prodotto aggiunto perché dovrebbe già essere parte degli

115
00:09:46,960 --> 00:09:52,150
articoli di stato, stiamo controllando questo qui e questo avrà ovviamente una chiave di quantità

116
00:09:52,150 --> 00:09:57,730
perché un tale articolo qui nei miei articoli è solo di digitare articoli carrello, quindi avrà una

117
00:09:57,730 --> 00:09:58,480
proprietà

118
00:09:58,600 --> 00:10:02,020
quantità e ne aggiungeremo semplicemente uno perché stiamo aggiungendo un

119
00:10:02,080 --> 00:10:09,560
nuovo articolo carrello, quindi dobbiamo incrementare questo. Ora carrello articolo come secondo argomento prende il prezzo del prodotto. Quindi, naturalmente, poiché costruiremo l'app in

120
00:10:09,570 --> 00:10:14,540
modo che il prezzo non cambi mai, il che aggiungerebbe molta complessità qui, dovremmo

121
00:10:14,550 --> 00:10:19,860
gestire il carrello in un modo completamente diverso in quel caso, dovremmo memorizzare ogni articolo

122
00:10:19,890 --> 00:10:25,350
del carrello come elenco delle transazioni per questo articolo carrello che è troppo per questo qui.

123
00:10:25,350 --> 00:10:30,760
Quindi, dal momento che questo non cambia mai, dal momento che il prezzo non cambia mai, alla fine possiamo semplicemente

124
00:10:30,760 --> 00:10:36,930
prendere il prezzo del prodotto che stiamo ottenendo o prendere il prezzo esistente che abbiamo archiviato prima perché quello non cambierà mai più.

125
00:10:36,930 --> 00:10:42,150
Il titolo potrebbe cambiare e voglio archiviare qui il titolo più recente, quindi prenderò sicuramente quello

126
00:10:42,150 --> 00:10:46,620
del prodotto che stiamo ottenendo qui invece della mia vecchia istantanea e, ultimo

127
00:10:46,710 --> 00:10:51,480
ma non meno importante, l'ultimo valore qui, la mia somma totale per questo articolo carrello,

128
00:10:51,480 --> 00:10:59,520
ovviamente, è la somma corrente, quindi accedo agli articoli di stato per l'ID qui, somma più il prezzo del prodotto perché aggiungiamo un nuovo articolo

129
00:10:59,520 --> 00:11:06,660
qui, dobbiamo aggiungere il prezzo 1 volte alla somma corrente. Questo è l'articolo del

130
00:11:06,660 --> 00:11:08,570
carrello aggiornato.

131
00:11:08,580 --> 00:11:16,750
Ora, con ciò, possiamo restituire qui la nostra nuova fetta di stato copiando i vecchi stati e impostando gli elementi uguali e ora importanti

132
00:11:16,930 --> 00:11:26,460
su un oggetto in cui copiamo lo stato. articoli ma dove ora impostiamo di nuovo gli articoli aggiunti. ID e sì, questo esiste già, ma

133
00:11:26,460 --> 00:11:33,310
con ciò lo sostituiamo semplicemente con il nostro articolo del carrello aggiornato, quindi facciamo lo stesso

134
00:11:33,310 --> 00:11:37,070
aggiornamento che facciamo lì. Ora che comunque non

135
00:11:37,100 --> 00:11:40,150
è tutto ciò che dobbiamo fare, dobbiamo

136
00:11:40,250 --> 00:11:43,750
cambiare anche l'importo totale perché quello ovviamente cambia.

137
00:11:43,940 --> 00:11:52,420
Pertanto, quando aggiungiamo un articolo per la prima volta, l'importo totale dovrebbe essere sostanzialmente il nostro vecchio importo totale, quindi indica l'importo

138
00:11:52,430 --> 00:11:57,530
totale più il prezzo del prodotto ed è lo stesso se aggiungiamo un

139
00:11:57,530 --> 00:12:04,910
articolo a un carrello esistente o quando esiste già lì perché alla fine, il nostro totale è sempre solo il

140
00:12:04,910 --> 00:12:10,130
vecchio totale più il prezzo, perché aggiungiamo sempre un articolo di quel prodotto, ecco

141
00:12:10,130 --> 00:12:12,190
come funzionerà questa app.

142
00:12:12,200 --> 00:12:14,480
Quindi la nostra dichiarazione di aggiornamento

143
00:12:14,480 --> 00:12:18,920
qui è quasi la stessa, l'unica cosa che differisce è qui come creiamo quell'elemento

144
00:12:18,920 --> 00:12:24,110
carrello, quindi ovviamente possiamo anche riutilizzare questo codice, spostarlo fuori dal blocco if else e invece

145
00:12:24,110 --> 00:12:27,590
di avere due diverse costanti qui , possiamo creare una

146
00:12:30,670 --> 00:12:33,150
variabile prima di inserire l'istruzione if, aggiornata

147
00:12:33,190 --> 00:12:36,990
o un nuovo articolo del carrello, che potrebbe essere un nome perché

148
00:12:37,090 --> 00:12:44,590
non sappiamo quale sarà in anticipo e quindi qui nella sezione if qui, impostiamo aggiornato o nuovo articolo carrello a questo articolo carrello

149
00:12:44,590 --> 00:12:49,900
aggiornato, qui d'altra parte lo impostiamo su questo nuovo articolo carrello e qui, quindi utilizziamo sempre

150
00:12:49,930 --> 00:12:54,270
l'articolo carrello nuovo o aggiornato e con quello, abbiamo un riutilizzo del codice

151
00:12:54,400 --> 00:13:00,610
qui e non ripetiamoci, il che è sempre positivo. Un'altra nota a margine, copiare lo stato qui ovviamente

152
00:13:00,610 --> 00:13:04,420
è sempre ridondante perché si impostano sempre sia gli articoli che l'importo totale.

153
00:13:04,420 --> 00:13:09,520
Quindi se hai sempre solo questi due campi qui e cambi sempre entrambi, non è necessario copiare

154
00:13:09,520 --> 00:13:15,940
lo stato esistente, se hai mai introdotto un altro pezzo di dati nella tua porzione di stato qui che non cambi

155
00:13:15,940 --> 00:13:20,680
qui tuttavia, è necessario copiare il vecchio stato in modo da non perdere quei dati

156
00:13:20,680 --> 00:13:21,150
aggiuntivi.

157
00:13:21,190 --> 00:13:26,470
Quindi qui lascerò quella funzionalità di copia anche se tecnicamente non ne abbiamo bisogno qui, ma

158
00:13:26,470 --> 00:13:30,750
se mai dovessimo cambiare il nostro stato in cui è stato salvato e

159
00:13:31,030 --> 00:13:34,310
non dimentichiamo di copiarlo e quindi perdiamo i dati.

160
00:13:34,330 --> 00:13:36,190
Bene, c'è stato molto lavoro,

161
00:13:36,190 --> 00:13:38,300
con quello possiamo iniziare a inviare questa

162
00:13:38,320 --> 00:13:42,130
azione e, naturalmente, voglio inviarlo dalla panoramica del prodotto e dai dettagli del

163
00:13:42,190 --> 00:13:45,650
prodotto perché in entrambe le schermate, ho aggiunto i pulsanti al carrello.

164
00:13:45,710 --> 00:13:50,890
Quindi iniziamo dalla schermata di panoramica dei prodotti, lì per inviare le

165
00:13:50,890 --> 00:13:52,380
azioni di Redux,

166
00:13:52,600 --> 00:14:00,880
dobbiamo includere qui l'hook di spedizione, con quello qui possiamo semplicemente accedere a questa funzione di spedizione chiamando usa la

167
00:14:00,880 --> 00:14:08,410
spedizione in questo modo e ora quando facciamo clic su Aggiungi a carrello laggiù, possiamo spedire la nostra

168
00:14:08,410 --> 00:14:13,330
azione qui e ovviamente a proposito invece di usare funzioni in linea

169
00:14:13,480 --> 00:14:15,930
qui, potresti avere funzioni memorizzate

170
00:14:16,090 --> 00:14:24,700
in costanti separate all'interno del tuo componente funzionale qui, in alternativa, mi atterrò alle funzioni inline per ora e importerò tutte

171
00:14:24,790 --> 00:14:32,080
le mie azioni qui come azioni carrello dalla cartella negozio e lì, la cartella azioni, il file carrello.

172
00:14:32,080 --> 00:14:37,060
Ora questa è una sintassi di importazione che unisce tutte le esportazioni dal file in

173
00:14:37,060 --> 00:14:40,020
un unico oggetto, qui abbiamo una sola esportazione quindi

174
00:14:40,030 --> 00:14:42,610
potresti anche scegliere come destinazione quella

175
00:14:42,610 --> 00:14:46,630
specifica esportazione, in seguito avremo più esportazioni e quindi userò questo approccio.

176
00:14:46,630 --> 00:14:49,750
Quindi qui, spediamo l'azione del carrello.

177
00:14:49,930 --> 00:14:55,400
aggiungi al carrello e questa è una funzione che dobbiamo eseguire, questa è la nostra funzione di creatore

178
00:14:55,400 --> 00:14:57,050
di azioni e questo come

179
00:14:57,430 --> 00:15:05,270
argomento prende il nostro prodotto, quindi alla fine qui, dobbiamo passare itemData. articolo che è solo il nostro prodotto qui nella schermata dei dettagli

180
00:15:05,270 --> 00:15:06,330
del prodotto.

181
00:15:06,410 --> 00:15:12,850
Quindi facciamo esattamente la stessa cosa, importiamo la spedizione dell'uso da React Redux, quindi qui possiamo accedere

182
00:15:12,890 --> 00:15:17,560
alla funzione di spedizione chiamando usa la spedizione e quindi per questo

183
00:15:18,050 --> 00:15:23,990
pulsante qui nella funzione in linea o in una funzione denominata separata se ti piace ,

184
00:15:24,440 --> 00:15:26,330
puoi chiamare il dispacciamento,

185
00:15:26,360 --> 00:15:31,490
ora dobbiamo importare le nostre azioni e userò la stessa sintassi di prima in

186
00:15:31,490 --> 00:15:42,190
cui importare tutto come azioni del carrello dalla cartella del negozio, la cartella delle azioni, il file del carrello e ora le azioni del carrello, chiama aggiungi a carrello

187
00:15:42,190 --> 00:15:48,630
qui e inoltra il prodotto selezionato che è il nostro prodotto che vogliamo aggiungere al carrello qui.

188
00:15:48,820 --> 00:15:54,190
Si spera che questo spedisca le azioni in modo tale che l'articolo venga aggiunto al carrello, ma ovviamente

189
00:15:54,190 --> 00:15:56,040
in questo momento non possiamo confermarlo.

190
00:15:56,110 --> 00:16:04,390
Bene, in realtà possiamo. Puoi avviare il debugger di React Native e non l'ho mai

191
00:16:04,990 --> 00:16:12,010
usato prima, ma lì dentro, ora puoi premere il comando o controllare t per aprire una nuova scheda, quindi

192
00:16:15,030 --> 00:16:15,660
confermare

193
00:16:19,500 --> 00:16:20,520
questa importazione

194
00:16:23,560 --> 00:16:30,790
qui, quindi andare alle tue app e lì, aprire il menu di debug su iOS con comando D, su Android

195
00:16:35,000 --> 00:16:43,990
con controllo o comando M e fare clic sul debug Javascript remoto. Ora il mio si è aperto sulla porta 19003 in realtà, quindi ho

196
00:16:43,990 --> 00:16:45,290
aperto il debugger

197
00:16:45,300 --> 00:16:52,120
React Native sulla porta sbagliata, selezionami di nuovo premi il comando T o controlla T nel debugger e scegli

198
00:16:52,120 --> 00:17:00,460
19003, usa qualsiasi porta aperta per te in Chrome, fai clic su Conferma e ora questo si connette alla tua app React in

199
00:17:01,210 --> 00:17:05,550
esecuzione qui nel debugger, assicurati di chiudere il debugger di Chrome e

200
00:17:05,590 --> 00:17:09,630
quindi ricaricare l'app, ora questo dovrebbe connettersi qui e ora non

201
00:17:09,640 --> 00:17:11,310
solo puoi controllare l'app

202
00:17:11,410 --> 00:17:11,940
qui

203
00:17:11,980 --> 00:17:17,950
come ho spiegato in precedenza, no, puoi anche dai un'occhiata alla parte lassù e che è il

204
00:17:17,950 --> 00:17:22,200
tuo debugger Redux, lì puoi vedere cosa sta facendo Redux per te.

205
00:17:22,280 --> 00:17:28,620
L'unica cosa che devi fare per farlo funzionare è installare un nuovo pacchetto con npm

206
00:17:28,660 --> 00:17:34,160
install --save dev perché è una dipendenza di sviluppo di cui abbiamo

207
00:17:34,160 --> 00:17:40,520
bisogno solo durante lo sviluppo e lì, installa l'estensione degli strumenti di sviluppo Redux, vai

208
00:17:40,650 --> 00:17:44,870
alla tua app . file js da allora

209
00:17:47,350 --> 00:17:50,010
in poi e quindi importare da

210
00:17:50,010 --> 00:17:56,280
questa estensione degli strumenti di sviluppo Redux. Puoi importare compose con gli strumenti dev da lì e questa

211
00:17:56,300 --> 00:18:00,050
è una funzione che passi per creare store come secondo argomento, puoi semplicemente

212
00:18:00,090 --> 00:18:03,260
eseguirlo lì in questo modo. A proposito, questo è il

213
00:18:03,260 --> 00:18:04,530
codice, questa importazione

214
00:18:04,560 --> 00:18:10,020
e questo utilizzo che dovresti rimuovere prima di distribuire l'app perché questo è solo qualcosa che dovrebbe

215
00:18:10,020 --> 00:18:14,160
essere in esecuzione durante lo sviluppo, non nell'app di produzione, devi rimuoverlo prima

216
00:18:14,160 --> 00:18:20,580
di distribuire l'app ma durante lo sviluppo, va bene. E con ciò aggiunto, se ora lo salvi, in

217
00:18:20,580 --> 00:18:26,940
realtà vedrai che qui in questo Redux Inspector, vedi che viene inviata un'azione init, non l'hai mai vista prima.

218
00:18:26,940 --> 00:18:30,560
Questa è un'azione che viene inviata automaticamente all'avvio dell'app.

219
00:18:30,570 --> 00:18:35,670
Se ora faccio clic sul carrello qui, vedrai anche l'azione Aggiungi al carrello e

220
00:18:35,670 --> 00:18:41,990
ora qui, puoi visualizzare i dettagli su quell'azione come i dati ad essa collegati e sul tuo

221
00:18:41,990 --> 00:18:48,120
stato qui e là vedi per esempio questo è lo stato del mio prodotto e dov'è lo

222
00:18:48,590 --> 00:18:50,380
stato del mio carrello?

223
00:18:50,670 --> 00:18:54,840
Beh, ovviamente manca, perché mentre abbiamo il riduttore nell'azione impostata, nell'app. file js, nei

224
00:18:54,840 --> 00:18:58,660
riduttori combinati, non includiamo lo stato del carrello.

225
00:18:58,740 --> 00:19:07,110
Quindi, importiamo il riduttore del carrello da. / StoreReducers / cart e ora con quello importato, possiamo aggiungerlo al nostro

226
00:19:07,440 --> 00:19:13,890
oggetto riduttori combinato e ora lì, ad esempio, aggiungiamo una fetta di carrello, puntiamo al riduttore del carrello e

227
00:19:13,890 --> 00:19:20,560
quindi ora questo viene incluso nel nostro negozio Redux. Detto questo, se ora aspetti che venga ricaricato e fai

228
00:19:20,560 --> 00:19:25,830
di nuovo clic sul carrello, ora in questa azione aggiungi al carrello, sotto lo stato, vedrai che

229
00:19:25,830 --> 00:19:30,960
ora c'è una sezione carrello e ora vedi che c'è un importo totale, vedi c'è un

230
00:19:30,990 --> 00:19:35,700
articolo con la chiave P1 che è il nostro prodotto con una quantità di

231
00:19:35,710 --> 00:19:43,900
1, quel prezzo, la somma di questo e se ora clicco sul carrello una seconda volta qui, c'è un'altra azione spedita e se abbiamo un guarda

232
00:19:43,900 --> 00:19:48,790
lo stato dopo questa azione, ora vediamo, raffredda solo un articolo ma ora con la

233
00:19:48,790 --> 00:19:52,620
quantità due, il prezzo del prodotto per articolo è questo ma la

234
00:19:52,630 --> 00:19:54,030
somma è questa.

235
00:19:54,190 --> 00:19:55,120
Questa è

236
00:19:55,120 --> 00:19:57,760
la maglietta, se ora spedisco anche il tappeto

237
00:19:57,760 --> 00:20:02,590
blu, dobbiamo aggiungere un'altra volta al carrello e lì nello stato, ora vediamo davvero che

238
00:20:02,590 --> 00:20:04,190
ci sono due elementi, P1

239
00:20:04,270 --> 00:20:09,930
e P2, P1 è invariato ma P2 è stato ora aggiunto e anche l'importo totale mi sembra buono.

240
00:20:09,940 --> 00:20:16,150
Quindi questo sembra funzionare ed è così che puoi guardare nel tuo stato Redux mentre la tua app è in esecuzione

241
00:20:16,240 --> 00:20:17,140
senza emetterla qui.

242
00:20:17,140 --> 00:20:21,610
Ora ovviamente vogliamo anche visualizzarlo visivamente, ma questo è un bel modo di esaminare il

243
00:20:21,610 --> 00:20:25,120
tuo stato dietro le quinte con l'aiuto del debugger React Native.

244
00:20:25,120 --> 00:20:30,010
Ora lo chiuderemo qui perché rallenta un po 'l'app e quindi qui nel

245
00:20:30,010 --> 00:20:35,230
menu di debug, interromperò anche il mio debug remoto e chiuderò completamente l'ispettore qui.

246
00:20:35,260 --> 00:20:40,660
Anche di nuovo nell'app. js file, mi sbarazzerò del comporre con gli strumenti di

247
00:20:40,660 --> 00:20:42,000
sviluppo qui in modo

248
00:20:42,070 --> 00:20:47,020
da non dimenticarlo più tardi ma puoi sempre aggiungerlo qui o lasciarlo qui mentre stai sviluppando in modo da

249
00:20:47,020 --> 00:20:48,380
poter guardare nel tuo negozio.

250
00:20:48,460 --> 00:20:51,010
Il principale takeaway per noi qui è che

251
00:20:51,010 --> 00:20:57,280
questo sembra funzionare e con quello che funziona, ovviamente ora possiamo lavorare sull'aggiunta di un pulsante di azione qui all'intestazione e assicurarci

252
00:20:57,280 --> 00:21:03,430
di poter andare alla pagina del carrello da quello o con l'aiuto di quello pulsante di azione in modo che sulla

253
00:21:03,430 --> 00:21:06,220
pagina del carrello sia possibile visualizzare le informazioni del carrello.