Statlig ledelse ligger i hjertet av moderne nettapplikasjoner, og spiller en viktig rolle i å administrere brukernes data og fange deres interaksjoner. Enten det er å fylle en handlekurv på en e-handelsplattform, eller opprettholde en pålogget brukerøkt etter autentisering, er disse handlingene muliggjort gjennom effektiv tilstandsadministrasjon.

I hovedsak lar statlige ledere apper få tilgang til og behandle dataene for å gi de ønskede resultatene. Next.js gir støtte for flere tilstandsadministrasjonsløsninger. I denne veiledningen vil vi imidlertid fokusere på å bruke Redux Toolkit for statsadministrasjon.

I Next.js-applikasjoner involverer tilstandsadministrasjon vanligvis to typer tilstander: global tilstand og komponenttilstand. Den globale tilstanden inneholder informasjon som deles av alle komponenter i applikasjonen, for eksempel autentiseringsstatusen til en bruker, mens komponenttilstanden lagrer data som er spesifikke for individuelle komponenter.

Både den globale tilstanden og komponenttilstanden spiller viktige roller i å administrere applikasjonens generelle tilstand, noe som letter effektiv datahåndtering.

Reduxis ble bredt tatt i bruk som en statlig administrasjonsløsning på tvers ulike JavaScript-rammer. Imidlertid kan det introdusere kompleksitet, spesielt for mindre prosjekter.

En vanlig ulempe er behovet for å skrive repeterende standardkode for å definere handlingstyper, handlingsskapere og reduserere. Dette kan føre til økt koderedundans.

For å overvinne disse utfordringene, Redux Toolkit (RTK) kommer til unnsetning. Den har hovedsakelig som mål å effektivisere utviklingsopplevelsen når du jobber med Redux statsadministrasjonsbibliotek. Den gir et sett med verktøy og verktøy som forenkler vanlige Redux-oppgaver, og eliminerer behovet for overdreven standardkode.

La oss nå dykke ned i å bruke Redux Toolkit for å administrere tilstanden i Next.js-applikasjoner. For å komme i gang, opprett et Next.js-prosjekt og installer de nødvendige avhengighetene ved å følge trinnene nedenfor.

1. Opprett et nytt Next.js-prosjekt lokalt ved å kjøre kommandoen nedenfor i terminalen din:

   npx create-next-app@latest next-redux-toolkit

2. Etter å ha opprettet prosjektet, naviger inn i prosjektkatalogen ved å kjøre:

   cd neste-redux-verktøysett

3. Til slutt, installer de nødvendige avhengighetene i prosjektet ditt ved å bruke npm, Node-pakkebehandleren.

   npm installer @reduxjs/toolkit react-redux

Når du har satt opp et grunnleggende Next.js-prosjekt, er du nå klar til å bygge en demo Next.js-applikasjon som bruker Redux Toolkit for statlig administrasjon.

Du finner dette prosjektets kode i denne GitHub-depot.

Konfigurer Redux Store

En Redux-butikk er en sentral beholder som inneholder hele programmets tilstand. Den fungerer som den eneste kilden til applikasjonens data, og gir tilstander til hver komponent. Butikken er ansvarlig for å administrere og oppdatere staten gjennom handlinger og reduseringer – noe som letter statlig administrasjon gjennom hele applikasjonen.

For å bygge en Redux-butikk, opprett en ny redux mappen i rotkatalogen til Next.js-prosjektet. Opprett en ny i denne mappen store.js fil og legg til følgende kode:

import {configureStore} fra'@reduxjs/verktøysett';
import profilReduksjon fra'./reducers/profileSlice';
eksportmisligholde configureStore({
 redusering:{
 profil: profilReducer
 }
})

Koden ovenfor bruker configureStore funksjon for å opprette og konfigurere Redux-butikken. Butikkkonfigurasjonen inkluderer spesifisering av reduksjoner ved å bruke redusering gjenstand.

Redusere, i dette tilfellet, spesifiserer hvordan programmets tilstand skal endres som svar på bestemte handlinger eller spesifiserte hendelser. I dette eksemplet er profil redusering er ansvarlig for å administrere handlinger relatert til profiltilstanden.

Ved å sette opp Redux-butikken, etablerer koden kjernestrukturen for å administrere applikasjonens tilstand ved hjelp av Redux Toolkit.

Definer State Slices

Redux-tilstandssnitt er komponenter som innkapsler logikken for å administrere tilstanden til spesifikke dataelementer i det konfigurerte redux-lageret. Disse skivene er laget ved hjelp av lage Slice funksjon, som automatisk genererer redusering, handlingsskapere og handlingstyper for stykket.

I redux katalog, opprett en ny mappe og navngi den reduksjonsmidler. Opprett i denne mappen profileSlice.js fil, og legg til følgende kode.

