1
00:00:02,100 --> 00:00:05,460
Per il pulsante Elimina, ricominciamo con la logica Redux.

2
00:00:05,490 --> 00:00:11,850
Quindi qui nelle azioni, ad esempio, possiamo registrare un nuovo identificatore, rimuovere dal carrello suona come un

3
00:00:11,850 --> 00:00:17,120
nome appropriato dato che avevamo aggiunto al carrello prima, quindi rimuovere dal carrello.

4
00:00:17,110 --> 00:00:22,710
Aggiungerò anche qui una funzione di creatore di azioni, rimuoverla dal carrello.

5
00:00:22,740 --> 00:00:27,750
Questo ora richiede solo l'ID del prodotto che dovrebbe essere rimosso, quindi solo l'ID prodotto e

6
00:00:27,750 --> 00:00:34,260
quindi restituisce un nuovo oggetto azione in cui il tipo di corso viene rimosso dal carrello e dove abbiamo il pid,

7
00:00:34,260 --> 00:00:40,800
l'ID prodotto, dove inoltro il ID prodotto Sto arrivando qui. Ora nel riduttore, abbiamo aggiunto la

8
00:00:40,800 --> 00:00:44,560
custodia al carrello, ora dobbiamo semplicemente aggiungere un

9
00:00:44,560 --> 00:00:48,280
altro caso qui e quella custodia è la

10
00:00:50,290 --> 00:00:53,030
custodia da rimuovere dal carrello.

11
00:00:53,050 --> 00:00:57,960
Per questo, devi assicurarti di importare l'identificatore dell'azione rimosso dal carrello dal file delle

12
00:00:58,000 --> 00:00:58,990
azioni del

13
00:01:01,840 --> 00:01:03,670
carrello e nel caso di

14
00:01:03,670 --> 00:01:07,120
rimozione dal carrello qui, abbiamo di nuovo due casi.

15
00:01:07,140 --> 00:01:12,660
Uno è che nel carrello c'era un solo articolo di quel prodotto, come per

16
00:01:12,660 --> 00:01:13,900
il tappeto blu,

17
00:01:13,980 --> 00:01:16,760
in questo caso dobbiamo rimuoverlo completamente dall'oggetto

18
00:01:16,770 --> 00:01:17,850
carrello, quindi

19
00:01:17,850 --> 00:01:23,400
da questo oggetto e questo lo rimuoverà quindi da questa riga che abbiamo prodotto qui.

20
00:01:23,400 --> 00:01:27,870
Se abbiamo due o più articoli, vogliamo solo ridurre la quantità di 1.

21
00:01:27,870 --> 00:01:33,120
Ovviamente potresti sempre cancellare completamente questo elemento se lo volessi, ma voglio mostrarti come

22
00:01:33,120 --> 00:01:35,450
potresti distinguere tra questi due casi.

23
00:01:35,490 --> 00:01:41,130
Quindi in realtà se abbiamo una quantità superiore a una, non voglio cancellare l'articolo dal carrello, ma

24
00:01:41,130 --> 00:01:43,870
in realtà ridurre la quantità di 1.

25
00:01:44,100 --> 00:01:51,210
Quindi, per rimuovere dal carrello, dobbiamo scoprire qual è la nostra quantità. Quindi la nostra quantità attuale che conservo in questa costante

26
00:01:51,210 --> 00:01:57,930
può essere dedotta dal nostro stato ovviamente, lì negli articoli, dobbiamo trovare il prodotto che stiamo cercando e ovviamente

27
00:01:57,960 --> 00:02:00,000
possiamo farlo con l'aiuto dell'ID

28
00:02:00,000 --> 00:02:04,770
che è parte della nostra azione qui nel campo pid perché ora state items

29
00:02:05,550 --> 00:02:11,440
è un oggetto e quindi possiamo accedere all'azione. pid qui, giusto.

30
00:02:11,450 --> 00:02:16,680
Questo accederà dinamicamente al valore con la chiave ID prodotto qui nel nostro articolo, quindi con

31
00:02:16,950 --> 00:02:18,380
l'ID prodotto stiamo entrando

32
00:02:18,390 --> 00:02:21,220
in questa azione e questo è il modo

33
00:02:21,240 --> 00:02:24,950
in cui aggiungiamo articoli al nostro oggetto articoli qui a destra.

34
00:02:24,960 --> 00:02:28,890
Usiamo il nostro ID prodotto come identificatore, questo

