Hvordan komme i gang med Redux?

For å komme i gang med det grunnleggende om Redux -kodingspraksis, la oss opprette en enkel React -applikasjon med Redux. Vi bruker visuell studiokode for å opprette applikasjonen og for kodingen.

Lag en egen mappe på ønsket sted og åpne terminalvinduet.

Etter å ha utført kommandoen som er nevnt ovenfor, vil du se forskjellige mapper på sidefeltet på Visual Studio -skjermen.

Her kan du se en mappe som heter src; Slett alle filene som er til stede i denne SRC -mappen. I tillegg kan du lage en ny fil og navn den indekserer med utvidelsen av JS sammen indeks.JS. Etter å ha opprettet denne nye filen, åpner du terminalen og skriv følgende kommando.

Som du kan se i ovennevnte utdrag, vil Node Package Manager (NPM) installere Redux Toolkit i React Application Project ved å bruke installasjonskommandoen.

Nå har vi laget React -applikasjonen vår og er også ferdige med å installere Redux Toolkit. Det er på tide å sette våre Redux -komponenter i dette React Application Project.

Så for det første, la oss sette opp butikken til vår Redux. Så for å gjøre det, må vi importere

Configurestore funksjon fra Redux.

Vanligvis bruker vi CreateStore innebygd funksjon for å lage butikken, men Configurestore er en forbedret måte å opprette butikken på, så vi lager butikken vår ved å bruke Configurestore funksjon. Syntaksen er

import Configurestore fra 'Redux';

Nå vil vi sette den nest mest komponenten i Redux I-E, Reducer. Som vi vet, tar den den nåværende tilstanden og utfører en handling eller hendelse på den, så nå vil vi definere funksjonen til reduksjonen.

butikk Funksjonen må oppdateres hver gang reduksjonen virker i en stat. På hver handling reduserer utfører vi at den nåværende tilstanden vil endre seg til en oppdatert tilstand. For å oppdatere butikkens tilstandsverdier, må vi bruke abonnementsfunksjonen til butikken.

Ovennevnte kodebit forteller hvordan vi kan angi butikken vår og redusere for reduxen sammen med beskrivelsen. Hvis du kjører ovennevnte kode ved å bruke kommandoen NPM -start, vil du se reduksjonsmeldingen som vises på konsollskjermen.

Nå, som vi har utført butikken vår og reduserer, la oss sjekke om butikken blir oppdatert hver gang reduksjonen utfører en hendelse eller handling i sin nåværende tilstand. Så for dette må vi sende en handling.

Hver handling har kanskje ikke en annen type, men handlingen må ha en type. Det er akkurat sånn at vi ønsker å utføre noe med et meningsfylt formål. Type handling kan være inkrement_number, decrement_number, add_user, Delete_records, etc.

Vi har oppdatert koden vår med utsendelse av handlingene våre fra butikken til reduksjonen. Reducer vil utføre disse handlingene i gjeldende tilstand og vil returnere den oppdaterte tilstanden. Senere vil abonnementsfunksjonen hjelpe butikken til å oppdatere statusverdiene i butikken for fremtidig bruk.

Du kan se i ovennevnte utdrag at reduksjonen utførte handlingen av økningstall til staten = 0 og returnerte staten = 1, butikken oppdaterte denne responsen fra reduksjonen. Ved å sende den andre handlingen med et økning i antall, økte reduksjonen igjen i staten og fikk den til stat = 2. Når den utføres av reduksjonen i resultatene, oppdaterer den siste utsendte handlingen med å redusere antall staten fra staten = 2 til stat = 1.

Konklusjon

I denne artikkelen lager du et enkelt react -applikasjon for å starte med Redux. Visual Studio -koden brukes til å opprette applikasjonen. Denne artikkelen demonstrerer en enkel kode som utøver Redux. Node Package Manager (NPM) installerer Redux Toolkit i React Application Project ved å bruke installasjonskommandoen. Derfor kan du øve på det og gjøre andre eksperimenter for din egen læring.