Come iniziare con il redux?
Crea una cartella separata nella posizione desiderata e apri la finestra del terminale.
Dopo aver eseguito correttamente il comando sopra menzionato, vedrai diverse cartelle sulla barra laterale della nostra schermata Visual Studio.
Qui puoi vedere una cartella chiamata src; Elimina tutti i file presenti all'interno di questa cartella SRC. Inoltre, si prega di fare un nuovo file e nome indicizza l'estensione di js del tutto indice.js. Dopo aver creato questo nuovo file, aprire il terminale e scrivere il comando seguente.
Come puoi vedere nello snippet sopra, il Gestore dei pacchetti di nodi (NPM) installerà Redux Toolkit nel nostro progetto di applicazione React utilizzando il comando di installazione.
Ora abbiamo creato la nostra applicazione React e siamo anche fatti con l'installazione del redux Toolkit. È tempo di impostare i nostri componenti Redux in questo progetto di applicazione React.
Quindi, prima di tutto, impostiamo il negozio del nostro Redux. Quindi, per farlo, dovremo importare il
configurestore funzione da redux.
Di solito, usiamo il Creativo funzione integrata per creare il negozio, ma configurestore è un modo migliorato per creare il negozio, quindi creeremo il nostro negozio usando il configurestore funzione. La sintassi è
import configurestore da 'redux';
Ora imposteremo il secondo componente di Redux I-E, riduttore. Come sappiamo, prende lo stato attuale ed esegue un'azione o un evento su di esso, quindi ora definiremo la funzione del riduttore.
Negozio La funzione deve essere aggiornata ogni volta che il riduttore agisce su uno stato. Su ogni azione eseguono il riduttore, sappiamo che lo stato attuale cambierà in uno stato aggiornato. Per aggiornare i valori dello stato del negozio, dobbiamo utilizzare la funzione di iscrizione del negozio.
Lo snippet di codice sopra indica come possiamo impostare il nostro negozio e il riduttore per Redux insieme alla descrizione. Se si esegue il codice sopra utilizzando il comando NPM Avvia, vedrai il messaggio Reduttore visualizzato nella schermata della console.
Ora, come abbiamo eseguito il nostro negozio e il nostro riduttore, controlliamo se il negozio viene aggiornato ogni volta che il riduttore esegue un evento o un'azione nel suo stato attuale. Quindi, per questo, dobbiamo spedire un'azione.
Ogni azione può o meno avere un tipo diverso, ma l'azione deve avere un tipo. È proprio come se vogliamo eseguire qualcosa con uno scopo significativo. Il tipo di azione può essere increment_number, decrement_number, add_user, delete_records, ecc.
Abbiamo aggiornato il nostro codice con l'invio delle nostre azioni dal negozio al riduttore. Il riduttore eseguirà queste azioni sullo stato attuale e restituirà lo stato aggiornato. Successivamente, la funzione di iscrizione aiuterà l'archivio ad aggiornare i valori di stato nel negozio per un uso futuro.
Nel frammento di cui sopra puoi vedere che il riduttore ha eseguito l'azione del numero di incremento su Stato = 0 e ha restituito lo stato = 1, il negozio ha aggiornato questa risposta del riduttore. In caso di invio dell'altra azione con un incremento di numero, il riduttore è aumentato di nuovo nello stato e lo ha reso stato = 2. Se eseguita dal riduttore nei risultati, l'ultima azione spedita del numero decrescente aggiorna lo stato dallo stato = 2 allo stato = 1.
Conclusione
In questo articolo, crea una semplice applicazione React per iniziare con Redux. Il codice Visual Studio viene utilizzato per creare l'applicazione. Questo articolo dimostra un semplice codice che esercita Redux. Il Gestione pacchetti nodi (NPM) installa Redux Toolkit nel nostro progetto di applicazione React utilizzando il comando di installazione. Quindi, puoi praticarlo e fare altri esperimenti per il tuo apprendimento.