Per impostare Redux, seguirò lo stesso approccio che ho fatto in precedenza nel corso, aggiungerò
una cartella del negozio e lì, avrò i miei luoghi-azione. file js e il mio riduttore di posti. file js.
Ovviamente è un
po 'diverso da prima, lì ho avuto una
sottocartella di azioni e riduttori, qui
puoi assolutamente fare lo stesso, dato che ho solo un'azione e un
riduttore, lo terrò in due
file ma potresti sottocartelle e così via, dipende da te. Ora nel riduttore di luoghi, definirò come dovrebbe essere il mio stato
per questa parte del mio stato totale e sarà molto
semplice, il mio stato iniziale qui è solo un oggetto Javascript in cui voglio avere una chiave di luoghi che
è vuota , una matrice vuota all'inizio perché avrò una serie di posti e basta.
Quindi quindi qui, posso esportare questa funzione di riduzione che assume uno stato impostato sullo stato iniziale se
non
viene passato nessun altro stato e un'azione e lì dentro per ora, restituirò semplicemente quello stato, presto ovviamente ' Aggiungerò la logica per
gestire diverse azioni e, ad esempio, aggiungere un nuovo posto. Nel file delle azioni di luoghi, esporterò una nuova
costante, aggiungi un posto, che è un identificatore di azione di cui avrò bisogno e aggiungerò una funzione di creazione di azioni, aggiungi
un posto, che dovrebbe prendere alcuni dati sul luogo e per il momento, questo è solo il titolo,
in seguito sarà più e qui voglio
restituire il mio oggetto azione
quindi dove il tipo è aggiungere posto e dove poi ho solo i miei dati sul posto diciamo che
al momento ovviamente è composto solo da il titolo, ma più tardi, sarà di più.
Questa è l'app Redux di base, ora ovviamente nell'app. abbiamo
bisogno di collegare tutto. Quindi, lì come l'hai imparato in questo
corso, possiamo importare qualcosa da Redux e anche qualcosa da React Redux e anche importare Redux Thunk da Redux Thunk, quindi da questo pacchetto
abbiamo anche installato. Ora da Redux, abbiamo
bisogno di creare store e combinare riduttori e anche applicare middleware per applicare Redux Thunk e da React Redux, abbiamo
bisogno di quel componente del fornitore e con
quello, così come l'abbiamo fatto più volte nel corso, possiamo creare il nostro riduttore di root
con l'aiuto di riduttori combinati.
Questo porta un oggetto in cui uniamo tutti i
riduttori, ora ovviamente abbiamo solo un riduttore qui e questo è il riduttore di luoghi che importiamo dalla cartella
del negozio e lì, è il file del riduttore di luoghi
ma ovviamente potresti avere più riduttori nella tua app e lo mapperò sui luoghi, quindi il riduttore dei
luoghi viene mappato sull'identificatore dei luoghi qui.
Ora, con ciò, possiamo creare il nostro negozio con la funzione di creazione del negozio e questa funzione prende il riduttore di
radice e possiamo anche passare un secondo argomento in cui chiamiamo Apply Middleware e passiamo Redux Thunk a quella funzione in modo che
il pacchetto Redux Thunk sia gentile collegato al nostro flusso Redux qui. Con tutto ciò impostato, possiamo avvolgere il nostro
navigatore dei luoghi con il componente provider poiché ogni schermata della nostra app, nel nostro navigatore, dovrebbe avere accesso al
negozio e al fornitore, passiamo il negozio attraverso il prop del negozio e questo è
il Redux installazione abbiamo anche visto più volte durante questo corso. Con Redux impostato, possiamo andare alla schermata del nuovo posto e
assicurarci che qui nel gestore del luogo di salvataggio che viene attivato quando si fa
clic su questo pulsante, in realtà aggiungiamo un nuovo posto che per il momento consiste solo del
suo titolo ma di ovviamente, questo cambierà durante questo corso. Per fare ciò, possiamo importare l'uso di invio da React
Redux e ottenere semplicemente l'accesso alla funzione di invio eseguendo l'uso di invio lassù e ovviamente anche
importare la nostra azione, ad esempio di nuovo con questa importazione che unisce la sintassi qui, importando
tutto come luoghi azioni dal negozio e lì, il file delle azioni dei luoghi e con ciò, possiamo andare a salvare il gestore dei luoghi, chiamare
l'invio qui e inviare le azioni dei luoghi aggiungere luogo e inoltrare il titolo che è ovviamente memorizzato nel nostro
valore del titolo, quindi in questo qui . Ora con ciò, saremo in grado di inviare questa
azione, nel riduttore di luoghi, ora
possiamo cambiare il nostro tipo di azione o utilizzare se i controlli ovviamente e cercare lo stato del luogo o l'azione che importiamo dalle azioni dei luoghi, inoltre aggiungere il caso
predefinito dal modo in cui abbiamo appena restituito lo stato e quindi possiamo sbarazzarci di
questa dichiarazione di ritorno laggiù e ora se aggiungi posto è quello che abbiamo
ottenuto, allora
possiamo creare un nuovo posto qui e per quello, anche così prima in questo corso, aggiungerò
una cartella dei modelli con un posto. js file lì dove voglio definire come dovrebbe
apparire un luogo in questa applicazione, semplicemente per avere un modo semplice di creare nuovi oggetti
luogo sempre uguali.
Quindi qui, creerò una classe ed esporterò questo come file predefinito e ora ovviamente dipende da te come vuoi che il tuo posto assomigli, definirò
il mio con l'aiuto del costruttore di avere un ID e un titolo e in seguito ne aggiungeremo altri,
ma per
ora è tutto e
io memorizzerò il mio
ID qui e io memorizzerò il mio titolo qui in una proprietà. Con ciò abbiamo un progetto per nuovi
posti, tornando al riduttore di posti, ora possiamo
usarlo.
Quindi lì possiamo importare il luogo dalla cartella dei modelli e lì, il luogo. js file e quindi qui, crea un nuovo posto chiamando un
nuovo posto, quindi inizializzando o creando un'istanza di
un nuovo posto basato sulla nostra classe e per l'ID, per il momento userò un ID fittizio del
timestamp della data corrente e il Il titolo tuttavia è ovviamente qualcosa che possiamo impostare perché fa parte della nostra azione,
lì nei dati del posto avremo una proprietà del titolo che contiene il titolo
impostato dall'utente, quindi
qui posso impostarlo su azione. placeData. titolo.
Questo crea un nuovo oggetto luogo
e ora possiamo restituire qui un nuovo stato in cui luoghi e non ho bisogno di copiare il vecchio stato perché qui non ho
nient'altro nel mio stato e non aggiungerò nulla, quindi posso solo restituire un oggetto stato nuovo di zecca, dove i
luoghi sono ora stato. posti. concat, in modo che prende
il vecchio array, aggiunge un nuovo oggetto e restituisce un nuovo array che sostituisce il vecchio array
qui nel nostro
stato e concordo naturalmente il mio nuovo posto. Con ciò, dovremmo avere un elenco di luoghi che gestiamo. Nella prossima lezione, ora possiamo preoccuparci
di
emetterlo qui nella schermata dell'elenco dei luoghi. Un'altra cosa, quando aggiungiamo un nuovo posto qui
facendo clic sul gestore di salvataggio dei luoghi,
voglio anche tornare alla schermata dell'elenco dei luoghi,
quindi qui dopo aver inviato questa azione, userò effettivamente la navigazione degli oggetti di scena per tornare indietro, quindi per tornare
alla schermata dell'elenco dei luoghi. E ora lavoriamo su quella schermata dell'elenco dei luoghi e assicuriamoci di produrre
effettivamente un elenco di luoghi lì.