import {createSlice} fra'@reduxjs/verktøysett';
konst profileSlice = createSlice({
 Navn: 'profil',
 opprinnelige tilstand: {
 Navn: 'ingen'
 },
 reduksjonsmidler: {
 SET_NAME: (stat, handling) => {
 state.name = handling.nyttelast
 }
}})
eksportkonst {SET_NAME} = profileSlice.actions;
eksportmisligholde profileSlice.reducer;

I den oppgitte koden er lage Slice funksjonen oppretter en tilstandsdel for brukerprofiltilstanden. De profilSlice objekt inkluderer navnet på skiven og dens opprinnelige tilstand, som inneholder standardverdiene for tilstandsegenskapene.

I tillegg tar skiveobjektet også inn en reduksjonsmidler egenskap som definerer handlingsbehandlerne for denne delen. I dette tilfellet kalles en enkelt reduseringsfunksjon SET_NAME. I hovedsak, når du ringer denne funksjonen, vil den oppdatere navneegenskapen til staten med de oppgitte dataene.

De lage Slice funksjonen genererer handlingsskapere og handlingstyper automatisk basert på de definerte reduseringene. Den eksporterte SET_NAME handlingsskaper og profileSlice.reducer representerer den genererte handlingsskaperen og reduksjonsfunksjonen for profilsnittet.

Ved å opprette denne tilstandsdelen kan komponenter i applikasjonen bruke SET_NAME handling og send ønsket nyttelast for å oppdatere profilnavnet i staten.

Lag en komponent for å teste RTKs tilstandsstyringsfunksjonalitet

Åpne index.js fil i sider katalogen, slett koden for Next.js-koden og legg til følgende kode.

import stiler fra'@/styles/Home.module.css'
import {useRef} fra'reagere'
import {useSelector, useDispatch} fra'react-redux'
import {SET_NAME} fra'../../redux/reducers/profileSlice'
funksjonVisningsnavn(){
konst {navn} = brukVelger((stat) => state.profile)
komme tilbake (

 Jeg er {navn} !!</h1> 
 ) }
eksportmisligholdefunksjonHjem() {
konst inputName = useRef()
konst dispatch = useDispatch()
funksjonsubmitName() {
konsoll.log (inputName.current.value)
 utsendelse (SET_NAME(inputName.current.value))
 }
komme tilbake (
 <>

'Skriv inn navn' ref={inputName} />
Skriv inn navn</button>

 </main>
 </>
 )}

Koden ovenfor oppretter og gjengir en Next.js-komponent som lar brukeren skrive inn et navn og vise det angitte navnet på nettleserens side. Effektivt, administrere applikasjonens tilstand ved hjelp av Redux Toolkit.

De Visningsnavn komponenten bruker useSelector krok for å få tilgang til Navn eiendom fra profiltilstanden i Redux-butikken og gjengir den på siden.

For å legge inn et navn, klikker en bruker på Skriv inn navn knapp. Dette påkaller submitName funksjon, som sender ut SET_NAME handling med inngangsverdien som nyttelast. Denne handlingen oppdaterer navneegenskapen i profiltilstanden.

Oppdater _app.js-filen

Til slutt, for å konfigurere Redux Toolkit for bruk i hele Next.js-applikasjonen, må du pakke inn applikasjonen med Redux-leverandør – dette sikrer at Redux-butikken og de tilgjengelige tilstandene er tilgjengelige for alle komponenter i applikasjon.

Åpne _app.js fil og oppdater den som følger:

import {Forsørger} fra'react-redux'
import butikk fra'../../redux/store'
eksportmisligholdefunksjonApp({ Component, pageProps }) {
komme tilbake (


 </Provider> )
}

Gå nå videre og start utviklingsserveren for å gjenspeile endringene du har gjort, og naviger til http://localhost: 3000 i nettleseren din for å teste applikasjonen.

npm kjøre dev

Håndtere datarehydrering på sideinnlasting

Datarehydrering ved sideinnlasting refererer til prosessen med å gjenopprette og initialisere applikasjonens tilstand når en side lastes inn på nytt. I en server-gjengert Next.js-applikasjon blir den opprinnelige tilstanden først gjengitt på serveren og deretter sendt til klienten.

På klienten er JavaScript-kode ansvarlig for å rekonstruere applikasjonstilstanden ved å hente og deserialisere den serialiserte tilstanden mottatt fra serveren.

Ved å gjøre det kan applikasjonen sømløst gjenopprette de nødvendige dataene og bevare brukerens økt. Denne tilnærmingen unngår unødvendig datahenting og sikrer en uavbrutt brukeropplevelse når du navigerer mellom sider eller laster applikasjonen på nytt.

En av fordelene med å bruke Redux Toolkit i Next.js-applikasjoner er dens enkelhet og utviklervennlige funksjoner. Det reduserer koden som kreves for å definere handlinger, reduksjoner og butikkkonfigurasjon betydelig, noe som gjør det enklere og mer effektivt å jobbe med Redux i tilstandsadministrasjon.