1
00:00:02,370 --> 00:00:07,800
Ora siamo davvero vicini alla fine di questo modulo, quindi dobbiamo assicurarci che ora inviamo le azioni per

2
00:00:07,800 --> 00:00:11,370
creare un nuovo prodotto o per aggiornare un prodotto e

3
00:00:11,410 --> 00:00:16,080
quindi prima di tutto dobbiamo aggiungere queste azioni qui nella nostra cartella delle azioni .

4
00:00:16,210 --> 00:00:28,830
Esporterò quindi una costante qui, creerò un prodotto come questo qui, creerò un prodotto e poi anche qui, un altro identificatore per l'aggiornamento in un

5
00:00:28,860 --> 00:00:38,500
prodotto con un prodotto di aggiornamento e aggiornerò un prodotto come questo e creerò creatori di azioni adeguate o

6
00:00:38,500 --> 00:00:47,670
creeremo un prodotto e ora tocca a te come vuoi strutturarlo, quali dati ti aspetti di ottenere

7
00:00:47,670 --> 00:00:50,270
quando crei un prodotto.

8
00:00:50,340 --> 00:00:56,370
Sono un fan della creazione del prodotto proprio qui nell'azione o nel riduttore, quindi

9
00:00:56,490 --> 00:01:04,590
in realtà mi aspetto di ottenere un titolo qui, una descrizione, un URL di immagine e un prezzo diciamo

10
00:01:04,590 --> 00:01:14,070
e quindi restituisco un oggetto azione in cui il tipo è creare un prodotto e i dati del prodotto sono semplicemente tutti quei

11
00:01:14,070 --> 00:01:15,220
dati uniti.

12
00:01:15,450 --> 00:01:22,710
Quindi qui ho il mio titolo che è mappato al titolo che otteniamo come argomento, descrizione mappata alla

13
00:01:23,340 --> 00:01:28,230
descrizione e quindi possiamo anche usare un moderno collegamento Javascript dove se

14
00:01:28,230 --> 00:01:31,490
il nome della proprietà e il nome della

15
00:01:31,530 --> 00:01:36,810
variabile valore sono gli stessi, puoi semplicemente scrivere in questo modo, quindi se

16
00:01:36,810 --> 00:01:38,610
è uguale al prezzo:

17
00:01:38,610 --> 00:01:45,880
prezzo, possiamo semplicemente scriverlo qui, ovviamente è anche possibile per titolo e descrizione in modo da mappare tutti questi

18
00:01:45,880 --> 00:01:54,460
argomenti in proprietà con lo stesso nome in questo oggetto e se aggiorniamo un prodotto relativamente uguale, aggiorna il prodotto, quindi generalmente

19
00:01:54,460 --> 00:01:59,920
possiamo copiarlo, ma c'è una differenza importante. Qui abbiamo anche bisogno dell'ID del prodotto che deve cambiare, quindi lo

20
00:01:59,920 --> 00:02:08,370
otteniamo come argomento aggiuntivo e possiamo archiviarlo nella nostra azione quindi in una proprietà separata del nostro oggetto azione. Ora nel riduttore, ovviamente,

21
00:02:08,370 --> 00:02:10,920
dobbiamo gestirlo,

22
00:02:10,920 --> 00:02:20,900
dobbiamo gestire la creazione e l'aggiornamento. Quindi aggiungiamo un nuovo caso qui nel riduttore di prodotti per creare

23
00:02:20,930 --> 00:02:28,940
un prodotto e per questo, assicurati di importare creare un prodotto da azioni prodotti e ovviamente uno per l'aggiornamento di

24
00:02:28,940 --> 00:02:33,740
un prodotto con aggiornamento del prodotto, assicurati di importare anche quello.

25
00:02:35,970 --> 00:02:42,300
Nel creare un prodotto, ovviamente dobbiamo creare un nuovo prodotto e lo memorizzerò in una costante qui con la nuova

26
00:02:42,300 --> 00:02:45,230
parola chiave nel modello di prodotto che abbiamo creato

27
00:02:45,230 --> 00:02:51,780
in precedenza, per questo devi solo assicurarti di importare questo modello di prodotto da la cartella dei modelli e quel prodotto

