L'obiettivo della schermata di panoramica del prodotto è ovviamente quello di presentare un elenco di tutti i prodotti che possiamo
ordinare e quindi qui avremo ovviamente un normale componente React,
quindi dobbiamo importare React da React.
Dovremo anche importare un sacco di cose da React Native di sicuro, per esempio
avrò bisogno di un elenco semplice qui perché pubblicherò un elenco di prodotti, non sappiamo quanto sarà lungo
l'elenco ma potenzialmente lo è molto lungo, quindi vogliamo essere in grado di ottimizzarlo per lo
scorrimento e questo è
ciò che la lista semplice fa immediatamente e possiamo importare più componenti di cui abbiamo bisogno.
Quindi queste sono le
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
quindi dovremo restituire un po 'di jsx qui alla fine e alla fine, lo farò esporta anche la schermata di panoramica
dei miei prodotti qui come impostazione predefinita di questo file. Ora, con quello, la domanda ovviamente
è cosa c'è dentro? Cosa c'è dentro il nostro componente e lì, ovviamente
voglio rendere il mio elenco piatto,
voglio rendere il mio elenco piatto di prodotti.
Ora ovviamente non abbiamo ancora prodotti ma possiamo aggiungerne alcuni. Proprio come prima, aggiungerò quindi una cartella dei
modelli in cui posso definire l'aspetto di un prodotto.
Questo non è un must, ma può aiutarti a organizzare i tuoi dati e assicurarti di non lavorare
mai accidentalmente con diversi tipi di prodotti, dove hai semplicemente dimenticato di aggiungere una determinata proprietà in un punto
della tua app.
Quindi quindi qui nei prodotti. file js nella cartella dei modelli, creerò una
classe di prodotto che ha un costruttore in cui definisco come dovrebbe essere un prodotto e voglio che ogni prodotto
abbia un ID univoco, dovrebbe anche avere un ID proprietario che è l'ID di l'utente che lo ha creato.
Dovrebbe avere un titolo, dovrebbe
avere un imageUrl, dovrebbe avere una descrizione e dovrebbe avere un prezzo, queste
sono le cose che compongono un prodotto per me in questa applicazione.
Ora, naturalmente, quando riceviamo tutte queste cose come argomenti nel costruttore, voglio memorizzarle
nelle proprietà di questo oggetto che possiamo creare con l'aiuto di questo
costruttore, quindi quindi faccio questo compito che
hai visto anche prima dove memorizzo tutti quei dati che riceviamo nelle proprietà dell'oggetto creato.
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
useremo quindi in Redux e alla fine otterremo un tale elenco di prodotti qui
nella schermata di panoramica dei nostri prodotti. Ora per arrivarci, dobbiamo attingere a
Redux e affinché ciò sia possibile, dobbiamo impostare Redux.
Andiamo ora nella cartella del negozio e lì dentro, voglio avere una sottocartella di azioni e una
sottocartella di riduttori, in questa app in modo che avremo diversi riduttori
e azioni, a differenza dell'ultimo modulo qui.
Quindi, per il momento, inizieremo con i prodotti. file js qui nella
cartella dei riduttori e aggiungerò anche un prodotto. file js nella cartella delle azioni.
Ancora una volta, se ti confonde che abbiamo lo stesso nome qui in cartelle diverse, puoi sempre vedere
in quale file sono qui in alto qui con questa funzione breadcrumb e, naturalmente,
potresti anche lavorare con nomi diversi nella tua app se questo
è confuso, penso che sia abbastanza chiaro anche se in quale file sto lavorando, è chiaramente selezionato anche qui.
Quindi partiamo dal riduttore di prodotti e qui voglio definire il mio stato iniziale
perché questo tipo di definisce il numero di segmenti di
stato relativi ai prodotti e naturalmente, come sempre nella programmazione c'è
più di un possibile approccio, penso ha senso dire che abbiamo un elenco di prodotti disponibili, ovvero un array e
di prodotti utente e prodotti utente,
questi sono semplicemente i prodotti
che abbiamo creato, quindi dove l'ID proprietario è l'ID dell'utente attualmente connesso e per il
momento, non avremo funzionalità di accesso, ma in seguito sarà così,
per il momento lo imposterai in modo fittizio. Il prodotto disponibile dovrebbe essere tutti i prodotti o forse anche solo i
prodotti che non abbiamo creato in modo da non poter acquistare i nostri prodotti, sebbene in realtà nella maggior parte dei negozi,
puoi anche acquistare ciò che vendi, quindi penso che possiamo
anche prendi tutti i prodotti qui, ma è qualcosa che puoi anche mettere a punto nella tua applicazione.
Quindi abbiamo questi due array di prodotti. Ora nel riduttore qui che è una funzione in cui otteniamo lo stato che dovrebbe
essere inizializzato con il nostro stato
iniziale e dovrebbe prendere questo come valore predefinito e dove otteniamo un'azione, in seguito gestiremo diversi tipi di azioni in
modo da poter ad esempio aggiungere un nuovo prodotto e così via. Per il momento restituirò sempre il mio stato
qui e quindi restituirò
sempre il mio stato iniziale e ciò ci consentirà di accedere a
Redux e almeno ottenere quello stato iniziale.
Ora, ovviamente, senza la possibilità di aggiungere nuovi prodotti, il nostro stato iniziale non è poi così utile perché
ha elenchi vuoti di prodotti qui, quindi
niente che potremmo rendere.
Quindi, proprio come ho
fatto prima, aggiungerò anche una cartella di dati e creerò qui alcuni dati fittizi che non useremo in tutto l'intero
modulo ma che possiamo usare per ora in modo da avere alcuni prodotti per iniziare
con e per questo, trovate allegato questi dati fittizi. file js che puoi semplicemente prendere per sostituire il tuo o dove puoi
semplicemente copiare il contenuto nei tuoi dati fittizi. Il file js e quello
che faccio lì dentro sono importare il mio modello di
prodotto, quindi ovviamente dovresti assicurarti che questo percorso sia corretto per te se
hai appena copiato il mio codice e quindi ho impostato questo array di prodotti qui dove ho un mazzo di
prodotti fittizi e ora è importante ottenere l'ID del prodotto, quindi l'ID del proprietario, quindi il titolo e dovresti
assicurarti che il tuo modello di prodotto sia impostato in modo che l'ordine sia corretto.
Quindi qui otteniamo il titolo, quindi abbiamo imageUrl come quarto argomento che ricevi, quindi hai la descrizione come quinta
e il prezzo come ultimo argomento, quindi assicurati che
il tuo modello di prodotto sia impostato nel modo in cui questo è l'ordine degli argomenti.
Questo è quello che
hai qui, alla fine esporto questo array
come predefinito e quindi ora in questo riduttore di prodotti, possiamo semplicemente importarlo.
Quindi lì possiamo importare prodotti, il nostro elenco di prodotti fittizi dalla cartella dei dati e
lì dai dati fittizi. js file e possiamo semplicemente inizializzare i
nostri prodotti disponibili con i prodotti qui per il momento e anche i prodotti dell'utente possono essere inizializzati con quello,
anche se per i prodotti dell'utente c'è una piccola differenza che voglio fare, voglio filtrarli per un certo ID proprietario perché
alla fine non tutti i prodotti verranno creati da noi. Invece qui, filtrerò quell'array fittizio, esaminerò tutti i
prodotti che includono solo prodotti nell'array dei miei prodotti utente in cui l'ID proprietario è uguale a
U1 che se si danno un'occhiata ai dati fittizi è semplicemente il caso di alcuni prodotti, non per tutti
loro.
Alcuni hanno l'ID proprietario U1 e questi saranno i prodotti che utilizzo qui come
prodotti utente, come configurazione fittizia. con ciò il nostro riduttore per i prodotti è installato qui. possiamo ignorare le azioni dei prodotti per il
momento, ovviamente ne aggiungeremo altre in seguito e ora possiamo andare all'app. file js e impostare Redux
anche lì.
Per questo, dobbiamo importare qualcosa da Redux
e, naturalmente, dobbiamo anche importare qualcosa da React Redux.
Ora questo qualcosa che dobbiamo importare da Redux qui e che è
ovviamente la funzione di creazione negozio e le funzioni di riduzione combinate, in modo da
poter creare un riduttore di radice. Al momento ovviamente abbiamo un solo riduttore
ma, come ho già detto in questa app, alla fine avremo
più riduttori, quindi qui è assolutamente necessario combinare i riduttori e da React Redux, abbiamo bisogno del componente
del fornitore che avvolgiamo intorno alla nostra app per fornire qualcosa. Ovviamente dovremo anche importare il riduttore di prodotti
o comunque si desideri nominarlo dalla cartella del negozio, lì dai riduttori e lì dal file dei prodotti
in modo da poter successivamente creare il nostro riduttore di radice chiamando riduttori combinati,
dove poi passare un oggetto in cui mappiamo diciamo ai prodotti, ma dipende da te, il nostro riduttore di prodotti
e successivamente aggiungeremo altri riduttori e quindi possiamo creare il nostro negozio con creare un negozio
e questo alla fine prende il nostro riduttore di radice come un argomento e successivamente laggiù nel codice jsx,
creerò il mio componente provider tra i tag di apertura e chiusura, poi avrò anche il mio
schermo, per il momento, non avremo nulla lì, questo non è valido jsx a proposito,
ma lo ripareremo in seguito e per il componente provider, ovviamente
dobbiamo impostare il prop del negozio e impostarlo sulla costante del negozio o sul
negozio in generale che stiamo creando qui. Con ciò, Redux dovrebbe essere configurato, con quello in seguito potremo accedervi
qui dalla schermata di panoramica dei prodotti e, ovviamente, il passo successivo è anche aggiungere la navigazione in modo da poter
vedere quella schermata di panoramica del prodotto. Quindi continuiamo a lavorare su questi passaggi
dopo.