1 00:00:02,290 --> 00:00:05,850 Per impostare Redux, seguirò lo stesso approccio che ho fatto in precedenza nel corso, aggiungerò 2 00:00:05,950 --> 00:00:14,470 una cartella del negozio e lì, avrò i miei luoghi-azione. file js e il mio riduttore di posti. file js. 3 00:00:14,470 --> 00:00:16,310 Ovviamente è un 4 00:00:16,330 --> 00:00:19,310 po 'diverso da prima, lì ho avuto una 5 00:00:19,390 --> 00:00:21,520 sottocartella di azioni e riduttori, qui 6 00:00:21,520 --> 00:00:25,950 puoi assolutamente fare lo stesso, dato che ho solo un'azione e un 7 00:00:25,960 --> 00:00:27,820 riduttore, lo terrò in due 8 00:00:27,820 --> 00:00:34,840 file ma potresti sottocartelle e così via, dipende da te. Ora nel riduttore di luoghi, definirò come dovrebbe essere il mio stato 9 00:00:34,840 --> 00:00:37,990 per questa parte del mio stato totale e sarà molto 10 00:00:37,990 --> 00:00:43,510 semplice, il mio stato iniziale qui è solo un oggetto Javascript in cui voglio avere una chiave di luoghi che 11 00:00:43,510 --> 00:00:47,810 è vuota , una matrice vuota all'inizio perché avrò una serie di posti e basta. 12 00:00:47,830 --> 00:00:53,830 Quindi quindi qui, posso esportare questa funzione di riduzione che assume uno stato impostato sullo stato iniziale se 13 00:00:53,830 --> 00:00:54,190 non 14 00:00:54,190 --> 00:01:01,450 viene passato nessun altro stato e un'azione e lì dentro per ora, restituirò semplicemente quello stato, presto ovviamente ' Aggiungerò la logica per 15 00:01:01,450 --> 00:01:08,320 gestire diverse azioni e, ad esempio, aggiungere un nuovo posto. Nel file delle azioni di luoghi, esporterò una nuova 16 00:01:08,320 --> 00:01:16,890 costante, aggiungi un posto, che è un identificatore di azione di cui avrò bisogno e aggiungerò una funzione di creazione di azioni, aggiungi 17 00:01:16,890 --> 00:01:23,640 un posto, che dovrebbe prendere alcuni dati sul luogo e per il momento, questo è solo il titolo, 18 00:01:23,640 --> 00:01:26,290 in seguito sarà più e qui voglio 19 00:01:26,290 --> 00:01:28,420 restituire il mio oggetto azione 20 00:01:28,420 --> 00:01:35,560 quindi dove il tipo è aggiungere posto e dove poi ho solo i miei dati sul posto diciamo che 21 00:01:35,560 --> 00:01:41,200 al momento ovviamente è composto solo da il titolo, ma più tardi, sarà di più. 22 00:01:41,260 --> 00:01:43,630 Questa è l'app Redux di base, ora ovviamente nell'app. abbiamo 23 00:01:43,660 --> 00:01:50,670 bisogno di collegare tutto. Quindi, lì come l'hai imparato in questo 24 00:01:51,280 --> 00:02:02,010 corso, possiamo importare qualcosa da Redux e anche qualcosa da React Redux e anche importare Redux Thunk da Redux Thunk, quindi da questo pacchetto 25 00:02:02,040 --> 00:02:05,160 abbiamo anche installato. Ora da Redux, abbiamo 26 00:02:05,160 --> 00:02:12,270 bisogno di creare store e combinare riduttori e anche applicare middleware per applicare Redux Thunk e da React Redux, abbiamo 27 00:02:12,270 --> 00:02:15,210 bisogno di quel componente del fornitore e con 28 00:02:15,690 --> 00:02:21,240 quello, così come l'abbiamo fatto più volte nel corso, possiamo creare il nostro riduttore di root 29 00:02:21,240 --> 00:02:23,120 con l'aiuto di riduttori combinati. 30 00:02:23,130 --> 00:02:26,370 Questo porta un oggetto in cui uniamo tutti i 31 00:02:26,370 --> 00:02:33,090 riduttori, ora ovviamente abbiamo solo un riduttore qui e questo è il riduttore di luoghi che importiamo dalla cartella 32 00:02:33,090 --> 00:02:37,140 del negozio e lì, è il file del riduttore di luoghi 33 00:02:37,140 --> 00:02:43,680 ma ovviamente potresti avere più riduttori nella tua app e lo mapperò sui luoghi, quindi il riduttore dei 34 00:02:43,710 --> 00:02:46,690 luoghi viene mappato sull'identificatore dei luoghi qui. 35 00:02:46,890 --> 00:02:53,460 Ora, con ciò, possiamo creare il nostro negozio con la funzione di creazione del negozio e questa funzione prende il riduttore di 36 00:02:53,490 --> 00:03:00,300 radice e possiamo anche passare un secondo argomento in cui chiamiamo Apply Middleware e passiamo Redux Thunk a quella funzione in modo che 37 00:03:00,330 --> 00:03:07,800 il pacchetto Redux Thunk sia gentile collegato al nostro flusso Redux qui. Con tutto ciò impostato, possiamo avvolgere il nostro 38 00:03:07,800 --> 00:03:15,810 navigatore dei luoghi con il componente provider poiché ogni schermata della nostra app, nel nostro navigatore, dovrebbe avere accesso al 39 00:03:15,810 --> 00:03:21,750 negozio e al fornitore, passiamo il negozio attraverso il prop del negozio e questo è 40 00:03:21,750 --> 00:03:30,160 il Redux installazione abbiamo anche visto più volte durante questo corso. Con Redux impostato, possiamo andare alla schermata del nuovo posto e 41 00:03:30,160 --> 00:03:35,380 assicurarci che qui nel gestore del luogo di salvataggio che viene attivato quando si fa 42 00:03:35,380 --> 00:03:41,530 clic su questo pulsante, in realtà aggiungiamo un nuovo posto che per il momento consiste solo del 43 00:03:41,530 --> 00:03:49,450 suo titolo ma di ovviamente, questo cambierà durante questo corso. Per fare ciò, possiamo importare l'uso di invio da React 44 00:03:50,730 --> 00:03:57,300 Redux e ottenere semplicemente l'accesso alla funzione di invio eseguendo l'uso di invio lassù e ovviamente anche 45 00:03:57,390 --> 00:04:03,930 importare la nostra azione, ad esempio di nuovo con questa importazione che unisce la sintassi qui, importando 46 00:04:04,380 --> 00:04:14,370 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 47 00:04:14,370 --> 00:04:21,960 l'invio qui e inviare le azioni dei luoghi aggiungere luogo e inoltrare il titolo che è ovviamente memorizzato nel nostro 48 00:04:21,960 --> 00:04:29,500 valore del titolo, quindi in questo qui . Ora con ciò, saremo in grado di inviare questa 49 00:04:29,650 --> 00:04:32,170 azione, nel riduttore di luoghi, ora 50 00:04:32,170 --> 00:04:44,400 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 51 00:04:44,400 --> 00:04:50,400 predefinito dal modo in cui abbiamo appena restituito lo stato e quindi possiamo sbarazzarci di 52 00:04:50,400 --> 00:04:56,160 questa dichiarazione di ritorno laggiù e ora se aggiungi posto è quello che abbiamo 53 00:04:56,220 --> 00:04:57,240 ottenuto, allora 54 00:04:57,930 --> 00:05:04,260 possiamo creare un nuovo posto qui e per quello, anche così prima in questo corso, aggiungerò 55 00:05:04,260 --> 00:05:10,290 una cartella dei modelli con un posto. js file lì dove voglio definire come dovrebbe 56 00:05:10,290 --> 00:05:15,900 apparire un luogo in questa applicazione, semplicemente per avere un modo semplice di creare nuovi oggetti 57 00:05:15,900 --> 00:05:17,190 luogo sempre uguali. 58 00:05:17,190 --> 00:05:24,510 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ò 59 00:05:24,510 --> 00:05:30,180 il mio con l'aiuto del costruttore di avere un ID e un titolo e in seguito ne aggiungeremo altri, 60 00:05:30,570 --> 00:05:31,460 ma per 61 00:05:31,530 --> 00:05:32,670 ora è tutto e 62 00:05:32,670 --> 00:05:34,020 io memorizzerò il mio 63 00:05:34,230 --> 00:05:41,280 ID qui e io memorizzerò il mio titolo qui in una proprietà. Con ciò abbiamo un progetto per nuovi 64 00:05:41,280 --> 00:05:45,390 posti, tornando al riduttore di posti, ora possiamo 65 00:05:45,630 --> 00:05:46,440 usarlo. 66 00:05:46,440 --> 00:05:55,170 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 67 00:05:55,170 --> 00:05:58,080 nuovo posto, quindi inizializzando o creando un'istanza di 68 00:05:58,080 --> 00:06:04,560 un nuovo posto basato sulla nostra classe e per l'ID, per il momento userò un ID fittizio del 69 00:06:04,560 --> 00:06:12,050 timestamp della data corrente e il Il titolo tuttavia è ovviamente qualcosa che possiamo impostare perché fa parte della nostra azione, 70 00:06:12,060 --> 00:06:17,130 lì nei dati del posto avremo una proprietà del titolo che contiene il titolo 71 00:06:17,130 --> 00:06:18,720 impostato dall'utente, quindi 72 00:06:18,720 --> 00:06:24,630 qui posso impostarlo su azione. placeData. titolo. 73 00:06:24,630 --> 00:06:26,530 Questo crea un nuovo oggetto luogo 74 00:06:26,670 --> 00:06:33,600 e ora possiamo restituire qui un nuovo stato in cui luoghi e non ho bisogno di copiare il vecchio stato perché qui non ho 75 00:06:33,600 --> 00:06:39,480 nient'altro nel mio stato e non aggiungerò nulla, quindi posso solo restituire un oggetto stato nuovo di zecca, dove i 76 00:06:39,900 --> 00:06:44,020 luoghi sono ora stato. posti. concat, in modo che prende 77 00:06:44,040 --> 00:06:49,710 il vecchio array, aggiunge un nuovo oggetto e restituisce un nuovo array che sostituisce il vecchio array 78 00:06:49,710 --> 00:06:51,050 qui nel nostro 79 00:06:51,300 --> 00:06:59,310 stato e concordo naturalmente il mio nuovo posto. Con ciò, dovremmo avere un elenco di luoghi che gestiamo. Nella prossima lezione, ora possiamo preoccuparci 80 00:06:59,310 --> 00:07:00,220 di 81 00:07:00,240 --> 00:07:06,390 emetterlo qui nella schermata dell'elenco dei luoghi. Un'altra cosa, quando aggiungiamo un nuovo posto qui 82 00:07:06,390 --> 00:07:09,310 facendo clic sul gestore di salvataggio dei luoghi, 83 00:07:09,390 --> 00:07:12,560 voglio anche tornare alla schermata dell'elenco dei luoghi, 84 00:07:12,570 --> 00:07:20,610 quindi qui dopo aver inviato questa azione, userò effettivamente la navigazione degli oggetti di scena per tornare indietro, quindi per tornare 85 00:07:20,610 --> 00:07:25,530 alla schermata dell'elenco dei luoghi. E ora lavoriamo su quella schermata dell'elenco dei luoghi e assicuriamoci di produrre 86 00:07:25,530 --> 00:07:26,760 effettivamente un elenco di luoghi lì.