35
00:02:28,920 --> 00:02:32,410
è quello che uso qui per accedervi.

36
00:02:32,430 --> 00:02:36,940
Questo avrà una quantità perché conterrà un valore che è un articolo del prodotto, puoi ovviamente

37
00:02:36,990 --> 00:02:41,120
aggiungere anche un controllo se questo articolo è effettivamente parte del carrello ma il

38
00:02:41,130 --> 00:02:46,290
modo in cui costruiamo questa app, non dovremmo mai essere in grado di raggiungere questo azione senza che quel

39
00:02:46,290 --> 00:02:51,690
prodotto faccia parte del carrello perché possiamo solo attivare la nostra azione di eliminazione qui all'interno della schermata del carrello,

40
00:02:51,690 --> 00:02:55,340
quindi non è necessario controllare qui, ma è necessario ottenere la quantità.

41
00:02:55,410 --> 00:03:03,780
Ora possiamo verificare se la quantità corrente è maggiore di 1, il che significa che

42
00:03:03,780 --> 00:03:06,740
dobbiamo ridurla, dobbiamo ridurla, non cancellarla,

43
00:03:06,750 --> 00:03:08,940
altrimenti dobbiamo cancellarla.

44
00:03:09,090 --> 00:03:11,790
Ora cominciamo con il caso di cancellazione.

45
00:03:11,850 --> 00:03:18,900
Quindi qui dobbiamo solo restituire un nuovo oggetto oggetti che include tutti gli oggetti

46
00:03:18,930 --> 00:03:27,520
vecchi ma non include più questo oggetto. Quindi possiamo avere i nostri articoli del carrello aggiornati qui in cui

47
00:03:27,520 --> 00:03:36,870
cloniamo articoli di stato, come questo e ora per rimuovere una proprietà, possiamo usare la parola chiave di eliminazione che Javascript conosce e lì, possiamo eliminare gli

48
00:03:36,870 --> 00:03:41,880
articoli del carrello aggiornati per l'azione. pid.

49
00:03:41,880 --> 00:03:49,290
Quindi questo eliminerà questo articolo dal nostro oggetto Javascript copiato qui, eliminerà completamente questo articolo, questo articolo del prodotto interamente

50
00:03:49,290 --> 00:03:57,020
dal nostro oggetto articoli del carrello. Ecco come possiamo cancellarlo. Ora nell'altro caso che dobbiamo semplicemente

51
00:03:57,020 --> 00:03:59,690
ridurlo, posso avere il mio articolo carrello

52
00:04:01,040 --> 00:04:07,250
aggiornato, in modo che quel singolo articolo carrello in cui creo un nuovo articolo carrello con

53
00:04:07,280 --> 00:04:13,700
la classe articolo carrello e lì, voglio copiare i valori dell'esistente carrello ma semplicemente ridurre la quantità.

54
00:04:14,220 --> 00:04:17,910
Quindi l'articolo del carrello prende la quantità proprio come

55
00:04:17,910 --> 00:04:25,290
i primi valori, quindi ora l'obiettivo è quello di ottenere l'accesso agli articoli dello stato per l'ID prodotto che

56
00:04:25,290 --> 00:04:33,450
ottengo sull'azione e poiché ripetere questo sarà ingombrante, lo conserverò in un aiuto una costante , l'articolo carrello selezionato è questo

57
00:04:33,510 --> 00:04:37,290
qui, ora possiamo sostituirlo qui con l'articolo carrello selezionato e

58
00:04:37,290 --> 00:04:41,760
qui posso usare cartItem selezionato. quantità meno una.

59
00:04:41,760 --> 00:04:48,240
Ora ovviamente sappiamo che questo non sarà zero perché la quantità era maggiore di 1 e ora possiamo ovviamente conservare

60
00:04:48,240 --> 00:04:49,820
il resto dei dati.

61
00:04:49,830 --> 00:04:57,270
Quindi manteniamo il prezzo del prodotto qui, manteniamo il titolo del prodotto, che tutto non cambia, la

62
00:04:57,270 --> 00:05:00,840
somma tuttavia ovviamente cambia e questa è

63
00:05:00,910 --> 00:05:05,090
la somma, la vecchia somma meno il prezzo ovviamente, quindi

64
00:05:05,100 --> 00:05:13,410
meno il prezzo del prodotto perché ne abbiamo rimosso uno articolo, dobbiamo ridurre la somma del prezzo di un articolo.

