1
00:00:02,210 --> 00:00:08,690
L'obiettivo della schermata di panoramica del prodotto è ovviamente quello di presentare un elenco di tutti i prodotti che possiamo

2
00:00:09,830 --> 00:00:13,250
ordinare e quindi qui avremo ovviamente un normale componente React,

3
00:00:13,250 --> 00:00:15,490
quindi dobbiamo importare React da React.

4
00:00:15,620 --> 00:00:20,440
Dovremo anche importare un sacco di cose da React Native di sicuro, per esempio

5
00:00:20,450 --> 00:00:26,330
avrò bisogno di un elenco semplice qui perché pubblicherò un elenco di prodotti, non sappiamo quanto sarà lungo

6
00:00:26,330 --> 00:00:31,910
l'elenco ma potenzialmente lo è molto lungo, quindi vogliamo essere in grado di ottimizzarlo per lo

7
00:00:31,910 --> 00:00:33,440
scorrimento e questo è

8
00:00:33,440 --> 00:00:39,050
ciò che la lista semplice fa immediatamente e possiamo importare più componenti di cui abbiamo bisogno.

9
00:00:40,460 --> 00:00:42,020
Quindi queste sono le

10
00:00:42,020 --> 00:00:51,980
due importazioni di base, ora con cui creerò i componenti della schermata di panoramica dei miei prodotti qui semplicemente in questo modulo di funzione qui dove riceviamo oggetti di scena e

11
00:00:52,070 --> 00:00:58,820
quindi dovremo restituire un po 'di jsx qui alla fine e alla fine, lo farò esporta anche la schermata di panoramica

12
00:00:58,820 --> 00:01:05,360
dei miei prodotti qui come impostazione predefinita di questo file. Ora, con quello, la domanda ovviamente

13
00:01:05,370 --> 00:01:11,830
è cosa c'è dentro? Cosa c'è dentro il nostro componente e lì, ovviamente

14
00:01:11,910 --> 00:01:14,660
voglio rendere il mio elenco piatto,

15
00:01:14,670 --> 00:01:17,610
voglio rendere il mio elenco piatto di prodotti.

16
00:01:17,610 --> 00:01:23,340
Ora ovviamente non abbiamo ancora prodotti ma possiamo aggiungerne alcuni. Proprio come prima, aggiungerò quindi una cartella dei

17
00:01:23,340 --> 00:01:26,380
modelli in cui posso definire l'aspetto di un prodotto.

18
00:01:26,400 --> 00:01:32,130
Questo non è un must, ma può aiutarti a organizzare i tuoi dati e assicurarti di non lavorare

19
00:01:32,130 --> 00:01:37,980
mai accidentalmente con diversi tipi di prodotti, dove hai semplicemente dimenticato di aggiungere una determinata proprietà in un punto

20
00:01:37,980 --> 00:01:39,120
della tua app.

21
00:01:39,180 --> 00:01:44,640
Quindi quindi qui nei prodotti. file js nella cartella dei modelli, creerò una

22
00:01:44,640 --> 00:01:51,030
classe di prodotto che ha un costruttore in cui definisco come dovrebbe essere un prodotto e voglio che ogni prodotto

23
00:01:51,030 --> 00:01:57,200
abbia un ID univoco, dovrebbe anche avere un ID proprietario che è l'ID di l'utente che lo ha creato.

24
00:01:57,540 --> 00:01:59,550
Dovrebbe avere un titolo, dovrebbe

25
00:01:59,630 --> 00:02:04,320
avere un imageUrl, dovrebbe avere una descrizione e dovrebbe avere un prezzo, queste

26
00:02:04,320 --> 00:02:08,850
sono le cose che compongono un prodotto per me in questa applicazione.

27
00:02:09,030 --> 00:02:13,890
Ora, naturalmente, quando riceviamo tutte queste cose come argomenti nel costruttore, voglio memorizzarle

28
00:02:13,890 --> 00:02:18,570
nelle proprietà di questo oggetto che possiamo creare con l'aiuto di questo

29
00:02:18,570 --> 00:02:21,960
costruttore, quindi quindi faccio questo compito che