28
00:02:51,780 --> 00:02:58,260
qui ricevono un ID che per ora può essere generato manualmente con una nuova data nella stringa per avere una

29
00:02:58,260 --> 00:03:04,350
sorta di ID fittizio univoco pseudo per il momento successivo, questo verrà generato su un server ma non lo

30
00:03:04,350 --> 00:03:05,600
abbiamo ancora .

31
00:03:05,970 --> 00:03:11,580
L'ID proprietario per ora è codificato su U1 perché al momento non abbiamo utenti in questa app ma

32
00:03:11,580 --> 00:03:17,910
titolo e così via possono essere popolati con i dati dell'azione perché nell'azione per la creazione di un prodotto abbiamo

33
00:03:17,940 --> 00:03:22,040
la chiave dati del prodotto e che contiene un oggetto con titolo, descrizione,

34
00:03:22,050 --> 00:03:24,010
imageUrl e prezzo e sono dati

35
00:03:24,010 --> 00:03:25,800
che ora possiamo recuperare.

36
00:03:25,980 --> 00:03:36,000
Quindi qui per il titolo, otteniamo i dati di azione del prodotto. titolo, per imageUrl, è azione. dati del

37
00:03:36,360 --> 00:03:43,800
prodotto. imageUrl, non sorprende per la descrizione, è azione. dati del prodotto. descrizione e per

38
00:03:44,380 --> 00:03:52,780
il prezzo, è azione. dati del prodotto. prezzo. Questo è ora un nuovo prodotto che creo.

39
00:03:53,070 --> 00:03:58,890
Ora dobbiamo aggiungerlo al nostro negozio restituendo qui il nostro stato aggiornato, dove prima di tutto copio lo stato

40
00:03:58,890 --> 00:04:03,840
esistente e ora devo aggiungerlo sia ai prodotti disponibili che ai prodotti utente perché l'abbiamo

41
00:04:03,840 --> 00:04:09,690
creato, quindi sicuramente appartiene per noi, quindi deve far parte sia degli array che dei prodotti disponibili, quindi lì

42
00:04:09,690 --> 00:04:15,480
possiamo prendere questi prodotti disponibili che abbiamo ottenuto e usare concat per ottenere un nuovo array che è

43
00:04:15,480 --> 00:04:21,990
il vecchio array più aggiungere un nuovo elemento e qui, il nuovo prodotto è quel nuovo elemento e io facciamo esattamente

44
00:04:21,990 --> 00:04:25,040
la stessa cosa qui per i prodotti degli utenti.

45
00:04:25,110 --> 00:04:34,220
Quindi qui utilizzo prodotti per utenti di stato e concedo il mio nuovo prodotto. E che dire dell'aggiornamento? Per l'aggiornamento, dobbiamo prima di tutto

46
00:04:34,220 --> 00:04:37,430
trovare l'indice del prodotto corrente, quindi l'indice del

47
00:04:37,430 --> 00:04:46,580
prodotto potrebbe essere un nome costante che può essere trovato accedendo ai nostri prodotti utente e lì con l'indice di ricerca che

48
00:04:46,580 --> 00:04:51,570
è un metodo Javascript incorporato, possiamo trovare l'indice di un certo elemento.

49
00:04:51,590 --> 00:04:57,440
Ancora una volta, questa assume una funzione che viene eseguita su ogni elemento in quell'array e che deve

50
00:04:57,440 --> 00:05:02,930
restituire true in modo da avere un indice e lì cercherò gli ID e cercherò gli ID

51
00:05:02,930 --> 00:05:05,330
dove è uguale al mio pid,

52
00:05:05,330 --> 00:05:11,520
la mia azione pid perché se ti ricordi come abbiamo impostato quell'azione, per l'aggiornamento abbiamo qui il campo pid

53
00:05:11,520 --> 00:05:13,980
che contiene gli ID prodotto che stiamo ottenendo.

54
00:05:13,980 --> 00:05:19,470
Quindi sto cercando quel prodotto e quindi memorizzo l'indice di quel prodotto nella matrice dei

55
00:05:19,620 --> 00:05:21,890
prodotti dell'utente nell'indice del prodotto qui,

56
00:05:21,900 --> 00:05:27,720
ora possiamo creare un prodotto aggiornato qui che è tecnicamente un nuovo oggetto prodotto ma ovviamente