65
00:05:13,470 --> 00:05:21,870
Ora questo articolo carrello aggiornato deve sostituire l'articolo corrente nel nostro oggetto articoli carrello. Affinché possiamo anche riutilizzare un po 'di codice, in realtà lo cambierò un

66
00:05:21,870 --> 00:05:26,760
po' e creerò articoli del carrello aggiornati come variabili qui invece di una costante qui

67
00:05:26,760 --> 00:05:32,880
nel blocco else, in modo che io aggiorni semplicemente questo valore di variabili, così che qui in il blocco

68
00:05:33,240 --> 00:05:34,230
if, possiamo

69
00:05:34,230 --> 00:05:40,530
anche usare lo stesso nome di variabile, articoli carrello aggiornati in cui ho impostato questo uguale a una copia degli

70
00:05:40,530 --> 00:05:49,890
articoli esistenti ma poi sostituisco il mio pid di azione qui, quindi il mio ID prodotto, il mio identificatore, il valore lì con il articolo carrello aggiornato che è il

71
00:05:49,890 --> 00:05:56,610
mio vecchio articolo carrello con la quantità e la somma aggiornate. Questi sono gli articoli del carrello aggiornati, ora

72
00:05:56,700 --> 00:05:57,520
ovviamente

73
00:05:57,540 --> 00:06:02,550
dovremo anche regolare l'importo totale del nostro stato, quindi dopo questo blocco

74
00:06:02,550 --> 00:06:10,800
in caso contrario, restituiamo una copia dello stato, gli articoli possono essere impostati su articoli del carrello aggiornati e

75
00:06:11,160 --> 00:06:14,030
ora importante, il l'importo totale può

76
00:06:14,100 --> 00:06:20,160
essere impostato in modo da indicare l'importo totale meno il prezzo del prodotto dell'articolo

77
00:06:23,530 --> 00:06:31,030
carrello selezionato poiché, proprio come ho aggiornato la somma per questo singolo articolo carrello, ovviamente anche la somma

78
00:06:31,060 --> 00:06:38,200
totale del carrello deve essere regolata come tale. Ora possiamo provare a inviare questa azione di rimozione dal carrello.

79
00:06:38,200 --> 00:06:46,940
Quindi andiamo alla schermata del carrello in cui alla fine ho questa funzione di rimozione e lì,

80
00:06:46,940 --> 00:06:51,860
ora voglio inviare un'azione, quindi avrò bisogno dell'accesso

81
00:06:51,890 --> 00:07:03,040
alla funzione di spedizione con l'aiuto del gancio di spedizione usa. Ora possiamo usarlo qui, accedervi chiamando semplicemente usa l'invio in questo modo e

82
00:07:03,550 --> 00:07:05,740
quindi inviando questo laggiù.

83
00:07:05,740 --> 00:07:17,150
La spedizione ora importa tutte le azioni di cui abbiamo bisogno, quindi importa tutto come azioni carrello dalla cartella del negozio, dal carrello azioni come questo, usando di nuovo questa importazione

84
00:07:17,150 --> 00:07:24,080
in bundle che è totalmente opzionale, puoi anche scegliere come target le cose specifiche di cui hai bisogno, quindi

85
00:07:24,080 --> 00:07:25,760
scegli come target creatori

86
00:07:25,790 --> 00:07:31,610
di azioni, in questo caso la rimozione dal creatore di carrelli di cui avremmo bisogno e

87
00:07:32,480 --> 00:07:35,400
poi laggiù, esegui semplicemente questo creatore di

88
00:07:35,420 --> 00:07:41,780
azioni, nel mio caso usando le azioni di carrelli. removeFromCart, inoltra l'ID prodotto che ovviamente otteniamo

89
00:07:41,780 --> 00:07:45,030
qui, è itemData. articolo.

90
00:07:45,110 --> 00:07:50,810
e ora tieni presente che stiamo eseguendo il ciclo tra gli articoli di questa forma, quindi avremo un campo

91
00:07:50,810 --> 00:07:55,840
ID prodotto lì dentro e quindi possiamo usarlo qui per inoltrarlo per rimuoverlo dal carrello, si spera

92
00:07:55,850 --> 00:08:00,770
quindi che ci consenta di aggiornare Questo. E questo dovrebbe essere tutto, Redux dovrebbe