30
00:02:21,960 --> 00:02:27,570
hai visto anche prima dove memorizzo tutti quei dati che riceviamo nelle proprietà dell'oggetto creato.

31
00:02:27,570 --> 00:02:37,660
Quindi qui memorizziamo il titolo, l'immagineUrl, gli ID e, naturalmente, la descrizione e il prezzo. Con questa impostazione qui, abbiamo un progetto per un prodotto e

32
00:02:37,660 --> 00:02:44,350
useremo quindi in Redux e alla fine otterremo un tale elenco di prodotti qui

33
00:02:44,350 --> 00:02:52,280
nella schermata di panoramica dei nostri prodotti. Ora per arrivarci, dobbiamo attingere a

34
00:02:52,280 --> 00:02:56,980
Redux e affinché ciò sia possibile, dobbiamo impostare Redux.

35
00:02:56,990 --> 00:03:03,080
Andiamo ora nella cartella del negozio e lì dentro, voglio avere una sottocartella di azioni e una

36
00:03:03,080 --> 00:03:07,820
sottocartella di riduttori, in questa app in modo che avremo diversi riduttori

37
00:03:07,820 --> 00:03:10,640
e azioni, a differenza dell'ultimo modulo qui.

38
00:03:10,760 --> 00:03:13,760
Quindi, per il momento, inizieremo con i prodotti. file js qui nella

39
00:03:13,830 --> 00:03:19,510
cartella dei riduttori e aggiungerò anche un prodotto. file js nella cartella delle azioni.

40
00:03:19,550 --> 00:03:24,980
Ancora una volta, se ti confonde che abbiamo lo stesso nome qui in cartelle diverse, puoi sempre vedere

41
00:03:24,980 --> 00:03:29,440
in quale file sono qui in alto qui con questa funzione breadcrumb e, naturalmente,

42
00:03:29,660 --> 00:03:33,480
potresti anche lavorare con nomi diversi nella tua app se questo

43
00:03:33,620 --> 00:03:39,380
è confuso, penso che sia abbastanza chiaro anche se in quale file sto lavorando, è chiaramente selezionato anche qui.

44
00:03:39,380 --> 00:03:45,200
Quindi partiamo dal riduttore di prodotti e qui voglio definire il mio stato iniziale

45
00:03:45,200 --> 00:03:49,600
perché questo tipo di definisce il numero di segmenti di

46
00:03:49,880 --> 00:03:54,440
stato relativi ai prodotti e naturalmente, come sempre nella programmazione c'è

47
00:03:54,440 --> 00:04:02,890
più di un possibile approccio, penso ha senso dire che abbiamo un elenco di prodotti disponibili, ovvero un array e

48
00:04:03,190 --> 00:04:06,070
di prodotti utente e prodotti utente,

49
00:04:06,070 --> 00:04:08,630
questi sono semplicemente i prodotti

50
00:04:08,710 --> 00:04:14,800
che abbiamo creato, quindi dove l'ID proprietario è l'ID dell'utente attualmente connesso e per il

51
00:04:14,800 --> 00:04:19,450
momento, non avremo funzionalità di accesso, ma in seguito sarà così,

52
00:04:19,450 --> 00:04:26,380
per il momento lo imposterai in modo fittizio. Il prodotto disponibile dovrebbe essere tutti i prodotti o forse anche solo i

53
00:04:26,380 --> 00:04:31,990
prodotti che non abbiamo creato in modo da non poter acquistare i nostri prodotti, sebbene in realtà nella maggior parte dei negozi,

54
00:04:31,990 --> 00:04:34,990
puoi anche acquistare ciò che vendi, quindi penso che possiamo

55
00:04:34,990 --> 00:04:39,700
anche prendi tutti i prodotti qui, ma è qualcosa che puoi anche mettere a punto nella tua applicazione.

56
00:04:39,700 --> 00:04:47,920
Quindi abbiamo questi due array di prodotti. Ora nel riduttore qui che è una funzione in cui otteniamo lo stato che dovrebbe

57
00:04:47,920 --> 00:04:49,960
essere inizializzato con il nostro stato

