Upravljanje stanja je v središču sodobnih spletnih aplikacij, igra ključno vlogo pri upravljanju podatkov uporabnikov in zajemanju njihovih interakcij. Ne glede na to, ali gre za polnjenje nakupovalnega vozička na platformi za e-trgovino ali vzdrževanje seje prijavljenega uporabnika po preverjanju pristnosti, so ta dejanja omogočena z učinkovitim upravljanjem stanja.

V bistvu upravitelji stanja omogočajo aplikacijam dostop do podatkov in njihovo obdelavo za doseganje želenih rezultatov. Next.js nudi podporo za več rešitev za upravljanje stanja. Vendar se bomo v tem priročniku osredotočili na uporabo Redux Toolkit za upravljanje stanja.

V aplikacijah Next.js upravljanje stanja običajno vključuje dve vrsti stanj: globalno stanje in stanje komponente. Globalno stanje vsebuje informacije, ki si jih delijo vse komponente v aplikaciji, kot je status avtentikacije uporabnika, medtem ko stanje komponente shranjuje podatke, specifične za posamezne komponente.

Tako globalno stanje kot stanje komponente igrata ključno vlogo pri upravljanju celotnega stanja aplikacije in omogočata učinkovito ravnanje s podatki.

Reduxis je splošno sprejet kot rešitev za upravljanje stanja različna ogrodja JavaScript. Vendar pa lahko predstavlja zapletenost, zlasti pri manjših projektih.

Ena pogosta pomanjkljivost je potreba po pisanju ponavljajoče se kode za definiranje tipov dejanj, ustvarjalcev dejanj in reduktorjev. To lahko povzroči večjo redundanco kode.

Da bi premagali te izzive, Komplet orodij Redux (RTK) priskoči na pomoč. Njegov namen je predvsem poenostaviti razvojne izkušnje pri delu z Knjižnica za upravljanje stanja Redux. Zagotavlja nabor orodij in pripomočkov, ki poenostavljajo običajna opravila Reduxa, s čimer odpravljajo potrebo po pretirani standardni kodi.

Zdaj pa se poglobimo v uporabo Redux Toolkit za upravljanje stanja v aplikacijah Next.js. Za začetek ustvarite projekt Next.js in namestite zahtevane odvisnosti, tako da sledite spodnjim korakom.

1. Ustvarite nov projekt Next.js lokalno tako, da v svojem terminalu zaženete spodnji ukaz:

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

2. Ko ustvarite projekt, se pomaknite v imenik projekta tako, da zaženete:

   cd next-redux-toolkit

3. Na koncu namestite potrebne odvisnosti v svoj projekt z uporabo npm, upravitelj paketov Node.

   npm namestite @reduxjs/toolkit react-redux

Ko nastavite osnovni projekt Next.js, ste zdaj pripravljeni zgraditi predstavitveno aplikacijo Next.js, ki za upravljanje stanja uporablja Redux Toolkit.

Tukaj lahko najdete kodo tega projekta Repozitorij GitHub.

Konfigurirajte Redux Store

Trgovina Redux je osrednji vsebnik, ki hrani celotno stanje aplikacije. Služi kot edini vir podatkov aplikacije in zagotavlja stanja vsaki komponenti. Trgovina je odgovorna za upravljanje in posodabljanje stanja prek dejanj in zmanjševalnikov – kar olajša upravljanje stanja v celotni aplikaciji.

Če želite zgraditi trgovino Redux, ustvarite novo redux mapo v korenskem imeniku vašega projekta Next.js. Znotraj te mape ustvarite novo store.js datoteko in dodajte naslednjo kodo:

uvoz {configureStore} od'@reduxjs/toolkit';
uvoz profileReducer od'./reducers/profileSlice';
izvozprivzeto configureStore({
 reduktor:{
 profil: profileReducer
 }
})

Zgornja koda uporablja configureStore funkcijo za ustvarjanje in konfiguracijo trgovine Redux. Konfiguracija trgovine vključuje določanje reduktorjev z uporabo reduktor predmet.

Reduktorji v tem primeru določajo, kako naj se spremeni stanje aplikacije kot odgovor na določena dejanja ali določene dogodke. V tem primeru je profil reduktor je odgovoren za upravljanje dejanj, povezanih s stanjem profila.

Z nastavitvijo trgovine Redux koda vzpostavi osnovno strukturo za upravljanje stanja aplikacije z uporabo Redux Toolkit.

Določite državne rezine

Rezine stanja Redux so komponente, ki zajemajo logiko za upravljanje stanja določenih podatkovnih postavk znotraj konfigurirane shrambe redux. Te rezine so ustvarjene z uporabo createSlice funkcijo, ki samodejno ustvari reduktor, ustvarjalce dejanj in vrste dejanj za rezino.

V redux ustvarite novo mapo in jo poimenujte reduktorji. Znotraj te mape ustvarite profileSlice.js datoteko in dodajte naslednjo kodo.

