Statsstyring er kernen i moderne webapplikationer, og spiller en afgørende rolle i håndteringen af ​​brugernes data og indfangning af deres interaktioner. Uanset om det er at udfylde en indkøbskurv på en e-handelsplatform eller vedligeholde en logget ind brugersession efter godkendelse, er disse handlinger muliggjort gennem effektiv tilstandsstyring.

I det væsentlige tillader statsledere apps at få adgang til og behandle dataene for at producere de ønskede resultater. Next.js giver support til flere tilstandsstyringsløsninger. Men i denne guide vil vi fokusere på at bruge Redux Toolkit til statsadministration.

I Next.js-applikationer involverer tilstandsstyring typisk to typer tilstande: global tilstand og komponenttilstand. Den globale tilstand indeholder information, der deles af alle komponenter i applikationen, såsom godkendelsesstatus for en bruger, mens komponenttilstanden gemmer data, der er specifikke for individuelle komponenter.

Både den globale tilstand og komponenttilstanden spiller en afgørende rolle i styringen af ​​applikationens overordnede tilstand, hvilket letter effektiv datahåndtering.

Reduxis bredt vedtaget som en statsstyringsløsning på tværs forskellige JavaScript-rammer. Det kan dog introducere kompleksitet, især for mindre projekter.

En almindelig ulempe er behovet for at skrive gentagne boilerplate-kode for at definere handlingstyper, handlingsskabere og reducerere. Dette kan føre til øget koderedundans.

For at overkomme disse udfordringer, Redux Toolkit (RTK) kommer til undsætning. Det har hovedsageligt til formål at strømline udviklingsoplevelsen, når man arbejder med Redux state management bibliotek. Det giver et sæt værktøjer og hjælpeprogrammer, der forenkler almindelige Redux-opgaver, hvilket eliminerer behovet for overdreven standardkode.

Lad os nu dykke ned i at bruge Redux Toolkit til at administrere tilstand i Next.js-applikationer. For at komme i gang skal du oprette et Next.js-projekt og installere de nødvendige afhængigheder ved at følge nedenstående trin.

1. Opret et nyt Next.js-projekt lokalt ved at køre kommandoen nedenfor i din terminal:

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

2. Når du har oprettet projektet, skal du navigere ind i projektbiblioteket ved at køre:

   cd næste-redux-værktøjssæt

3. Til sidst skal du installere de nødvendige afhængigheder i dit projekt ved hjælp af npm, Node-pakkeadministratoren.

   npm installer @reduxjs/toolkit react-redux

Når du har konfigureret et grundlæggende Next.js-projekt, er du nu klar til at bygge en demo Next.js-applikation, der bruger Redux Toolkit til statsadministration.

Du kan finde dette projekts kode i denne GitHub-depot.

Konfigurer Redux Store

En Redux-butik er en central beholder, der holder hele applikationens tilstand. Det fungerer som den enkelte kilde til applikationens data, og giver tilstande til hver komponent. Butikken er ansvarlig for styring og opdatering af staten gennem handlinger og reduktionsmidler – hvilket letter statsadministration gennem hele applikationen.

For at bygge en Redux-butik skal du oprette en ny redux mappe i rodmappen på dit Next.js-projekt. Inde i denne mappe skal du oprette en ny store.js fil og tilføj følgende kode:

importere {configureStore} fra'@reduxjs/værktøjssæt';
importere profilReducer fra'./reducers/profileSlice';
eksportStandard configureStore({
 reducering:{
 profil: profilReducer
 }
})

Ovenstående kode bruger configureStore funktion til at oprette og konfigurere Redux-butikken. Butikskonfigurationen inkluderer specificering af reduktionsgear ved hjælp af reducering objekt.

Reducere angiver i dette tilfælde, hvordan applikationens tilstand skal ændres som reaktion på bestemte handlinger eller specificerede hændelser. I dette eksempel er profil reducer er ansvarlig for at administrere handlinger relateret til profiltilstanden.

Ved at opsætte Redux-butikken etablerer koden kernestrukturen til styring af applikationens tilstand ved hjælp af Redux Toolkit.

Definer tilstandsudsnit

Redux-tilstandsudsnit er komponenter, der indkapsler logikken til styring af tilstanden for specifikke dataelementer i det konfigurerede redux-lager. Disse skiver er oprettet ved hjælp af skabe Slice funktion, som automatisk genererer reducering, handlingsskabere og handlingstyper for udsnittet.

I redux mappe, opret en ny mappe og navngiv den reduktionsgear. Opret inde i denne mappe profileSlice.js fil, og tilføj følgende kode.

