1
00:00:02,260 --> 00:00:08,030
Per assicurarci di poter avere anche ordini in questa applicazione, ripeteremo qualcosa che abbiamo fatto prima,

2
00:00:08,050 --> 00:00:13,940
lavoreremo nella schermata degli ordini e lavoreremo sulla nostra logica Redux in modo da poter archiviare gli ordini.

3
00:00:14,020 --> 00:00:15,980
Quindi inizierò aggiungendo

4
00:00:16,060 --> 00:00:22,060
un nuovo riduttore, gli ordini. file js che contiene il nostro riduttore di ordini e ovviamente avremo anche bisogno di un file di

5
00:00:22,060 --> 00:00:26,280
azioni in cui gestiamo le nostre azioni relative agli ordini, gli ordini. anche file js.

6
00:00:27,010 --> 00:00:33,910
Quindi iniziamo con gli ordini. i file js riduttori qui e di nuovo come sempre, avremo

7
00:00:33,910 --> 00:00:41,020
uno stato iniziale qui che definisce anche il modo in cui i nostri dati sono modellati e gli ordini saranno davvero semplici in

8
00:00:41,020 --> 00:00:42,640
questa applicazione, sarà solo

9
00:00:42,640 --> 00:00:46,660
una serie di ordini , è davvero tutto ciò di cui abbiamo bisogno.

10
00:00:47,390 --> 00:00:53,630
Quindi possiamo esportare qui una funzione predefinita che è il nostro riduttore, che ovviamente ha uno stato inizializzato

11
00:00:53,630 --> 00:01:00,830
con lo stato iniziale, che riceve un'azione e che ovviamente è tutto gestito da Redux e restituiamo il nostro stato qui,

12
00:01:00,830 --> 00:01:01,520
ma

13
00:01:01,520 --> 00:01:07,580
ovviamente in genere, vogliamo inoltre attivare il tipo di azione e gestire un paio di casi diversi

14
00:01:08,300 --> 00:01:13,350
qui, quindi possiamo già aggiungere questa istruzione switch. Ora per quanto riguarda i

15
00:01:13,380 --> 00:01:19,130
casi che vogliamo gestire, le azioni che vogliamo gestire, c'è una azione che voglio

16
00:01:19,130 --> 00:01:26,500
gestire in questo momento e che è il mio aggiungere le azioni dell'ordine, quindi aggiungere l'ordine sembra anche

17
00:01:26,510 --> 00:01:34,390
un identificatore adatto e quindi esporterò il mio aggiungi qui il creatore dell'azione dell'ordine che dovrebbe ricevere due cose

18
00:01:34,910 --> 00:01:40,450
ora: gli articoli del mio carrello o gli articoli che fanno parte dell'ordine

19
00:01:40,550 --> 00:01:47,180
ma questi sono gli articoli del mio carrello alla fine e, naturalmente, l'importo totale e ovviamente

20
00:01:47,180 --> 00:01:52,550
tutti i dati che abbiamo nel carrello alla fine, riusciamo nel carrello, giusto?

21
00:01:52,550 --> 00:01:58,760
Abbiamo un importo totale del carrello e abbiamo gli articoli del carrello e poiché ordiniamo il

22
00:01:58,760 --> 00:02:03,380
nostro intero carrello, ovviamente ha senso che questi dati finiscano nell'ordine.

23
00:02:03,520 --> 00:02:08,900
Ora qui nel creatore dell'azione, restituiamo quindi il nostro nuovo oggetto azione e questo

24
00:02:08,900 --> 00:02:17,240
oggetto azione ha un tipo che è aggiungi ordine e quindi ad esempio una chiave dei dati dell'ordine in cui uniamo i nostri

25
00:02:17,240 --> 00:02:23,270
articoli carrello, li archiviamo in una proprietà articoli carrello e quindi l'importo contiene l'importo totale per esempio.

26
00:02:23,270 --> 00:02:29,660
Ora dipende da te se lo passi in una proprietà dei dati dell'ordine unito o se hai

27
00:02:30,140 --> 00:02:33,690
due o più proprietà come parte dell'oggetto azione.

28
00:02:33,720 --> 00:02:37,710
Questa è l'azione, tornando al riduttore, cosa dovrebbe succedere quando riceviamo un ordine?

29
00:02:38,580 --> 00:02:45,040
Bene, voglio creare un nuovo oggetto ordine e per questo, proprio come prima, lavorerò con i miei modelli.

30
00:02:45,090 --> 00:02:52,110
Quindi andiamo nella cartella dei modelli e lì, aggiungiamo un ordine. file js dove abbiamo un ordine di classe che esporterò in

31
00:02:52,110 --> 00:02:52,800
modo

32
00:02:52,830 --> 00:02:58,890
da non dimenticarlo di nuovo e lì dentro abbiamo un costruttore che ci permette di creare un nuovo ordine.

33
00:02:58,890 --> 00:03:04,320
Ora come dovrebbe essere un ordine? Un ordine dovrebbe ovviamente avere un ID, che

34
00:03:04,320 --> 00:03:04,700
non