57
00:05:27,720 --> 00:05:29,570
prepopolato con alcuni vecchi dati,

58
00:05:29,670 --> 00:05:31,200
ad esempio conserviamo

59
00:05:31,230 --> 00:05:34,320
l'ID, quindi intraprendiamo un'azione pid come valore qui.

60
00:05:34,320 --> 00:05:40,080
Conservo anche l'ID proprietario e, per questo, posso accedere ai prodotti utente di stato per l'indice che

61
00:05:40,080 --> 00:05:46,070
abbiamo appena scoperto, quindi per quell'indice di prodotto,. ownerID, non lo cambierò.

62
00:05:46,290 --> 00:05:48,800
Naturalmente memorizzerò il nuovo

63
00:05:48,900 --> 00:05:59,430
titolo, quindi qui memorizzerò l'azione. dati del prodotto. titolo, memorizzerò il nuovo imageUrl, quindi azione. dati del

64
00:05:59,430 --> 00:06:03,180
prodotto. imageUrl e io memorizzeremo

65
00:06:03,180 --> 00:06:11,190
una nuova descrizione, quindi azione. dati del prodotto. descrizione. Tuttavia, ho menzionato che il prezzo non dovrebbe essere

66
00:06:11,520 --> 00:06:24,750
modificabile, quindi come valore per questo, manterrò il prezzo originale, quindi indica l'indice del prodotto dei prodotti dell'utente. prezzo qui.

67
00:06:24,840 --> 00:06:30,150
A proposito, ciò significa anche che la nostra azione non è del tutto corretta, lì mi aspetto anche un prezzo, non dovrei

68
00:06:30,150 --> 00:06:36,060
farlo perché non possiamo inserirlo comunque nei nostri input, non ne abbiamo bisogno, quindi non dovremmo aspettiamolo qui, non dovremmo inoltrarlo come parte dei

69
00:06:36,390 --> 00:06:41,090
dati del prodotto per l'aggiornamento del prodotto, per un nuovo prodotto ne abbiamo bisogno ma per l'aggiornamento no.

70
00:06:41,500 --> 00:06:46,600
Quindi, con questo, abbiamo il nostro prodotto aggiornato con alcuni nuovi dati e alcuni vecchi

71
00:06:46,600 --> 00:06:55,090
dati, ora abbiamo bisogno di aggiornare il nostro stato ovviamente e per questo, abbiamo i prodotti utente aggiornati dove alla fine copio i miei prodotti

72
00:06:55,210 --> 00:07:01,960
utente esistenti con questa sintassi qui per creare una copia e quindi ho impostato i prodotti utente aggiornati per l'indice

73
00:07:01,960 --> 00:07:09,460
del prodotto selezionato uguale al prodotto aggiornato, quindi sostituisco il prodotto in questo indice con il nuovo prodotto aggiornato nella mia copia,

74
00:07:09,460 --> 00:07:15,790
non nella matrice originale ma nella mia copia. Devo fare lo stesso nei prodotti disponibili,

75
00:07:15,790 --> 00:07:20,770
ma prima di tutto ho bisogno di trovare l'indice perché quell'indice qui funziona

76
00:07:20,770 --> 00:07:25,230
solo per i prodotti dell'utente, è molto probabile che l'indice nei prodotti

77
00:07:25,750 --> 00:07:32,200
disponibili sia diverso, quindi ho i miei disponibili indice del prodotto qui se si desidera chiamarlo in

78
00:07:32,200 --> 00:07:37,330
questo modo, che generalmente ha la stessa logica di selezione, quindi possiamo copiarlo, ma

79
00:07:37,420 --> 00:07:45,660
ovviamente esaminerò l'array di prodotti disponibili anziché l'array di prodotti dell'utente. E ora di nuovo, qui possiamo avere i prodotti disponibili

80
00:07:45,660 --> 00:07:53,280
aggiornati in cui copio i miei prodotti disponibili di stato e quindi ho impostato i prodotti disponibili aggiornati

81
00:07:53,340 --> 00:08:02,110
per l'indice di prodotto dato uguale, mi scusi per l'indice di prodotto disponibile ovviamente uguale al prodotto aggiornato, in modo che