importere {createSlice} fra'@reduxjs/værktøjssæt';
konst profileSlice = createSlice({
 navn: 'profil',
 initialState: {
 navn: 'ingen'
 },
 reduktionsgear: {
 SET_NAME: (tilstand, handling) => {
 tilstand.navn = handling.nyttelast
 }
}})
eksportkonst {SET_NAME} = profileSlice.actions;
eksportStandard profileSlice.reducer;

I den medfølgende kode er skabe Slice funktion opretter et tilstandsudsnit for brugerprofiltilstanden. Det profilSlice objekt inkluderer navnet på udsnittet og dets initialtilstand, som indeholder standardværdierne for tilstandsegenskaberne.

Derudover tager skiveobjektet også en reduktionsgear egenskab, som definerer handlingsbehandlerne for dette udsnit. I dette tilfælde navngives en enkelt reduceringsfunktion SET_NAME. I det væsentlige, når du kalder denne funktion, vil den opdatere statens navneegenskab med de angivne data.

Det skabe Slice funktion genererer handlingsskabere og handlingstyper automatisk baseret på de definerede reducering. Den eksporterede SET_NAME handlingsskaber og profileSlice.reducer repræsenterer den genererede handlingsskaber og reduceringsfunktionen for profiludsnittet.

Ved at oprette denne tilstandsudsnit kan komponenter i applikationen bruge SET_NAME handling og videregive den ønskede nyttelast for at opdatere profilnavnet i staten.

Opret en komponent til at teste RTK's tilstandsstyringsfunktionalitet

Åbn index.js fil i sider bibliotek, slet koden Next.js, og tilføj følgende kode.

importere stilarter fra'@/styles/Home.module.css'
importere {useRef} fra'reagere'
importere {useSelector, useDispatch} fra'react-redux'
importere {SET_NAME} fra'../../redux/reducers/profileSlice'
fungereVist navn(){
konst {navn} = useSelector((stat) => state.profile)
Vend tilbage (

 Jeg er {navn} !!</h1> 
 ) }
eksportStandardfungereHjem() {
konst inputName = useRef()
konst dispatch = useDispatch()
fungereindsendNavn() {
konsol.log (inputName.current.value)
 afsendelse (SET_NAME(inputName.current.value))
 }
Vend tilbage (
 <>

'indtast navn' ref={inputName} />
Indtast navn</button>

 </main>
 </>
 )}

Koden ovenfor opretter og gengiver en Next.js-komponent, der tillader brugeren at indtaste et navn og vise det angivne navn på browserens side. Effektiv styring af applikationens tilstand ved hjælp af Redux Toolkit.

Det Vist navn komponent bruger useSelector krog for at få adgang til navn ejendom fra profiltilstanden i Redux-butikken og gengiver den på siden.

For at indtaste et navn klikker en bruger på Indtast navn knap. Dette påberåber sig indsendNavn funktion, som afsender SET_NAME handling med inputværdien som nyttelast. Denne handling opdaterer navnegenskaben i profiltilstanden.

Opdater filen _app.js

Endelig, for at konfigurere Redux Toolkit til brug i hele Next.js-applikationen, skal du indpakke applikationen med Redux-udbyder - dette sikrer, at Redux-butikken og de tilgængelige tilstande er tilgængelige for alle komponenter i Ansøgning.

Åbn _app.js fil og opdater den som følger:

importere {Udbyder} fra'react-redux'
importere butik fra'../../redux/store'
eksportStandardfungereApp({ Komponent, pageProps }) {
Vend tilbage (


 </Udbyder> )
}

Gå nu videre og start udviklingsserveren for at afspejle de ændringer, du har foretaget, og naviger til http://localhost: 3000 i din browser for at teste applikationen.

npm køre dev

Håndtering af datarehydrering på sidegenindlæsning

Datarehydrering ved genindlæsning af side henviser til processen med at gendanne og initialisere applikationens tilstand, når en side genindlæses. I en server-renderet Next.js-applikation gengives starttilstanden først på serveren og sendes derefter til klienten.

På klienten er JavaScript-kode ansvarlig for at rekonstruere applikationstilstanden ved at hente og deserialisere den serialiserede tilstand modtaget fra serveren.

Ved at gøre det kan applikationen problemfrit gendanne de nødvendige data og bevare brugerens session. Denne tilgang undgår unødvendig datahentning og sikrer en uafbrudt brugeroplevelse, når du navigerer mellem sider eller genindlæser applikationen.

En af fordelene ved at bruge Redux Toolkit i Next.js-applikationer er dets enkelhed og udviklervenlige funktioner. Det reducerer markant den standardkode, der kræves til at definere handlinger, reduktioner og butikskonfiguration, hvilket gør det nemmere og mere effektivt at arbejde med Redux i tilstandsstyring.