Statlig förvaltning ligger i hjärtat av moderna webbapplikationer, och spelar en viktig roll för att hantera användarnas data och fånga deras interaktioner. Oavsett om det handlar om att fylla en kundvagn på en e-handelsplattform eller att upprätthålla en inloggad användarsession efter autentisering, är dessa åtgärder möjliga genom effektiv tillståndshantering.

I huvudsak tillåter statliga chefer appar att komma åt och bearbeta data för att ge önskade resultat. Next.js tillhandahåller stöd för flera tillståndshanteringslösningar. Men i den här guiden kommer vi att fokusera på att använda Redux Toolkit för tillståndshantering.

I Next.js-applikationer involverar tillståndshantering vanligtvis två typer av tillstånd: globalt tillstånd och komponenttillstånd. Det globala tillståndet innehåller information som delas av alla komponenter i applikationen, såsom autentiseringsstatus för en användare, medan komponenttillståndet lagrar data som är specifik för enskilda komponenter.

Både de globala tillstånden och komponenttillstånden spelar avgörande roller för att hantera applikationens övergripande tillstånd, vilket underlättar effektiv datahantering.

Reduxis antogs allmänt som en statlig hanteringslösning överallt olika JavaScript-ramverk. Det kan dock skapa komplexitet, särskilt för mindre projekt.

En vanlig nackdel är behovet av att skriva repetitiv standardkod för att definiera åtgärdstyper, åtgärdsskapare och reducerare. Detta kan leda till ökad kodredundans.

För att övervinna dessa utmaningar, Redux Toolkit (RTK) kommer till undsättning. Det syftar främst till att effektivisera utvecklingsupplevelsen när man arbetar med Redux tillståndshanteringsbibliotek. Den tillhandahåller en uppsättning verktyg och verktyg som förenklar vanliga Redux-uppgifter, vilket eliminerar behovet av överdriven standardkod.

Låt oss nu dyka in i att använda Redux Toolkit för att hantera tillstånd i Next.js-applikationer. För att komma igång, skapa ett Next.js-projekt och installera de nödvändiga beroenden genom att följa stegen nedan.

1. Skapa ett nytt Next.js-projekt lokalt genom att köra kommandot nedan i din terminal:

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

2. När du har skapat projektet, navigera in i projektkatalogen genom att köra:

   cd nästa-redux-verktygssats

3. Slutligen, installera de nödvändiga beroenden i ditt projekt med hjälp av npm, Node-pakethanteraren.

   npm installera @reduxjs/toolkit react-redux

När du väl har ställt in ett grundläggande Next.js-projekt är du nu redo att bygga en demo Next.js-applikation som använder Redux Toolkit för tillståndshantering.

Du kan hitta detta projekts kod i denna GitHub-förråd.

Konfigurera Redux Store

En Redux-butik är en central behållare som håller applikationens hela tillstånd. Den fungerar som den enda källan för applikationens data, och tillhandahåller tillstånd till varje komponent. Butiken ansvarar för att hantera och uppdatera tillståndet genom åtgärder och reduceringar – vilket underlättar statlig hantering genom hela applikationen.

För att bygga en Redux-butik, skapa en ny på nytt mapp i rotkatalogen för ditt Next.js-projekt. Skapa en ny i den här mappen store.js fil och lägg till följande kod:

importera {configureStore} från'@reduxjs/verktygssats';
importera profilReducer från'./reducers/profileSlice';
exporterastandard configureStore({
 reducerare:{
 profil: profileReducer
 }
})

Koden ovan använder configureStore funktion för att skapa och konfigurera Redux-butiken. Butikskonfigurationen inkluderar specificering av reducerare med hjälp av reducerare objekt.

Reducerare, i det här fallet, anger hur programmets tillstånd ska ändras som svar på särskilda åtgärder eller specifika händelser. I det här exemplet är profil reducer är ansvarig för att hantera åtgärder relaterade till profiltillståndet.

Genom att ställa in Redux-butiken, etablerar koden kärnstrukturen för att hantera applikationens tillstånd med hjälp av Redux Toolkit.

Definiera tillståndsskivor

Redux-tillståndssnitt är komponenter som kapslar in logiken för att hantera tillståndet för specifika dataobjekt i det konfigurerade redux-lagret. Dessa skivor skapas med hjälp av skapa Slice funktion, som automatiskt genererar reducerare, åtgärdsskapare och åtgärdstyper för segmentet.

I den på nytt katalog, skapa en ny mapp och namnge den reducerare. Skapa inuti den här mappen profileSlice.js fil och lägg till följande kod.

