Tilanhallinta on nykyaikaisten verkkosovellusten ytimessä, ja sillä on tärkeä rooli käyttäjien tietojen hallinnassa ja heidän vuorovaikutuksensa tallentamisessa. Olipa kyseessä ostoskorin täyttäminen verkkokauppaalustalla tai sisäänkirjautuneen käyttäjän istunnon ylläpitäminen todennuksen jälkeen, nämä toimet ovat mahdollisia tehokkaan tilanhallinnan ansiosta.

Pohjimmiltaan osavaltion johtajat sallivat sovellusten käyttää ja käsitellä tietoja haluttujen tulosten tuottamiseksi. Next.js tarjoaa tukea useille tilanhallintaratkaisuille. Tässä oppaassa keskitymme kuitenkin Redux Toolkitin hyödyntämiseen valtionhallinnassa.

Next.js-sovelluksissa tilanhallinta käsittää tyypillisesti kahden tyyppisiä tiloja: globaalin tilan ja komponenttitilan. Globaali tila sisältää sovelluksen kaikkien komponenttien jakamat tiedot, kuten käyttäjän todennustilan, kun taas komponenttitila tallentaa yksittäisiä komponentteja koskevia tietoja.

Sekä globaalilla että komponenttitiloilla on keskeinen rooli sovelluksen kokonaistilan hallinnassa, mikä mahdollistaa tehokkaan tiedonkäsittelyn.

Reduxis on laajalti käytössä valtionhallintaratkaisuna erilaisia ​​JavaScript-kehyksiä. Se voi kuitenkin aiheuttaa monimutkaisuutta, erityisesti pienempien hankkeiden kohdalla.

Yksi yleinen haittapuoli on tarve kirjoittaa toistuvaa yleiskoodia toimintatyyppien, toimintojen luojien ja supistajien määrittelemiseksi. Tämä voi johtaa lisääntyneeseen koodin redundanssiin.

Voittaa nämä haasteet, Redux Toolkit (RTK) tulee apuun. Sen ensisijaisena tavoitteena on virtaviivaistaa kehityskokemusta työskennellessään Redux valtionhallintakirjasto. Se tarjoaa joukon työkaluja ja apuohjelmia, jotka yksinkertaistavat yleisiä Redux-tehtäviä ja poistavat tarpeettoman lisäkoodin.

Sukellaan nyt Redux Toolkitin käyttöön tilan hallintaan Next.js-sovelluksissa. Aloita luomalla Next.js-projekti ja asentamalla tarvittavat riippuvuudet noudattamalla alla olevia ohjeita.

1. Luo uusi Next.js-projekti paikallisesti suorittamalla alla oleva komento päätteessäsi:

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

2. Kun olet luonut projektin, siirry projektihakemistoon suorittamalla:

   cd next-redux-työkalupakki

3. Lopuksi asenna tarvittavat riippuvuudet projektiisi käyttämällä npm, Node-pakettien hallinta.

   npm asennus @reduxjs/toolkit react-redux

Kun olet määrittänyt Next.js-perusprojektin, olet nyt valmis rakentamaan Next.js-demosovelluksen, joka käyttää Redux Toolkit -ohjelmaa tilanhallintaan.

Löydät tämän projektin koodin tästä GitHub-arkisto.

Määritä Redux Store

Redux-kauppa on keskussäiliö, joka sisältää sovelluksen koko tilan. Se toimii sovelluksen tietojen yhtenä lähteenä ja tarjoaa tilat jokaiselle komponentille. Kauppa on vastuussa tilan hallinnasta ja päivittämisestä toimien ja vähentäjien avulla, mikä helpottaa tilanhallintaa koko sovelluksen ajan.

Jos haluat rakentaa Redux-myymälän, luo uusi redux kansio Next.js-projektisi juurihakemistossa. Luo tämän kansion sisällä uusi store.js tiedosto ja lisää seuraava koodi:

tuonti {configureStore} alkaen'@reduxjs/työkalupakki';
tuonti profileReducer alkaen'./reducers/profileSlice';
viedäoletuksena configureStore({
 supistin:{
 profiili: profileReducer
 }
})

Yllä oleva koodi käyttää configureStore -toiminnolla voit luoda ja määrittää Redux-kaupan. Myymälän kokoonpano sisältää supisinten määrittämisen käyttämällä vähennin esine.

Vähentimet tässä tapauksessa määrittävät, kuinka sovelluksen tilan tulee muuttua vasteena tiettyihin toimiin tai tiettyihin tapahtumiin. Tässä esimerkissä profiili reduktori vastaa profiilin tilaan liittyvien toimien hallinnasta.

Asettamalla Redux-säilön koodi muodostaa ydinrakenteen sovelluksen tilan hallintaan Redux Toolkit -ohjelman avulla.

Määrittele State Slices

Redux-tilaviipaleet ovat komponentteja, jotka kapseloivat logiikan tiettyjen tietokohteiden tilan hallintaan määritetyssä redux-säilön sisällä. Nämä viipaleet luodaan käyttämällä luo Slice toiminto, joka luo automaattisesti supistimen, toimintojen luojat ja toimintotyypit viipaleelle.

Vuonna redux hakemistoon, luo uusi kansio ja anna sille nimi supistimet. Luo tämän kansion sisällä profileSlice.js tiedosto ja lisää seuraava koodi.