82
00:08:02,410 --> 00:08:07,810
Sostituisco il mio prodotto esistente con il prodotto aggiornato in entrambi i

83
00:08:07,810 --> 00:08:15,030
prodotti disponibili e l'array di prodotti dell'utente. Bene e ora, dobbiamo solo restituire il nostro nuovo

84
00:08:15,030 --> 00:08:23,490
stato, prima di tutto copiare quello esistente e ora impostare i prodotti disponibili uguali ai prodotti disponibili aggiornati e impostare i prodotti utente uguali

85
00:08:23,490 --> 00:08:32,790
ai prodotti utente aggiornati, quindi per i miei array aggiornati sto configurando Là. Con ciò, speriamo di avere tutta la logica di cui abbiamo bisogno, ora

86
00:08:32,790 --> 00:08:38,880
spediamo questi eventi dalla schermata del prodotto aggiunto. Quindi qui dobbiamo importare utilizzare l'invio da

87
00:08:38,880 --> 00:08:46,440
React Redux e importare le nostre azioni, quindi importa tutto come azioni dei prodotti dalla cartella

88
00:08:46,530 --> 00:08:54,910
del negozio, lì dalla cartella delle azioni e lì dal file dei prodotti e quindi spedisci queste cose

89
00:08:55,360 --> 00:09:01,060
nel gestore di invio, ovviamente. Qui, ciò che inviamo dipende dal fatto che stiamo

90
00:09:01,150 --> 00:09:02,540
modificando o aggiungendo

91
00:09:02,650 --> 00:09:08,110
amd come ho già detto, possiamo scoprire qual è il caso con l'aiuto del prodotto modificato, se

92
00:09:08,110 --> 00:09:11,100
è impostato, stiamo modificando, se non è impostato, siamo aggiungendo.

93
00:09:11,100 --> 00:09:18,370
Quindi qui, nel gestore di invio, possiamo aggiungere un controllo if e verificare se il prodotto modificato, se impostato, stiamo

94
00:09:18,460 --> 00:09:19,170
modificando,

95
00:09:19,300 --> 00:09:25,660
quindi quindi voglio inviare il mio evento di aggiornamento del prodotto, per quello, prima di tutto, io ho

96
00:09:25,660 --> 00:09:33,650
bisogno di creare quella funzione di spedizione con l'aiuto di usa la spedizione e ora con quella creata, laggiù possiamo chiamare le

97
00:09:34,310 --> 00:09:39,410
azioni dei prodotti di spedizione aggiornare il prodotto perché è quello che stiamo facendo

98
00:09:40,570 --> 00:09:42,700
qui e ora inoltrare tutti

99
00:09:42,700 --> 00:09:44,980
i dati di cui abbiamo bisogno

100
00:09:45,130 --> 00:09:49,060
che è il mio ID prodotto , questo è l'ID del

101
00:09:51,850 --> 00:09:59,020
prodotto che stiamo modificando, lo stiamo estraendo qui e, naturalmente, inoltre, inoltriamo anche il titolo, inoltriamo la descrizione, tutte queste

102
00:09:59,050 --> 00:10:07,630
costanti di stato che abbiamo qui, il nostro imageUrl e non il prezzo perché noi non ne ho bisogno e nell'altro caso qui, ciò

103
00:10:07,630 --> 00:10:09,060
significa che stiamo aggiungendo,

104
00:10:09,130 --> 00:10:13,560
quindi voglio inviare l'azione dei prodotti. creare un prodotto,

105
00:10:13,660 --> 00:10:21,850
qui inoltriamo titolo, descrizione, imageUrl e anche il prezzo e, con ciò, dovremmo avere una configurazione

106
00:10:21,900 --> 00:10:26,580
in cui speriamo di poter aggiungere e modificare prodotti.

107
00:10:26,640 --> 00:10:28,040
Quindi

108
00:10:28,050 --> 00:10:36,060
salviamo questo e diamo un'occhiata. Se ora andiamo nell'area di amministrazione qui e ho aggiunto questo e aggiungo

109
00:10:36,120 --> 00:10:43,460
un punto esclamativo qui e anche uno qui nella descrizione e premo Salva, ottengo indefinito non è un oggetto, valutando il prezzo degli

