Az állapotkezelés a modern webalkalmazások középpontjában áll, létfontosságú szerepet játszik a felhasználók adatainak kezelésében és interakcióik rögzítésében. Legyen szó bevásárlókosár feltöltéséről egy e-kereskedelmi platformon, vagy bejelentkezett felhasználói munkamenet fenntartásáról a hitelesítés után, ezeket a műveleteket a hatékony állapotkezelés teszi lehetővé.

Lényegében az állami menedzserek lehetővé teszik az alkalmazások számára, hogy hozzáférjenek az adatokhoz és feldolgozzák azokat a kívánt eredmények elérése érdekében. A Next.js több állapotkezelési megoldáshoz nyújt támogatást. Ebben az útmutatóban azonban a Redux Toolkit állapotkezelésre való felhasználására összpontosítunk.

A Next.js alkalmazásokban az állapotkezelés jellemzően kétféle állapotot foglal magában: a globális állapotot és az összetevő állapotát. A globális állapot az alkalmazás összes összetevője által megosztott információkat tartalmaz, például a felhasználó hitelesítési állapotát, míg az összetevő állapota az egyes összetevőkre jellemző adatokat tárol.

Mind a globális, mind az összetevő állapotok létfontosságú szerepet játszanak az alkalmazás általános állapotának kezelésében, elősegítve a hatékony adatkezelést.

A Reduxist széles körben alkalmazzák állami felügyeleti megoldásként különféle JavaScript keretrendszerek. Ez azonban bonyolultságot okozhat, különösen a kisebb projektek esetében.

Az egyik gyakori hátrány az, hogy ismétlődő sablonkódot kell írni a művelettípusok, a cselekvés létrehozói és a redukálók meghatározásához. Ez fokozott kódredundanciához vezethet.

Hogy leküzdjük ezeket a kihívásokat, Redux Toolkit (RTK) jön a segítségre. Főleg a fejlesztési tapasztalatok egyszerűsítése a Redux állami kezelési könyvtár. Olyan eszközöket és segédprogramokat biztosít, amelyek leegyszerűsítik a gyakori Redux-feladatokat, kiküszöbölve a túlzott mértékű alapkód szükségességét.

Most nézzük meg a Redux Toolkit használatát a Next.js alkalmazások állapotának kezelésére. A kezdéshez hozzon létre egy Next.js projektet, és telepítse a szükséges függőségeket az alábbi lépések végrehajtásával.

1. Hozzon létre egy új Next.js projektet helyileg az alábbi parancs futtatásával a terminálon:

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

2. A projekt létrehozása után navigáljon a projektkönyvtárba a következő futtatással:

   cd next-redux-toolkit

3. Végül telepítse a szükséges függőségeket a projektben a segítségével npm, a Node csomagkezelő.

   npm install @reduxjs/toolkit react-redux

Miután beállította az alapvető Next.js projektet, készen áll egy demo Next.js alkalmazás létrehozására, amely a Redux Toolkit-et használja az állapotkezeléshez.

A projekt kódját itt találja meg GitHub adattár.

Konfigurálja a Redux Store-t

A Redux áruház egy központi tároló, amely az alkalmazás teljes állapotát tartalmazza. Az alkalmazás adatainak egyetlen forrásaként szolgál, és állapotokat biztosít az egyes összetevőknek. Az áruház felelős az állapot kezeléséért és frissítéséért akciókon és reduktorokon keresztül – ezzel megkönnyítve az állapotkezelést az egész alkalmazásban.

Redux áruház létrehozásához hozzon létre egy újat redux mappát a Next.js projekt gyökérkönyvtárában. Ebben a mappában hozzon létre egy újat store.js fájlt, és adja hozzá a következő kódot:

import {configureStore} tól től"@reduxjs/toolkit";
import profileReducer tól től'./reducers/profileSlice';
exportalapértelmezett configureStore({
 csökkentő:{
 profil: profileReducer
 }
})

A fenti kódot használja configureStore függvény a Redux tároló létrehozásához és konfigurálásához. Az áruház konfigurációja magában foglalja a szűkítők megadását a csökkentő tárgy.

A reduktorok ebben az esetben meghatározzák, hogy az alkalmazás állapota hogyan változzon adott műveletekre vagy meghatározott eseményekre válaszul. Ebben a példában a profil A reduktor felelős a profil állapotával kapcsolatos műveletek kezeléséért.

A Redux tároló beállításával a kód létrehozza az alkalmazás állapotának Redux Toolkit segítségével történő kezelésének alapvető struktúráját.

Állapotszeletek meghatározása

A redux állapotszeletek olyan összetevők, amelyek a konfigurált redux tárolón belüli meghatározott adatelemek állapotának kezeléséhez szükséges logikát foglalják magukba. Ezeket a szeleteket a createSlice függvény, amely automatikusan generálja a szelet szűkítőjét, a művelet létrehozóit és a művelettípusokat.

Ban,-ben redux könyvtárba, hozzon létre egy új mappát, és nevezze el reduktorok. Ebben a mappában hozzon létre profileSlice.js fájlt, és adja hozzá a következő kódot.

