Statusbeheer vormt de kern van moderne webapplicaties en speelt een cruciale rol bij het beheer van gebruikersgegevens en het vastleggen van hun interacties. Of het nu gaat om het vullen van een winkelwagentje op een e-commerceplatform of het onderhouden van een ingelogde gebruikerssessie na authenticatie, deze acties worden mogelijk gemaakt door efficiënt statusbeheer.

In wezen staan ​​​​staatsmanagers apps toe om toegang te krijgen tot de gegevens en deze te verwerken om de gewenste resultaten te produceren. Next.js biedt ondersteuning voor meerdere oplossingen voor statusbeheer. In deze handleiding richten we ons echter op het gebruik van Redux Toolkit voor statusbeheer.

In Next.js-toepassingen omvat statusbeheer doorgaans twee typen statussen: globale status en componentstatus. De globale status bevat informatie die wordt gedeeld door alle componenten in de applicatie, zoals de authenticatiestatus van een gebruiker, terwijl de componentstatus gegevens opslaat die specifiek zijn voor individuele componenten.

Zowel de globale status als de componentstatus spelen een cruciale rol bij het beheer van de algehele status van de toepassing, wat een efficiënte gegevensverwerking mogelijk maakt.

Redux wordt algemeen gebruikt als oplossing voor statusbeheer verschillende JavaScript-frameworks. Het kan echter complexiteit introduceren, vooral voor kleinere projecten.

Een veelvoorkomend nadeel is de noodzaak om repetitieve boilerplate-code te schrijven om actietypen, actiemakers en reducers te definiëren. Dit kan leiden tot meer coderedundantie.

Om deze uitdagingen te overwinnen, Redux-toolkit (RTK) schiet te hulp. Het is voornamelijk bedoeld om de ontwikkelingservaring te stroomlijnen bij het werken met de Redux staatsbeheerbibliotheek. Het biedt een set tools en hulpprogramma's die veelvoorkomende Redux-taken vereenvoudigen, waardoor er geen overbodige standaardcode meer nodig is.

Laten we nu eens kijken naar het gebruik van Redux Toolkit om de status in Next.js-applicaties te beheren. Maak om te beginnen een Next.js-project en installeer de vereiste afhankelijkheden door de onderstaande stappen te volgen.

1. Maak lokaal een nieuw Next.js-project door de onderstaande opdracht in uw terminal uit te voeren:

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

2. Navigeer na het maken van het project naar de projectdirectory door het volgende uit te voeren:

   cd next-redux-toolkit

3. Installeer ten slotte de benodigde afhankelijkheden in uw project met behulp van npm, de Node-pakketbeheerder.

   npm install @reduxjs/toolkit react-redux

Nadat u een standaard Next.js-project hebt opgezet, bent u nu klaar om een ​​demo Next.js-toepassing te bouwen die Redux Toolkit gebruikt voor statusbeheer.

U kunt de code van dit project hierin vinden GitHub-opslagplaats.

Configureer de Redux Store

Een Redux-archief is een centrale container die de volledige status van de applicatie bevat. Het dient als de enige bron van de gegevens van de toepassing en geeft statussen aan elk onderdeel. De winkel is verantwoordelijk voor het beheren en bijwerken van de status door middel van acties en reductiemiddelen, waardoor statusbeheer in de hele applicatie wordt vergemakkelijkt.

Om een ​​Redux-winkel te bouwen, maakt u een nieuw redux map in de hoofdmap van uw Next.js-project. Maak in deze map een nieuw winkel.js bestand en voeg de volgende code toe:

importeren {configureStore} van'@reduxjs/toolkit';
importeren profielVerminderaar van'./verloopstukken/profileSlice';
exporterenstandaard configureStore({
 verloopstuk:{
 profiel: profileReducer
 }
})

De bovenstaande code maakt gebruik van configureStore functie om de Redux-winkel te maken en te configureren. De winkelconfiguratie omvat het specificeren van verloopstukken met behulp van de verloopstuk voorwerp.

Reducers geven in dit geval aan hoe de status van de applicatie moet veranderen als reactie op bepaalde acties of gespecificeerde gebeurtenissen. In dit voorbeeld is de profiel reducer is verantwoordelijk voor het beheer van acties met betrekking tot de profielstatus.

Door de Redux-winkel in te stellen, stelt de code de kernstructuur vast voor het beheer van de status van de applicatie met behulp van Redux Toolkit.

Definieer State Slices

Redux-statussegmenten zijn componenten die de logica bevatten voor het beheren van de status van specifieke gegevensitems binnen de geconfigureerde redux-opslag. Deze segmenten worden gemaakt met behulp van de createSlice functie, die automatisch de reducer, action creators en action types voor de slice genereert.

In de redux directory, maak een nieuwe map aan en geef deze een naam verloopstukken. Maak in deze map profileSlice.js bestand en voeg de volgende code toe.

