Olekuhaldus on tänapäevaste veebirakenduste keskmes, mängides olulist rolli kasutajate andmete haldamisel ja nende suhtluse jäädvustamisel. Olgu selleks siis ostukorvi täitmine e-kaubanduse platvormil või sisselogitud kasutaja seansi säilitamine pärast autentimist – need toimingud on võimalikud tänu tõhusale olekuhaldusele.

Põhimõtteliselt lubavad riigihaldurid rakendustel soovitud tulemuste saavutamiseks andmetele juurde pääseda ja neid töödelda. Next.js pakub tuge mitmele olekuhalduslahendusele. Kuid selles juhendis keskendume Reduxi tööriistakomplekti kasutamisele riigihalduses.

Rakendustes Next.js hõlmab olekuhaldus tavaliselt kahte tüüpi olekuid: globaalne olek ja komponendi olek. Globaalne olek sisaldab teavet, mida jagavad rakenduse kõik komponendid, näiteks kasutaja autentimise olek, samas kui komponendi olek salvestab üksikute komponentide spetsiifilised andmed.

Nii globaalsed kui ka komponentide olekud mängivad olulist rolli rakenduse üldise oleku haldamisel, hõlbustades tõhusat andmetöötlust.

Reduxis on riigihalduslahendusena laialt levinud erinevad JavaScripti raamistikud. See võib aga tekitada keerukust, eriti väiksemate projektide puhul.

Üheks levinud puuduseks on vajadus kirjutada korduvat standardkoodi, et määratleda toimingutüübid, tegevuse loojad ja reduktorid. See võib põhjustada koodi suurenenud liiasust.

Nendest väljakutsetest üle saamiseks Reduxi tööriistakomplekt (RTK) tuleb appi. Selle eesmärk on peamiselt täiustada arenduskogemust rakendusega töötamisel Reduxi riigihalduse raamatukogu. See pakub komplekti tööriistu ja utiliite, mis lihtsustavad tavapäraseid Reduxi ülesandeid, välistades vajaduse liigse koodikoodi järele.

Nüüd uurime Reduxi tööriistakomplekti kasutamist Next.js-i rakenduste oleku haldamiseks. Alustamiseks looge projekt Next.js ja installige vajalikud sõltuvused, järgides alltoodud samme.

1. Looge kohapeal uus Next.js projekt, käivitades terminalis alloleva käsu:

   npx create-next-app@latest next-redux-tööriistakomplekt

2. Pärast projekti loomist liikuge projekti kataloogi, käivitades:

   cd next-redux-tööriistakomplekt

3. Lõpuks installige oma projekti vajalikud sõltuvused kasutades npm, sõlme paketihaldur.

   npm install @reduxjs/toolkit react-redux

Kui olete põhiprojekti Next.js seadistanud, olete nüüd valmis koostama demorakenduse Next.js, mis kasutab olekuhalduseks Reduxi tööriistakomplekti.

Selle projekti koodi leiate siit GitHubi hoidla.

Seadistage Reduxi pood

Reduxi pood on keskne konteiner, mis sisaldab kogu rakenduse olekut. See toimib rakenduse andmete ainsa allikana, pakkudes iga komponendi olekuid. Kauplus vastutab oleku haldamise ja värskendamise eest toimingute ja reduktorite kaudu – hõlbustades oleku haldamist kogu rakenduse ulatuses.

Reduxi poe loomiseks looge uus redux kausta oma Next.js projekti juurkataloogis. Looge selles kaustas uus store.js faili ja lisage järgmine kood:

importida {configureStore} alates'@reduxjs/tööriistakomplekt';
importida profiil Reduktor alates'./reducers/profileSlice';
eksportidavaikimisi configureStore({
 reduktor:{
 profiil: profileReducer
 }
})

Ülaltoodud kood kasutab configureStore funktsiooni Reduxi poe loomiseks ja konfigureerimiseks. Poe konfiguratsioon sisaldab reduktorite määramist, kasutades reduktor objektiks.

Sel juhul määravad reduktorid, kuidas rakenduse olek peaks muutuma vastuseks konkreetsetele tegevustele või määratud sündmustele. Selles näites on profiil reduktor vastutab profiili olekuga seotud toimingute haldamise eest.

Reduxi poe seadistamisel loob kood põhistruktuuri rakenduse oleku haldamiseks Reduxi tööriistakomplekti abil.

Määratle olekulõigud

Reduxi olekulõigud on komponendid, mis kapseldavad konfigureeritud reduksisalves konkreetsete andmeüksuste oleku haldamise loogikat. Need viilud luuakse kasutades loo Slice funktsioon, mis genereerib lõigu jaoks automaatselt redutseerija, tegevuse loojad ja toimingutüübid.

Aastal redux kataloogi, looge uus kaust ja andke sellele nimi reduktorid. Looge selles kaustas profileSlice.js faili ja lisage järgmine kood.