58
00:04:49,960 --> 00:04:55,360
iniziale e dovrebbe prendere questo come valore predefinito e dove otteniamo un'azione, in seguito gestiremo diversi tipi di azioni in

59
00:04:55,360 --> 00:05:02,260
modo da poter ad esempio aggiungere un nuovo prodotto e così via. Per il momento restituirò sempre il mio stato

60
00:05:02,260 --> 00:05:04,380
qui e quindi restituirò

61
00:05:04,450 --> 00:05:09,610
sempre il mio stato iniziale e ciò ci consentirà di accedere a

62
00:05:09,610 --> 00:05:12,300
Redux e almeno ottenere quello stato iniziale.

63
00:05:12,340 --> 00:05:19,210
Ora, ovviamente, senza la possibilità di aggiungere nuovi prodotti, il nostro stato iniziale non è poi così utile perché

64
00:05:19,210 --> 00:05:21,550
ha elenchi vuoti di prodotti qui, quindi

65
00:05:21,700 --> 00:05:23,480
niente che potremmo rendere.

66
00:05:23,740 --> 00:05:25,420
Quindi, proprio come ho

67
00:05:25,480 --> 00:05:32,080
fatto prima, aggiungerò anche una cartella di dati e creerò qui alcuni dati fittizi che non useremo in tutto l'intero

68
00:05:32,110 --> 00:05:37,150
modulo ma che possiamo usare per ora in modo da avere alcuni prodotti per iniziare

69
00:05:37,150 --> 00:05:43,390
con e per questo, trovate allegato questi dati fittizi. file js che puoi semplicemente prendere per sostituire il tuo o dove puoi

70
00:05:43,390 --> 00:05:47,230
semplicemente copiare il contenuto nei tuoi dati fittizi. Il file js e quello

71
00:05:47,230 --> 00:05:50,620
che faccio lì dentro sono importare il mio modello di

72
00:05:50,620 --> 00:05:54,700
prodotto, quindi ovviamente dovresti assicurarti che questo percorso sia corretto per te se

73
00:05:54,700 --> 00:06:00,940
hai appena copiato il mio codice e quindi ho impostato questo array di prodotti qui dove ho un mazzo di

74
00:06:00,940 --> 00:06:07,150
prodotti fittizi e ora è importante ottenere l'ID del prodotto, quindi l'ID del proprietario, quindi il titolo e dovresti

75
00:06:07,150 --> 00:06:12,100
assicurarti che il tuo modello di prodotto sia impostato in modo che l'ordine sia corretto.

76
00:06:12,130 --> 00:06:19,630
Quindi qui otteniamo il titolo, quindi abbiamo imageUrl come quarto argomento che ricevi, quindi hai la descrizione come quinta

77
00:06:19,630 --> 00:06:23,590
e il prezzo come ultimo argomento, quindi assicurati che

78
00:06:23,590 --> 00:06:30,250
il tuo modello di prodotto sia impostato nel modo in cui questo è l'ordine degli argomenti.

79
00:06:30,250 --> 00:06:31,690
Questo è quello che

80
00:06:31,930 --> 00:06:34,050
hai qui, alla fine esporto questo array

81
00:06:34,070 --> 00:06:38,160
come predefinito e quindi ora in questo riduttore di prodotti, possiamo semplicemente importarlo.

82
00:06:38,170 --> 00:06:47,080
Quindi lì possiamo importare prodotti, il nostro elenco di prodotti fittizi dalla cartella dei dati e

83
00:06:47,080 --> 00:06:52,750
lì dai dati fittizi. js file e possiamo semplicemente inizializzare i

84
00:06:52,750 --> 00:06:59,410
nostri prodotti disponibili con i prodotti qui per il momento e anche i prodotti dell'utente possono essere inizializzati con quello,

85
00:06:59,440 --> 00:07:06,310
anche se per i prodotti dell'utente c'è una piccola differenza che voglio fare, voglio filtrarli per un certo ID proprietario perché

86
00:07:06,310 --> 00:07:12,820
alla fine non tutti i prodotti verranno creati da noi. Invece qui, filtrerò quell'array fittizio, esaminerò tutti i