import {createSlice} tól től"@reduxjs/toolkit";
const profileSlice = createSlice({
 név: 'profil',
 kezdeti állapot: {
 név: 'egyik sem'
 },
 szűkítők: {
 SET_NAME: (állapot, cselekvés) => {
 state.name = action.payload
 }
}})
exportconst {SET_NAME} = profileSlice.actions;
exportalapértelmezett profileSlice.reducer;

A megadott kódban a createSlice függvény állapotszeletet hoz létre a felhasználói profil állapotához. A profileSlice az objektum tartalmazza a szelet nevét és annak kezdeti állapot, amely az állapottulajdonságok alapértelmezett értékeit tartalmazza.

Ezenkívül a szelet objektum is beveszi a reduktorok tulajdonság, amely meghatározza a szelet műveletkezelőit. Ebben az esetben egyetlen redukáló függvény neve SET_NAME. Lényegében a függvény meghívása után frissíti az állapot névtulajdonát a megadott adatokkal.

A createSlice A függvény a meghatározott reduktorok alapján automatikusan generálja a cselekvés létrehozóit és a művelettípusokat. Az exportált SET_NAME akciókészítő és profileSlice.reducer a profilszelet generált művelet-készítőjét és csökkentő funkcióját jelenti.

Ennek az állapotszeletnek a létrehozásával az alkalmazáson belüli összetevők felhasználhatják a SET_NAME műveletet, és adja át a kívánt hasznos terhet a profilnév állapotának frissítéséhez.

Hozzon létre egy komponenst az RTK állapotkezelési funkcióinak teszteléséhez

Nyissa meg a index.js fájl a oldalakat könyvtárba, törölje a sablont Next.js kódot, és adja hozzá a következő kódot.

import stílusok tól től"@/styles/Home.module.css"
import {useRef} tól től'reagál'
import {useSelector, useDispatch} tól től'react-redux'
import {SET_NAME} tól től"../../redux/reducers/profileSlice"
funkcióMegjelenítendő név(){
const {name} = useSelector((állapot) => state.profile)
Visszatérés (

 {name} vagyok !!</h1> 
 ) }
exportalapértelmezettfunkcióitthon() {
const inputName = useRef()
const dispatch = useDispatch()
funkciósubmitName() {
konzol.log (inputName.current.value)
 feladás (SET_NAME(inputName.current.value))
 }
Visszatérés (
 <>

'adja be a nevet' ref={inputName} />
Írja be a nevet</button>

 </main>
 </>
 )}

A fenti kód létrehoz egy Next.js komponenst, amely lehetővé teszi a felhasználó számára, hogy beírjon egy nevet, és megjelenítse a megadott nevet a böngésző oldalán. Az alkalmazás állapotának hatékony kezelése a Redux Toolkit segítségével.

A Megjelenítendő név komponens használja a useSelector horog eléréséhez név tulajdonság a profilállapotból a Redux áruházban, és megjeleníti az oldalon.

Név beviteléhez a felhasználó rákattint a gombra Írja be a nevet gomb. Ez meghívja a submitName funkciót, amely elküldi a SET_NAME művelet a bemeneti értékkel hasznos teherként. Ez a művelet frissíti a név tulajdonságot a profilállapotban.

Frissítse az _app.js fájlt

Végül a Redux Toolkit teljes Next.js alkalmazásban való használatra való konfigurálásához csomagolnia kell az alkalmazást a következővel: Redux szolgáltató – ez biztosítja, hogy a Redux tároló és az elérhető állapotok elérhetők legyenek a Alkalmazás.

Nyissa meg a _app.js fájlt, és frissítse az alábbiak szerint:

import {szolgáltató} tól től'react-redux'
import bolt tól től"../../redux/store"
exportalapértelmezettfunkcióApp({ Component, pageProps }) {
Visszatérés (


 </szolgáltató> )
}

Most pedig indítsa el a fejlesztői kiszolgálót, hogy tükrözze az elvégzett változtatásokat, majd navigáljon a webhelyre http://localhost: 3000 böngészőjében az alkalmazás teszteléséhez.

npm futás dev

Adatok újrahidratálásának kezelése oldal újratöltéskor

Az adatok újratöltése az oldal újratöltésekor az alkalmazás állapotának visszaállításának és inicializálásának folyamata az oldal újratöltésekor. A kiszolgáló által renderelt Next.js alkalmazásban a kezdeti állapot először a kiszolgálón jelenik meg, majd elküldi az ügyfélnek.

A kliensen a JavaScript kód feladata az alkalmazás állapotának rekonstrukciója a szervertől kapott szerializált állapot lekérésével és deszerializálásával.

Ezzel az alkalmazás zökkenőmentesen visszaállíthatja a szükséges adatokat, és megőrizheti a felhasználói munkamenetet. Ez a megközelítés elkerüli a szükségtelen adatlekérést, és zavartalan felhasználói élményt biztosít az oldalak közötti navigáció vagy az alkalmazás újratöltése során.

A Redux Toolkit Next.js alkalmazásokban való használatának egyik előnye az egyszerűség és a fejlesztőbarát funkciók. Jelentősen csökkenti a műveletek, reduktorok és tárolókonfigurációk meghatározásához szükséges alapkódot, így könnyebbé és hatékonyabbá válik a Redux-szal való munkavégzés az állapotkezelésben.