35
00:03:04,770 --> 00:03:10,970
è l'ID del prodotto perché ovviamente possiamo ordinare lo stesso prodotto più volte e, quindi, un ordine è totalmente staccato.

36
00:03:11,040 --> 00:03:13,650
Inoltre, un ordine può contenere più di

37
00:03:13,650 --> 00:03:16,380
un prodotto, alla fine ordiniamo l'intero carrello lì.

38
00:03:16,380 --> 00:03:18,570
Quindi l'ordine ha un ID

39
00:03:18,750 --> 00:03:26,160
autonomo, otterrà gli articoli, l'importo totale e un ordine ha anche bisogno di una data ovviamente perché quando effettuiamo un ordine,

40
00:03:26,160 --> 00:03:29,430
vogliamo memorizzare quella data in cui è stato effettuato.

41
00:03:29,940 --> 00:03:31,500
E poi memorizzerò tutti

42
00:03:31,500 --> 00:03:42,160
quei dati, ottengo il mio ID, ottengo i miei articoli qui, ottengo l'importo totale e anche la data. Con ciò torniamo al riduttore, al riduttore degli ordini e vediamo

43
00:03:42,170 --> 00:03:49,310
cosa possiamo fare con gli ordini lì. Lì, voglio gestire il caso di ordine aggiuntivo

44
00:03:49,340 --> 00:03:53,260
in questo momento, che è l'unica azione che ho.

45
00:03:53,270 --> 00:04:01,140
Quindi devi ovviamente importare questo identificatore di azione e lì, voglio creare un nuovo ordine, memorizzarlo in una nuova

46
00:04:01,160 --> 00:04:01,820
costante

47
00:04:01,820 --> 00:04:07,960
d'ordine con il modello di ordine che abbiamo appena creato che devi quindi importare.

48
00:04:08,030 --> 00:04:14,030
Ora con la nuova parola chiave, possiamo creare un nuovo oggetto Javascript basato su quella classe e lì, abbiamo bisogno

49
00:04:14,180 --> 00:04:17,330
dell'ID, degli articoli, dell'importo totale e della data di creazione.

50
00:04:17,330 --> 00:04:23,040
Ora riceviamo solo gli articoli e l'importo totale come parte della nostra azione qui, come puoi dire.

51
00:04:23,240 --> 00:04:28,630
Ora l'ID è qualcosa che in seguito genereremo dinamicamente su un server, per

52
00:04:28,640 --> 00:04:36,530
il momento, userò un ID pseudo univoco fittizio con una nuova data da stringare, la data ovviamente è un oggetto

53
00:04:36,560 --> 00:04:42,140
Javascript incorporato e questo alla fine genera un ID che è un po 'unico.

54
00:04:42,140 --> 00:04:48,230
Tecnicamente, potremmo creare due ordini nello stesso identico timestamp, esattamente nello stesso millisecondo, sebbene nella nostra app in

55
00:04:48,230 --> 00:04:52,340
cui cancelliamo il carrello dopo aver premuto Aggiungi ordine o ordina ora,

56
00:04:52,340 --> 00:04:54,230
questo non sarà davvero possibile.

57
00:04:54,230 --> 00:04:57,470
Quindi per il momento questo è un buon ID fittizio, dovrebbe essere

58
00:04:57,470 --> 00:04:59,050
una stringa quindi è importante

59
00:05:00,110 --> 00:05:06,170
e, oltre a ciò, gli elementi che possono essere memorizzati. Otteniamo questo sulla nostra azione, giusto, l'azione

60
00:05:06,170 --> 00:05:10,770
ha questa proprietà dei dati dell'ordine e lì dentro avremo gli articoli.

61
00:05:11,060 --> 00:05:16,580
Quindi i dati dell'ordine di azione. articoli ci dà gli articoli e per l'importo totale, possiamo

62
00:05:16,580 --> 00:05:17,280
usare l'azione.

63
00:05:17,330 --> 00:05:20,250
orderData.

64
00:05:20,450 --> 00:05:23,810
e poi lì, abbiamo questa quantità di proprietà che possiamo

65
00:05:23,810 --> 00:05:25,650
estrarre, quindi lì possiamo usarla.

66
00:05:25,850 --> 00:05:31,700
Ultimo ma non meno importante per la data, ovviamente voglio generare un timestamp qui con

67
00:05:31,700 --> 00:05:37,730
una nuova data, questo costruttore Javascript incorporato, se lo eseguiamo in questo modo ci dà il timestamp

68
00:05:37,940 --> 00:05:41,060
corrente memorizzato in un oggetto Javascript alla fine.

69
00:05:41,060 --> 00:05:46,700
Ora questo nuovo ordine deve solo essere aggiunto al nostro array di ordini, quindi restituiamo una nuova istantanea di

70
00:05:47,000 --> 00:05:48,960
stato qui dove copiamo il vecchio

71
00:05:49,010 --> 00:05:53,650
stato, di nuovo non abbiamo davvero nessun altro stato qui, quindi la copia è ridondante se

72
00:05:53,750 --> 00:05:55,410
sostituiamo comunque, ma nel caso