87
00:07:12,820 --> 00:07:19,420
prodotti che includono solo prodotti nell'array dei miei prodotti utente in cui l'ID proprietario è uguale a

88
00:07:19,420 --> 00:07:26,500
U1 che se si danno un'occhiata ai dati fittizi è semplicemente il caso di alcuni prodotti, non per tutti

89
00:07:26,500 --> 00:07:26,960
loro.

90
00:07:27,010 --> 00:07:32,650
Alcuni hanno l'ID proprietario U1 e questi saranno i prodotti che utilizzo qui come

91
00:07:32,650 --> 00:07:39,010
prodotti utente, come configurazione fittizia. con ciò il nostro riduttore per i prodotti è installato qui. possiamo ignorare le azioni dei prodotti per il

92
00:07:39,100 --> 00:07:45,070
momento, ovviamente ne aggiungeremo altre in seguito e ora possiamo andare all'app. file js e impostare Redux

93
00:07:45,070 --> 00:07:46,450
anche lì.

94
00:07:46,450 --> 00:07:50,100
Per questo, dobbiamo importare qualcosa da Redux

95
00:07:50,140 --> 00:07:54,720
e, naturalmente, dobbiamo anche importare qualcosa da React Redux.

96
00:07:54,970 --> 00:07:58,870
Ora questo qualcosa che dobbiamo importare da Redux qui e che è

97
00:07:58,870 --> 00:08:04,060
ovviamente la funzione di creazione negozio e le funzioni di riduzione combinate, in modo da

98
00:08:04,060 --> 00:08:08,910
poter creare un riduttore di radice. Al momento ovviamente abbiamo un solo riduttore

99
00:08:08,920 --> 00:08:12,610
ma, come ho già detto in questa app, alla fine avremo

100
00:08:12,610 --> 00:08:18,300
più riduttori, quindi qui è assolutamente necessario combinare i riduttori e da React Redux, abbiamo bisogno del componente

101
00:08:18,310 --> 00:08:25,750
del fornitore che avvolgiamo intorno alla nostra app per fornire qualcosa. Ovviamente dovremo anche importare il riduttore di prodotti

102
00:08:25,750 --> 00:08:33,600
o comunque si desideri nominarlo dalla cartella del negozio, lì dai riduttori e lì dal file dei prodotti

103
00:08:33,660 --> 00:08:39,940
in modo da poter successivamente creare il nostro riduttore di radice chiamando riduttori combinati,

104
00:08:40,000 --> 00:08:48,490
dove poi passare un oggetto in cui mappiamo diciamo ai prodotti, ma dipende da te, il nostro riduttore di prodotti

105
00:08:48,520 --> 00:08:55,330
e successivamente aggiungeremo altri riduttori e quindi possiamo creare il nostro negozio con creare un negozio

106
00:08:55,330 --> 00:09:03,280
e questo alla fine prende il nostro riduttore di radice come un argomento e successivamente laggiù nel codice jsx,

107
00:09:03,970 --> 00:09:11,230
creerò il mio componente provider tra i tag di apertura e chiusura, poi avrò anche il mio

108
00:09:11,230 --> 00:09:17,900
schermo, per il momento, non avremo nulla lì, questo non è valido jsx a proposito,

109
00:09:17,920 --> 00:09:23,080
ma lo ripareremo in seguito e per il componente provider, ovviamente

110
00:09:23,080 --> 00:09:29,200
dobbiamo impostare il prop del negozio e impostarlo sulla costante del negozio o sul

111
00:09:29,200 --> 00:09:36,180
negozio in generale che stiamo creando qui. Con ciò, Redux dovrebbe essere configurato, con quello in seguito potremo accedervi

112
00:09:36,210 --> 00:09:42,120
qui dalla schermata di panoramica dei prodotti e, ovviamente, il passo successivo è anche aggiungere la navigazione in modo da poter

113
00:09:42,120 --> 00:09:46,670
vedere quella schermata di panoramica del prodotto. Quindi continuiamo a lavorare su questi passaggi

114
00:09:46,710 --> 00:09:47,190
dopo.