uvoz {createSlice} od'@reduxjs/toolkit';
konst profileSlice = createSlice({
 ime: 'profil',
 initialState: {
 ime: 'brez'
 },
 reduktorji: {
 SET_NAME: (stanje, dejanje) => {
 state.name = action.payload
 }
}})
izvozkonst {SET_NAME} = profileSlice.actions;
izvozprivzeto profileSlice.reducer;

V predloženi kodi je createSlice funkcija ustvari rezino stanja za stanje uporabniškega profila. The profileSlice predmet vključuje ime rezine in njeno initialState, ki vsebuje privzete vrednosti za lastnosti stanja.

Poleg tega predmet rezine sprejme tudi a reduktorji lastnost, ki definira obdelovalce dejanj za to rezino. V tem primeru se imenuje ena funkcija reduktorja SET_NAME. V bistvu, ko pokličete to funkcijo, bo posodobila lastnost imena države s podanimi podatki.

The createSlice funkcija samodejno ustvari ustvarjalce dejanj in vrste dejanj na podlagi definiranih reduktorjev. Izvoženo SET_NAME ustvarjalec akcij in profileSlice.reducer predstavlja generiranega ustvarjalca dejanja in reduktorsko funkcijo za rezino profila.

Z ustvarjanjem te rezine stanja lahko komponente znotraj aplikacije uporabijo SET_NAME dejanje in posredujte želeno obremenitev za posodobitev imena profila v stanju.

Ustvarite komponento za preizkus funkcionalnosti upravljanja stanja RTK

Odprite index.js datoteka v strani imenik, izbrišite predlogo kode Next.js in dodajte naslednjo kodo.

uvoz stilov od'@/styles/Home.module.css'
uvoz {useRef} od'reagirati'
uvoz {useSelector, useDispatch} od'react-redux'
uvoz {SET_NAME} od'../../redux/reducers/profileSlice'
funkcijoDisplayName(){
konst {name} = useSelector((država) => state.profile)
vrnitev (

 Jaz sem {name} !!</h1> 
 ) }
izvozprivzetofunkcijodomov() {
konst inputName = useRef()
konst dispatch = useDispatch()
funkcijosubmitName() {
konzola.log (inputName.current.value)
 pošiljanje (SET_NAME(inputName.current.value))
 }
vrnitev (
 <>

'vnesite ime' ref={inputName} />
Vnesite ime</button>

 </main>
 </>
 )}

Zgornja koda ustvari in upodobi komponento Next.js, ki uporabniku omogoča vnos imena in prikaz navedenega imena na strani brskalnika. Učinkovito upravljanje stanja aplikacije z orodjem Redux Toolkit.

The DisplayName komponenta uporablja useSelector kavelj za dostop do ime lastnost iz stanja profila v trgovini Redux in jo upodobi na strani.

Za vnos imena uporabnik klikne Vnesite ime gumb. To prikliče submitName funkcijo, ki pošilja SET_NAME dejanje z vhodno vrednostjo kot obremenitvijo. To dejanje posodobi lastnost imena v stanju profila.

Posodobite datoteko _app.js

Končno, če želite konfigurirati Redux Toolkit za uporabo v celotni aplikaciji Next.js, morate aplikacijo oviti z Ponudnik Redux—to zagotavlja, da so trgovina Redux in razpoložljiva stanja dostopna vsem komponentam v aplikacija.

Odprite _app.js datoteko in jo posodobite na naslednji način:

uvoz {Ponudnik} od'react-redux'
uvoz trgovina od'../../redux/store'
izvozprivzetofunkcijoaplikacija({ Komponenta, pageProps }) {
vrnitev (


 </Ponudnik> )
}

Zdaj pa nadaljujte in zaženite razvojni strežnik, da odraža spremembe, ki ste jih naredili, in se pomaknite do njega http://localhost: 3000 v brskalniku, da preizkusite aplikacijo.

npm run dev

Ravnanje z rehidracijo podatkov ob ponovnem nalaganju strani

Rehidracija podatkov ob ponovnem nalaganju strani se nanaša na postopek obnovitve in inicializacije stanja aplikacije, ko se stran znova naloži. V strežniško upodobljeni aplikaciji Next.js je začetno stanje najprej upodobljeno na strežniku in nato poslano odjemalcu.

Na odjemalcu je koda JavaScript odgovorna za rekonstrukcijo stanja aplikacije s pridobivanjem in deserializacijo serializiranega stanja, prejetega s strežnika.

S tem lahko aplikacija nemoteno obnovi potrebne podatke in ohrani uporabnikovo sejo. Ta pristop se izogne ​​nepotrebnemu pridobivanju podatkov in zagotavlja neprekinjeno uporabniško izkušnjo pri krmarjenju med stranmi ali ponovnem nalaganju aplikacije.

Ena od prednosti uporabe orodja Redux Toolkit v aplikacijah Next.js je njegova preprostost in razvijalcem prijazne funkcije. Znatno zmanjša okvirno kodo, potrebno za definiranje dejanj, reduktorjev in konfiguracije shrambe, zaradi česar je delo z Reduxom pri upravljanju stanja lažje in učinkovitejše.