73
00:05:55,460 --> 00:06:01,160
in cui tu avessi un'istantanea di stato più complessa qui per questa porzione del tuo negozio Redux, ti consigliamo

74
00:06:01,160 --> 00:06:04,550
di assicurarti di copiare l'altro stato in modo da non perderlo.

75
00:06:04,550 --> 00:06:11,510
Ecco perché lo aggiungo qui e quindi imposto ordini uguali agli ordini di stato e ora chiamo concat su questo array che

76
00:06:11,510 --> 00:06:17,450
è una funzione Javascript integrata che aggiunge un nuovo elemento a un array e restituisce un nuovo array

77
00:06:17,450 --> 00:06:18,530
che include quell'elemento.

78
00:06:18,560 --> 00:06:24,040
Quindi il vecchio array rimane intatto, il nuovo array viene restituito e ciò ovviamente ci consente di aggiornarlo in modo

79
00:06:24,040 --> 00:06:29,450
immutabile in cui non tocchiamo mai i dati originali ma impostiamo il nuovo stato creando un nuovo array che

80
00:06:29,450 --> 00:06:36,590
include il nuovo oggetto e lì concatengo semplicemente il mio nuovo ordine. Con ciò,

81
00:06:36,770 --> 00:06:45,590
possiamo andare all'app. js archivia e importa i riduttori degli ordini lì dalla cartella del negozio,

82
00:06:45,590 --> 00:06:52,040
la cartella dei riduttori e lì, gli ordini. js file ovviamente e uniscilo nel nostro riduttore

83
00:06:52,100 --> 00:06:57,750
di root, magari con un identificatore di ordini e poi indicando il riduttore di ordini.

84
00:06:57,780 --> 00:07:04,160
Ora questo dovrebbe essere disponibile e ora possiamo inviare azioni, vale a dire qui la nostra azione per aggiungere ordini e,

85
00:07:04,230 --> 00:07:11,740
naturalmente, attingere a quella fetta di stati e ottenere i nostri ordini. Le azioni di invio sono la prima cosa

86
00:07:11,740 --> 00:07:18,220
che voglio fare, voglio farlo dall'interno dello schermo del carrello quando premiamo questo pulsante ora.

87
00:07:18,220 --> 00:07:19,990
In questo momento non stiamo facendo nulla

88
00:07:20,020 --> 00:07:26,790
lì, ora l'obiettivo è quello di effettuare un ordine e anche cancellare il nostro carrello. Quindi qui nella schermata del carrello, eseguiamo già

89
00:07:26,800 --> 00:07:33,270
l'importazione e la spedizione e la stiamo eseguendo in modo da disporre della funzione di spedizione.

90
00:07:33,340 --> 00:07:45,490
Tutto ciò che dobbiamo quindi fare è importare tutto come azioni ordine da ordini azioni negozio e quindi nominerò queste azioni azioni

91
00:07:45,520 --> 00:07:50,140
per essere super precise e ora qui quando

92
00:07:50,290 --> 00:07:57,450
facciamo clic su questo pulsante, questo ordine ora pulsante, possiamo eseguire un funzione

93
00:07:57,450 --> 00:08:05,500
e in questa funzione, inviamo un'azione Redux, l'azione ordini, aggiungiamo l'ordine con questo creatore

94
00:08:05,580 --> 00:08:10,500
di azioni. Ora dobbiamo passare due cose: gli articoli del carrello e l'importo totale. Naturalmente entrambi sono disponibili

95
00:08:10,500 --> 00:08:16,680
qui, l'importo totale è memorizzato nella costante di importo totale del carrello, gli articoli del carrello

96
00:08:16,680 --> 00:08:23,580
sono qui, quindi inoltriamo questo, inoltriamo l'importo totale del carrello e quello dovrebbe essere il secondo argomento, quindi

97
00:08:23,580 --> 00:08:32,420
come primo argomento, in realtà gli articoli del carrello, come questo. Ora, tieni presente che, ovviamente, inoltro gli articoli del carrello, sono gli articoli

98
00:08:32,430 --> 00:08:37,620
del carrello di archiviazione che sono nell'array e non nel formato che ho nel mio

99
00:08:37,620 --> 00:08:40,310
carrello Redux store. Lì, ho un

100
00:08:40,380 --> 00:08:48,130
oggetto ma l'archiviazione di un tale array di articoli del carrello in un ordine dovrebbe effettivamente andare

101
00:08:48,130 --> 00:08:52,500
bene, quindi non c'è bisogno di ottenere anche quell'oggetto

102
00:08:52,510 --> 00:08:53,340
invariato,

103
00:08:53,340 --> 00:08:56,690
mi atterrò a quell'array che ora conservo.

104
00:08:56,720 --> 00:08:58,460
Quindi ora spediamo questo, per vederlo, ora

105
00:08:58,460 --> 00:09:00,860
abbiamo bisogno di aggiungere una schermata degli ordini ovviamente e

106
00:09:00,980 --> 00:09:06,140
per questo, voglio anche aggiungere un pulsante di menu e un cassetto che ci consente di arrivarci in alternativa alle schermate

107
00:09:06,140 --> 00:09:07,520
del nostro negozio qui.