importida {createSlice} alates'@reduxjs/tööriistakomplekt';
konst profileSlice = createSlice({
 nimi: 'profiil',
 esialgne olek: {
 nimi: 'mitte ükski'
 },
 reduktorid: {
 SET_NAME: (olek, tegevus) => {
 olek.nimi = action.payload
 }
}})
eksportidakonst {SET_NAME} = profileSlice.actions;
eksportidavaikimisi profileSlice.reduktor;

Pakutud koodis on loo Slice funktsioon loob kasutajaprofiili oleku jaoks olekulõigu. The profileSlice objekt sisaldab lõigu nime ja selle esialgne olek, mis sisaldab oleku atribuutide vaikeväärtusi.

Lisaks võtab viilobjekt ka a reduktorid atribuut, mis määrab selle lõigu toimingute töötlejad. Sel juhul nimetatakse üks reduktorfunktsioon SET_NAME. Põhimõtteliselt värskendab see funktsiooni kutsumisel osariigi nime atribuuti esitatud andmetega.

The loo Slice funktsioon genereerib tegevuste loojad ja tegevustüübid määratud redutseerijate põhjal automaatselt. Eksporditud SET_NAME tegevuse looja ja profileSlice.reduktor tähistab profiililõigu jaoks loodud tegevuse loojat ja redutseerimisfunktsiooni.

Selle olekulõigu loomisel saavad rakenduse komponendid kasutada SET_NAME toiming ja edastage soovitud kasulik koormus, et värskendada profiili nime olekus.

Looge komponent RTK olekuhalduse funktsionaalsuse testimiseks

Ava index.js faili lehekülgi kataloogist, kustutage kood Next.js ja lisage järgmine kood.

importida stiilid alates'@/styles/Home.module.css'
importida {useRef} alates'reageeri'
importida {useSelector, useDispatch} alates'react-redux'
importida {SET_NAME} alates'../../redux/reducers/profileSlice'
funktsiooniKuvanimi(){
konst {nimi} = useSelector((olek) => state.profile)
tagasi (

 Mina olen {nimi} !!</h1> 
 ) }
eksportidavaikimisifunktsiooniKodu() {
konst inputName = useRef()
konst lähetamine = useDispatch()
funktsiooniEsitaNimi() {
konsool.log (inputName.current.value)
 saatmine (SET_NAME(sisendinimi.praegune.väärtus))
 }
tagasi (
 <>

'sisesta nimi' ref={inputName} />
Sisesta nimi</button>

 </main>
 </>
 )}

Ülaltoodud kood loob ja renderdab komponendi Next.js, mis võimaldab kasutajal sisestada nime ja kuvada antud nime brauseri lehel. Tõhusalt rakenduse oleku haldamine Reduxi tööriistakomplekti abil.

The Kuvanimi komponent kasutab useSelector konks juurdepääsuks nimi atribuut profiili olekust Reduxi poes ja renderdab selle lehel.

Nime sisestamiseks klõpsab kasutaja nuppu Sisestage nimi nuppu. See kutsub esile EsitaNimi funktsioon, mis saadab SET_NAME toiming, mille sisendväärtus on kasulik koormus. See toiming värskendab profiili olekus oleva nime atribuuti.

Värskendage faili _app.js

Lõpuks, et konfigureerida Reduxi tööriistakomplekti kasutamiseks kogu rakenduses Next.js, peate rakenduse pakkima Reduxi pakkuja – see tagab, et Reduxi pood ja saadaolevad olekud on juurdepääsetavad kõikidele rakenduse komponentidele rakendus.

Ava _app.js faili ja värskendage seda järgmiselt:

importida {Pakkuja} alates'react-redux'
importida kauplus alates"../../redux/store"
eksportidavaikimisifunktsiooniRakendus({ Component, pageProps }) {
tagasi (


 </Pakkuja> )
}

Nüüd minge edasi ja käivitage arendusserver, et kajastada tehtud muudatusi, ja navigeerige lehele http://localhost: 3000 brauseris rakenduse testimiseks.

npm käivita dev

Andmete rehüdratsiooni käsitlemine lehe uuesti laadimisel

Andmete taastamine lehe uuesti laadimisel viitab rakenduse oleku taastamise ja lähtestamise protsessile lehe uuesti laadimisel. Serveris renderdatud Next.js-rakenduses renderdatakse algolek esmalt serveris ja saadetakse seejärel kliendile.

Kliendis vastutab JavaScripti kood rakenduse oleku rekonstrueerimise eest, hankides ja deserialiseerides serverist saadud serialiseeritud oleku.

Seda tehes saab rakendus vajalikud andmed sujuvalt taastada ja kasutaja seansi säilitada. Selline lähenemine väldib tarbetut andmete toomist ja tagab katkematu kasutuskogemuse lehtede vahel navigeerimisel või rakenduse uuesti laadimisel.

Üks Redux Toolkiti kasutamise eelistest Next.js rakendustes on selle lihtsus ja arendajasõbralikud funktsioonid. See vähendab oluliselt toimingute, reduktorite ja poe konfiguratsiooni määratlemiseks vajalikku standardkoodi, muutes Reduxiga olekuhalduses töötamise lihtsamaks ja tõhusamaks.