importera {createSlice} från'@reduxjs/verktygssats';
konst profileSlice = createSlice({
 namn: 'profil',
 initialtillstånd: {
 namn: 'ingen'
 },
 reducerare: {
 ANGE NAMN: (stat, handling) => {
 state.name = action.payload
 }
}})
exporterakonst {SET_NAME} = profileSlice.actions;
exporterastandard profileSlice.reducer;

I den medföljande koden, skapa Slice funktionen skapar en tillståndsdel för användarprofiltillståndet. De profileSlice objekt inkluderar namnet på segmentet och dess initialtillstånd, som innehåller standardvärdena för tillståndsegenskaperna.

Dessutom tar skivobjektet också in en reducerare egenskap som definierar åtgärdshanterarna för detta segment. I det här fallet namnges en enda reducerfunktion ANGE NAMN. I huvudsak, när du anropar den här funktionen kommer den att uppdatera namnegenskapen för staten med de tillhandahållna uppgifterna.

De skapa Slice funktionen genererar åtgärdsskapare och åtgärdstyper automatiskt baserat på de definierade reducerarna. Den exporterade ANGE NAMN handlingsskapare och profileSlice.reducer representerar den genererade handlingsskaparen och reduceringsfunktionen för profilskivan.

Genom att skapa detta tillståndssegment kan komponenter i applikationen använda ANGE NAMN åtgärd och skicka önskad nyttolast för att uppdatera profilnamnet i staten.

Skapa en komponent för att testa RTK: s tillståndshanteringsfunktioner

Öppna index.js fil i sidor katalogen, ta bort koden Next.js på grundplattan och lägg till följande kod.

importera stilar från'@/styles/Home.module.css'
importera {useRef} från'reagera'
importera {useSelector, useDispatch} från'reagera-redux'
importera {ANGE NAMN} från'../../redux/reducers/profileSlice'
fungeraVisningsnamn(){
konst {name} = useSelector((stat) => state.profile)
lämna tillbaka (

 Jag är {namn} !!</h1> 
 ) }
exporterastandardfungeraHem() {
konst inputName = useRef()
konst dispatch = useDispatch()
fungerasubmitName() {
trösta.log (inputName.current.value)
 utskick (SET_NAME(inputName.current.value))
 }
lämna tillbaka (
 <>

'Skriv namn' ref={inputName} />
Ange namn</button>

 </main>
 </>
 )}

Koden ovan skapar och återger en Next.js-komponent som låter användaren ange ett namn och visa det angivna namnet på webbläsarens sida. Hantera programmets tillstånd effektivt med Redux Toolkit.

De Visningsnamn komponenten använder useSelector krok för att komma åt namn egendom från profiltillståndet i Redux-butiken och återger den på sidan.

För att ange ett namn klickar en användare på Skriv namn knapp. Detta åberopar submitName funktion, som skickar ANGE NAMN åtgärd med ingångsvärdet som nyttolast. Denna åtgärd uppdaterar namnegenskapen i profiltillståndet.

Uppdatera filen _app.js

Slutligen, för att konfigurera Redux Toolkit för användning i hela Next.js-applikationen, måste du slå in applikationen med Redux-leverantör – detta säkerställer att Redux-butiken och de tillgängliga tillstånden är tillgängliga för alla komponenter i Ansökan.

Öppna _app.js fil och uppdatera den enligt följande:

importera {Provider} från'reagera-redux'
importera Lagra från'../../redux/butik'
exporterastandardfungeraApp({ Komponent, pageProps }) {
lämna tillbaka (


 </Provider> )
}

Gå nu vidare och starta utvecklingsservern för att återspegla ändringarna du gjort, och navigera till http://localhost: 3000 i din webbläsare för att testa applikationen.

npm kör dev

Hantera datarehydrering vid omladdning av sida

Datarehydrering vid omladdning av sid hänvisar till processen att återställa och initiera programmets tillstånd när en sida laddas om. I en server-renderad Next.js-applikation renderas det initiala tillståndet först på servern och skickas sedan till klienten.

På klienten är JavaScript-koden ansvarig för att rekonstruera applikationstillståndet genom att hämta och avserialisera det serialiserade tillståndet som tas emot från servern.

Genom att göra det kan applikationen sömlöst återställa nödvändig data och bevara användarens session. Detta tillvägagångssätt undviker onödig datahämtning och säkerställer en oavbruten användarupplevelse när du navigerar mellan sidor eller laddar om programmet.

En av fördelarna med att använda Redux Toolkit i Next.js-applikationer är dess enkelhet och utvecklarvänliga funktioner. Det minskar avsevärt den standardkod som krävs för att definiera åtgärder, reducerare och butikskonfiguration, vilket gör det enklare och mer effektivt att arbeta med Redux i tillståndshantering.