93
00:08:00,770 --> 00:08:05,470
fare il resto dietro le quinte e dovrebbe ridare automaticamente lo schermo del carrello ogni volta

94
00:08:05,570 --> 00:08:12,060
che il carrello cambia, quindi ogni volta che rimuoviamo gli articoli. Quindi ho aggiunto due camicie rosse e un tappeto blu e se

95
00:08:13,260 --> 00:08:13,790
rimuovo

96
00:08:13,800 --> 00:08:17,000
una maglietta rossa, anzi un problema che abbiamo sono gli interruttori dell'ordine,

97
00:08:17,010 --> 00:08:19,800
dovremo risolverlo ma vedrai che la quantità è stata aggiornata correttamente.

98
00:08:19,920 --> 00:08:25,620
Se lo rimuovo ora, anche l'importo totale viene aggiornato correttamente, se lo rimuovo ora, in effetti è andato completamente e

99
00:08:26,360 --> 00:08:28,080
ora anche questo è disabilitato.

100
00:08:28,080 --> 00:08:31,970
Quindi in genere funziona, ma ovviamente il passaggio dell'ordine, non è

101
00:08:31,980 --> 00:08:34,140
qualcosa che voglio succedere qui.

102
00:08:34,380 --> 00:08:40,620
Ora per evitare che l'ordine cambi, possiamo semplicemente andare alla schermata del carrello dove cambio i miei articoli per essere

103
00:08:40,620 --> 00:08:45,960
un array e lì, dobbiamo solo assicurarci che questo array sia sempre ordinato allo stesso

104
00:08:45,990 --> 00:08:51,690
modo perché questo selettore attivare e recuperare i nostri dati ogni volta che cambia il nostro stato Redux.

105
00:08:52,320 --> 00:08:57,540
Quindi quindi qui, avremo sempre l'ultima istantanea dei dati che abbiamo dentro e quindi, è qui

106
00:08:57,540 --> 00:09:02,670
che dobbiamo solo ordinarli allo stesso modo in ogni momento e quindi renderli sempre

107
00:09:02,670 --> 00:09:03,790
allo stesso modo.

108
00:09:03,900 --> 00:09:11,250
Quindi dobbiamo solo assicurarci che il nostro array di articoli del carrello trasformato sia ordinato chiamando ordina lì.

109
00:09:11,410 --> 00:09:17,310
Se lo chiamo in questo modo, comincio ad aggiungere alcuni dati qui, ora vedi

110
00:09:17,410 --> 00:09:21,820
che da solo non ha funzionato perché non gli stiamo

111
00:09:21,820 --> 00:09:28,480
dicendo come ordinare e non sa come farlo per oggetti da la casella ma possiamo passare

112
00:09:28,480 --> 00:09:34,490
una funzione per ordinare in cui confrontiamo sempre due elementi, a e b, tra

113
00:09:34,600 --> 00:09:38,140
loro e quindi l'ordinamento deve restituire un numero

114
00:09:38,190 --> 00:09:40,780
alla fine che determina ciò

115
00:09:40,800 --> 00:09:50,530
che viene prima e lì, puoi ovviamente ordinare questo comunque vuoi, ad esempio per ID prodotto, quindi possiamo semplicemente restituire un confronto in

116
00:09:50,530 --> 00:09:58,110
cui controlliamo l'ID prodotto A, confrontarlo con l'ID prodotto B e se è maggiore, quindi con un'espressione ternaria

117
00:09:58,150 --> 00:10:02,210
qui, ne ho restituito uno, altrimenti restituisco meno uno .

118
00:10:02,370 --> 00:10:07,620
Questa è la normale funzione di ordinamento fornita da Javascript e ora questo assicura che

119
00:10:07,620 --> 00:10:08,610
ordiniamo sempre

120
00:10:08,670 --> 00:10:17,520
allo stesso modo, quindi ora vedi se rimuovo questo, il corto rosso rimane al suo posto e quindi la nostra logica del carrello è finita.

121
00:10:17,520 --> 00:10:23,620
Ora possiamo assicurarci di poter effettivamente anche fare clic sul pulsante di quell'ordine ora e lo aggiungiamo come un ordine

122
00:10:23,610 --> 00:10:29,250
che in seguito possiamo visitare con l'utile cassetto qui che ci consente di andare alla schermata degli ordini

123
00:10:29,250 --> 00:10:31,190
che ovviamente dobbiamo ancora Inserisci.