tuonti {createSlice} alkaen'@reduxjs/työkalupakki';
konst profileSlice = createSlice({
 nimi: 'profiili',
 aloitustila: {
 nimi: 'ei mitään'
 },
 supistimet: {
 SET_NAME: (tila, toiminta) => {
 tila.nimi = action.payload
 }
}})
viedäkonst {SET_NAME} = profileSlice.actions;
viedäoletuksena profileSlice.reducer;

Annetussa koodissa luo Slice toiminto luo tilaviipaleen käyttäjäprofiilin tilalle. The profileSlice objekti sisältää viipaleen nimen ja sen aloitustila, joka sisältää oletusarvot tilaominaisuuksille.

Lisäksi slice-objekti ottaa myös a supistimet ominaisuus, joka määrittää tämän lohkon toimintokäsittelijät. Tässä tapauksessa yksi vähennystoiminto nimeltään SET_NAME. Pohjimmiltaan, kun kutsut tätä toimintoa, se päivittää osavaltion nimiominaisuuden annetuilla tiedoilla.

The luo Slice toiminto luo toimintojen luojat ja toimintatyypit automaattisesti määritettyjen supistajien perusteella. Viedyt SET_NAME toiminnan luoja ja profileSlice.reducer edustaa luodun toiminnan luojaa ja pienennystoimintoa profiililohkolle.

Luomalla tämän tilalohkon sovelluksen komponentit voivat hyödyntää SET_NAME toiminto ja välitä haluttu hyötykuorma profiilin nimen päivittämiseksi tilassa.

Luo komponentti testataksesi RTK: n tilanhallintatoimintoja

Avaa index.js tiedosto tiedostoon sivuja hakemistosta, poista yleiskuvaus Next.js-koodi ja lisää seuraava koodi.

tuonti tyylejä alkaen'@/styles/Home.module.css'
tuonti {useRef} alkaen'reagoi'
tuonti {useSelector, useDispatch} alkaen'react-redux'
tuonti {SET_NAME} alkaen'../../redux/reducers/profileSlice'
toimintoNäyttönimi(){
konst {name} = useSelector((osavaltio) => state.profile)
palata (

 Olen {name} !!</h1> 
 ) }
viedäoletuksenatoimintoKoti() {
konst inputName = useRef()
konst lähetys = useDispatch()
toimintolähetäNimi() {
konsoli.log (inputName.current.value)
 lähetys (SET_NAME(tulonimi.nykyinen.arvo))
 }
palata (
 <>

'kirjoita nimi' ref={inputName} />
Kirjoita nimi</button>

 </main>
 </>
 )}

Yllä oleva koodi luo ja tekee Next.js-komponentin, jonka avulla käyttäjä voi kirjoittaa nimen ja näyttää annetun nimen selaimen sivulla. Tehokas sovelluksen tilan hallinta Redux Toolkitillä.

The Näyttönimi komponentti hyödyntää useSelector koukku päästäksesi käsiksi nimi ominaisuuden profiilitilasta Redux-kaupassa ja hahmontaa sen sivulla.

Syöttääkseen nimen käyttäjä napsauttaa Kirjoita nimi -painiketta. Tämä kutsuu lähetäNimi toiminto, joka lähettää SET_NAME toiminto, jonka syötearvo on hyötykuorma. Tämä toiminto päivittää nimiominaisuuden profiilitilassa.

Päivitä _app.js-tiedosto

Lopuksi, jotta voit määrittää Redux Toolkitin käytettäväksi koko Next.js-sovelluksessa, sinun on käärittävä sovellus Redux-tarjoaja—tämä varmistaa, että Redux-säilö ja käytettävissä olevat tilat ovat kaikkien osien käytettävissä sovellus.

Avaa _app.js tiedosto ja päivitä se seuraavasti:

tuonti {Provider} alkaen'react-redux'
tuonti tallentaa alkaen'../../redux/store'
viedäoletuksenatoimintoSovellus({ Komponentti, sivuprops }) {
palata (


 </Provider> )
}

Siirry nyt eteenpäin ja käynnistä kehityspalvelin, joka vastaa tekemiäsi muutoksia, ja siirry kohtaan http://localhost: 3000 selaimessasi testataksesi sovellusta.

npm run dev

Tietojen uudelleenhydraation käsittely sivun uudelleenlatauksessa

Tietojen uudelleenkäsittely sivun uudelleenlatauksen yhteydessä viittaa prosessiin, jossa sovelluksen tila palautetaan ja alustetaan, kun sivu latautuu uudelleen. Palvelimen renderöimässä Next.js-sovelluksessa alkuperäinen tila hahmonnetaan ensin palvelimella ja lähetetään sitten asiakkaalle.

Asiakkaalla JavaScript-koodi vastaa sovelluksen tilan rekonstruoimisesta noutamalla ja sarjoittamalla palvelimelta vastaanotetun sarjoitetun tilan.

Näin tekemällä sovellus voi saumattomasti palauttaa tarvittavat tiedot ja säilyttää käyttäjän istunnon. Tämä lähestymistapa välttää tarpeettoman tiedonhaun ja varmistaa keskeytymättömän käyttökokemuksen, kun selaat sivuja tai lataat sovellusta uudelleen.

Yksi Redux Toolkitin käytön eduista Next.js-sovelluksissa on sen yksinkertaisuus ja kehittäjäystävälliset ominaisuudet. Se vähentää merkittävästi toimintojen, supistimien ja varaston määrittämiseen tarvittavaa lisäkoodia, mikä tekee Reduxin kanssa työskentelystä tilanhallinnassa helpompaa ja tehokkaampaa.