importeren {createSlice} van'@reduxjs/toolkit';
const profielSlice = createSlice({
 naam: 'profiel',
 oorspronkelijke toestand: {
 naam: 'geen'
 },
 verloopstukken: {
 SET_NAME: (staat, actie) => {
 state.name = actie.payload
 }
}})
exporterenconst {SET_NAME} = profileSlice.actions;
exporterenstandaard profileSlice.verloopstuk;

In de verstrekte code, de createSlice functie maakt een statussegment voor de status van het gebruikersprofiel. De profielSlice object bevat de naam van het segment en zijn oorspronkelijke toestand, die de standaardwaarden voor de statuseigenschappen bevat.

Bovendien neemt het slice-object ook een verloopstukken eigenschap die de actiehandlers voor dit segment definieert. In dit geval een enkele reductiefunctie met de naam SET_NAME. Als u deze functie eenmaal aanroept, wordt in wezen de eigenschap name van de staat bijgewerkt met de verstrekte gegevens.

De createSlice functie genereert actiemakers en actietypes automatisch op basis van de gedefinieerde reducers. De geëxporteerde SET_NAME actie maker en profileSlice.verloopstuk vertegenwoordigt de gegenereerde action creator en de reducer-functie voor het profielsegment.

Door deze state slice te maken, kunnen componenten binnen de applicatie gebruikmaken van de SET_NAME action en geef de gewenste payload door om de profielnaam in de status bij te werken.

Maak een component om de statusbeheerfunctionaliteit van RTK te testen

Open de index.js bestand in de Pagina's directory, verwijder de boilerplate Next.js-code en voeg de volgende code toe.

importeren stijlen van'@/styles/Home.module.css'
importeren {useRef} van'Reageer'
importeren {useSelector, useDispatch} van'reageer-redux'
importeren {SET_NAME} van'../../redux/reducers/profileSlice'
functieWeergavenaam(){
const {naam} = gebruikSelector((staat) => staat.profiel)
opbrengst (

 Ik ben {naam} !!</h1> 
 ) }
exporterenstandaardfunctieThuis() {
const inputName = gebruikRef()
const verzending = useDispatch()
functieindienenNaam() {
troosten.log (invoerNaam.huidige.waarde)
 verzending (SET_NAME(invoerNaam.huidige.waarde))
 }
opbrengst (
 <>

'voer naam in' ref={inputName} />
Voer naam< in/button>

 </main>
 </>
 )}

Met de bovenstaande code wordt een Next.js-component gemaakt en weergegeven waarmee de gebruiker een naam kan invoeren en de opgegeven naam op de browserpagina kan weergeven. Effectief de status van de applicatie beheren met behulp van Redux Toolkit.

De Weergavenaam component maakt gebruik van de gebruikSelector haak om toegang te krijgen tot de naam eigenschap uit de profielstatus in de Redux-winkel en geeft deze weer op de pagina.

Om een ​​naam in te voeren, klikt een gebruiker op de Voer naam in knop. Deze roept de indienenNaam functie, die de SET_NAME actie met de invoerwaarde als de payload. Met deze actie wordt de eigenschap name bijgewerkt in de profielstatus.

Werk het bestand _app.js bij

Ten slotte, om Redux Toolkit te configureren voor gebruik in de volledige Next.js-applicatie, moet u de applicatie omwikkelen met de Redux-provider: dit zorgt ervoor dat de Redux-winkel en de beschikbare statussen toegankelijk zijn voor alle componenten in de sollicitatie.

Open de _app.js bestand en werk het als volgt bij:

importeren {Aanbieder} van'reageer-redux'
importeren winkel van'../../redux/store'
exporterenstandaardfunctieapp({ Component, paginaProps }) {
opbrengst (


 </Aanbieder> )
}

Ga nu door en start de ontwikkelingsserver om de aangebrachte wijzigingen weer te geven en navigeer ernaar http://localhost: 3000 in uw browser om de toepassing te testen.

npm run dev

Omgaan met gegevensrehydratie bij het opnieuw laden van pagina's

Gegevensrehydratie bij het opnieuw laden van een pagina verwijst naar het proces van het herstellen en initialiseren van de status van de toepassing wanneer een pagina opnieuw wordt geladen. In een door de server gegenereerde Next.js-toepassing wordt de initiële status eerst op de server weergegeven en vervolgens naar de client verzonden.

Op de client is JavaScript-code verantwoordelijk voor het reconstrueren van de applicatiestatus door de geserialiseerde status die van de server is ontvangen, op te halen en te deserialiseren.

Door dit te doen, kan de applicatie naadloos de benodigde gegevens herstellen en de sessie van de gebruiker behouden. Deze aanpak voorkomt onnodig ophalen van gegevens en zorgt voor een ononderbroken gebruikerservaring bij het navigeren tussen pagina's of het opnieuw laden van de applicatie.

Een van de voordelen van het gebruik van Redux Toolkit in Next.js-applicaties is de eenvoud en ontwikkelaarsvriendelijke functies. Het vermindert aanzienlijk de boilerplate-code die nodig is voor het definiëren van acties, reducers en winkelconfiguratie, waardoor het gemakkelijker en efficiënter wordt om met Redux te werken in statusbeheer.