110
00:10:43,460 --> 00:10:45,440
oggetti di scena su fisso.

111
00:10:45,530 --> 00:10:49,540
Quindi sembra che abbia perso il mio prezzo qui quando ho provato ad aggiornarlo.

112
00:10:49,850 --> 00:10:54,140
Bene, prima di risolvere questo problema, vediamo se l'aggiunta di un nuovo prodotto funziona affatto.

113
00:10:54,260 --> 00:11:00,890
Se aggiungo un prodotto qui con test, test che ovviamente non è un imageUrl valido,

114
00:11:00,890 --> 00:11:06,750
quindi non vedremo un'immagine ma almeno sorseggeremo qualcosa, anche questo è un test.

115
00:11:06,830 --> 00:11:10,250
Se proviamo questo e premo invio, anche questo non funziona,

116
00:11:10,250 --> 00:11:13,220
quindi in qualche modo il risparmio del

117
00:11:13,220 --> 00:11:19,700
prezzo non funziona e penso che il problema sia ovviamente qui, il problema qui è che il prezzo è

118
00:11:19,700 --> 00:11:24,890
in realtà una stringa qui ma dovrebbe essere un numero, quindi possiamo facilmente convertirlo in

119
00:11:24,890 --> 00:11:33,580
un numero aggiungendo un plus qui prima di passarlo per creare un prodotto, per aggiornarlo d'altra parte, se diamo un'occhiata al nostro riduttore di prodotti,

120
00:11:33,580 --> 00:11:36,790
normalmente dovrebbe mantenere il prezzo che aveva già .

121
00:11:36,850 --> 00:11:42,870
Quindi vediamo se quel plus lo risolve per l'aggiunta o se c'è anche un problema diverso, questa è stata una modifica che è

122
00:11:42,880 --> 00:11:48,060
comunque richiesta, ma vediamo se c'è un altro problema. Quindi prova, prova, dodici per

123
00:11:48,060 --> 00:11:54,330
favore inserisci solo i numeri qui, non un testo che potresti attualmente ma che

124
00:11:54,330 --> 00:12:02,950
potrebbe romperlo, prova questo, premi questo pulsante, sì che non sembra male, abbiamo qualche problema con l'immagine qui ma

125
00:12:02,950 --> 00:12:09,920
se scorriamo verso il basso, in realtà qui se lo ignoriamo, possiamo vedere qui il

126
00:12:09,920 --> 00:12:14,030
nostro prodotto, quindi il prezzo manca, quindi qualcosa non

127
00:12:14,040 --> 00:12:18,290
va lì e anche noi non sembriamo salvare l'immagine

128
00:12:18,390 --> 00:12:22,380
correttamente, non solo perché non viene visualizzata ma a

129
00:12:22,380 --> 00:12:25,400
causa di quell'avvertimento che abbiamo ricevuto

130
00:12:25,740 --> 00:12:27,570
ma generalmente funziona.

131
00:12:27,570 --> 00:12:31,650
Tuttavia, ad esempio, se provo ad aggiornare e salvare questo, riceviamo ancora un errore, quindi

132
00:12:31,650 --> 00:12:33,320
c'è ancora qualcosa di sbagliato.

133
00:12:33,360 --> 00:12:39,270
Quindi una cosa che non va è nelle azioni ovviamente, per aggiornare il prodotto qui, il tipo dovrebbe essere aggiornare il

134
00:12:39,270 --> 00:12:41,100
prodotto e non creare il

135
00:12:41,100 --> 00:12:45,710
prodotto, altrimenti attiviamo un'azione sbagliata nel riduttore che spiega l'errore di prezzo che abbiamo ottenuto lì.

136
00:12:45,720 --> 00:12:50,190
Quindi questo deve essere un aggiornamento del prodotto qui per l'aggiornamento di un prodotto non sorprende.

137
00:12:50,400 --> 00:12:57,060
Quindi questo è un problema, ma un altro grosso problema può essere trovato nella schermata del prodotto aggiunto. Uso qui il mio metodo di callback per

138
00:12:57,060 --> 00:13:00,580
avvolgere correttamente il gestore di invio e lo faccio

139
00:13:00,660 --> 00:13:03,480
per evitare ricreazioni inutili delle funzioni.

140
00:13:03,480 --> 00:13:08,730
Il problema è che inizialmente ho impostato questo per avere un array vuoto come elenco di dipendenze, il che significa

141
00:13:08,730 --> 00:13:12,740
che questo non viene mai ricreato, il che ha senso quando abbiamo solo il login

142
00:13:13,230 --> 00:13:17,100
della console lì, ma ora stiamo facendo cose lì e ora abbiamo effettivamente dipendenze.

143
00:13:17,100 --> 00:13:22,710
In questo momento non ho mai ricreato questa funzione, il che significa che non viene mai ricreata per i suoi valori aggiornati.

144
00:13:22,710 --> 00:13:28,180
Pertanto, quando inviamo il nostro modulo, non prendiamo mai in considerazione ciò che l'utente ha inserito.

145
00:13:28,200 --> 00:13:30,930
Quindi in realtà ora

146
00:13:31,020 --> 00:13:40,590
dobbiamo specificare le dipendenze qui, la funzione di invio ma, soprattutto, l'ID prod, il titolo, la descrizione

147
00:13:40,680 --> 00:13:49,380
e l'immagineUrl e ovviamente anche il prezzo. Ora, se lo salviamo, dovremmo andare bene e tutti i problemi

148
00:13:49,380 --> 00:13:50,880
dovrebbero essere eliminati.

149
00:13:50,880 --> 00:13:52,220
Quindi aspettiamo che

150
00:13:52,290 --> 00:13:59,510
questo si ricarichi, vai su admin ora e iniziamo a modificarlo forse e ora se aggiungiamo un punto esclamativo nel titolo e

151
00:13:59,510 --> 00:14:05,660
nella descrizione e salviamo questo e torniamo indietro, vediamo che qui e se andiamo ai prodotti , lo vediamo

152
00:14:05,720 --> 00:14:09,090
anche qui e nei dettagli, vediamo anche quel punto esclamativo.

153
00:14:09,170 --> 00:14:12,910
Ora, se torniamo all'amministratore e creiamo un

154
00:14:13,080 --> 00:14:15,200
nuovo prodotto, test,

155
00:14:15,390 --> 00:14:21,790
test, dodici, test questo e lo salvo e torno indietro, ora

156
00:14:21,890 --> 00:14:26,780
anche questo appare laggiù. Ovviamente l'immagine non viene visualizzata

157
00:14:26,810 --> 00:14:31,480
perché non abbiamo inserito un URL valido ma vengono visualizzati tutti gli altri

158
00:14:31,550 --> 00:14:35,410
dati, quindi in genere funziona e ovviamente potresti inserire un

159
00:14:35,410 --> 00:14:44,450
URL di immagine valido e che si interromperebbe, proviamo rapidamente questo anche. Quindi torniamo alla sezione di amministrazione e forse aggiungiamo uno scaffale qui, per

160
00:14:44,470 --> 00:14:53,970
questo ho selezionato l'URL di uno scaffale che ho trovato su Internet per 199. 99, questa è una bella

161
00:14:53,970 --> 00:15:00,870
mensola come questa. Se ora salviamo questo e torniamo indietro, sembra buono, ecco la

162
00:15:00,870 --> 00:15:05,260
nostra immagine e vediamo anche qui sullo schermo del prodotto e possiamo vederlo anche qui.

163
00:15:05,730 --> 00:15:07,070
Quindi questo

164
00:15:07,080 --> 00:15:11,610
sembra funzionare e con quello, generalmente abbiamo una configurazione che funziona.

165
00:15:11,610 --> 00:15:16,410
Ora ci sono cose minori su cui voglio lavorare, ad esempio prima di eliminare, sarebbe

166
00:15:16,410 --> 00:15:23,310
bello avere una piccola finestra di dialogo di conferma e, inoltre, voglio assicurarmi che quando abbiamo aggiunto o modificato un prodotto, quando

167
00:15:23,400 --> 00:15:26,140
facciamo clic su Salva qui, torniamo automaticamente indietro.

168
00:15:26,130 --> 00:15:31,590
Quindi queste sono solo cose secondarie, ovviamente, ma penso che siano un bel finale qui in questo modulo.