Būsenos valdymas yra šiuolaikinių žiniatinklio programų pagrindas, atliekantis gyvybiškai svarbų vaidmenį tvarkant vartotojų duomenis ir fiksuojant jų sąveiką. Nesvarbu, ar tai būtų pirkinių krepšelio užpildymas elektroninės prekybos platformoje, ar prisijungusio vartotojo seanso palaikymas po autentifikavimo, šie veiksmai yra įmanomi dėl efektyvaus būsenos valdymo.

Iš esmės valstybės vadovai leidžia programoms pasiekti ir apdoroti duomenis, kad būtų pasiekti norimi rezultatai. Next.js teikia kelių būsenos valdymo sprendimų palaikymą. Tačiau šiame vadove daugiausia dėmesio skirsime „Redux Toolkit“ naudojimui valstybės valdymui.

Next.js programose būsenos valdymas paprastai apima dviejų tipų būsenas: pasaulinę būseną ir komponento būseną. Visuotinėje būsenoje yra informacija, kuria dalijasi visi programos komponentai, pvz., vartotojo autentifikavimo būsena, o komponento būsena saugo atskirų komponentų duomenis.

Tiek pasaulinė, tiek komponentinė būsena atlieka esminį vaidmenį valdant bendrą programos būseną, palengvinant efektyvų duomenų tvarkymą.

Reduxis plačiai naudojamas kaip valstybės valdymo sprendimas įvairios JavaScript sistemos. Tačiau tai gali sukelti sudėtingumo, ypač mažesniems projektams.

Vienas iš bendrų trūkumų yra būtinybė rašyti pasikartojantį pagrindinį kodą, kad būtų galima apibrėžti veiksmų tipus, veiksmo kūrėjus ir reduktorius. Dėl to gali padidėti kodo perteklius.

Norėdami įveikti šiuos iššūkius, Redux įrankių rinkinys (RTK) ateina į pagalbą. Ja daugiausia siekiama supaprastinti kūrimo patirtį dirbant su Redux valstybės valdymo biblioteka. Jame pateikiamas įrankių ir paslaugų rinkinys, kuris supaprastina įprastas Redux užduotis ir pašalina perteklinio kodo poreikį.

Dabar pasinerkime į „Redux Toolkit“ naudojimą „Next.js“ programų būsenai valdyti. Norėdami pradėti, sukurkite Next.js projektą ir įdiekite reikiamas priklausomybes atlikdami toliau nurodytus veiksmus.

1. Sukurkite naują Next.js projektą vietoje, vykdydami toliau pateiktą komandą savo terminale:

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

2. Sukūrę projektą, eikite į projekto katalogą vykdydami:

   cd next-redux-toolkit

3. Galiausiai įdiekite reikiamas priklausomybes savo projekte naudodami npm, mazgo paketų tvarkyklė.

   npm įdiegti @reduxjs/toolkit react-redux

Sukūrę pagrindinį Next.js projektą, dabar esate pasirengę sukurti demonstracinę Next.js programą, kuri naudoja Redux Toolkit būsenai valdyti.

Šio projekto kodą rasite čia GitHub saugykla.

Sukonfigūruokite „Redux Store“.

„Redux“ parduotuvė yra centrinis konteineris, kuriame yra visa programos būsena. Jis naudojamas kaip vienintelis programos duomenų šaltinis, suteikiantis kiekvieno komponento būsenas. Parduotuvė yra atsakinga už būsenos valdymą ir atnaujinimą per veiksmus ir reduktorius, palengvinančius valstybės valdymą visoje programoje.

Norėdami sukurti „Redux“ parduotuvę, sukurkite naują redux aplanką savo Next.js projekto šakniniame kataloge. Šiame aplanke sukurkite naują store.js failą ir pridėkite šį kodą:

importuoti {configureStore} iš„@reduxjs/toolkit“;
importuoti profilis Reduktorius iš„./reducers/profileSlice“;
eksportuotinumatytas configureStore({
 reduktorius:{
 profilis: profileReducer
 }
})

Aukščiau pateiktas kodas naudojamas configureStore funkcija „Redux“ parduotuvei sukurti ir konfigūruoti. Parduotuvės konfigūracija apima reduktorių nurodymus naudojant reduktorius objektas.

Reduktoriai šiuo atveju nurodo, kaip programos būsena turėtų pasikeisti reaguojant į konkrečius veiksmus ar nurodytus įvykius. Šiame pavyzdyje profilį reduktorius yra atsakingas už veiksmų, susijusių su profilio būsena, valdymą.

Nustatant „Redux“ parduotuvę, kodas sukuria pagrindinę programos būsenos valdymo struktūrą naudojant „Redux Toolkit“.

Apibrėžkite būsenos pjūvius

Redux būsenos pjūviai yra komponentai, apimantys konkrečių duomenų elementų būsenos valdymo logiką sukonfigūruotoje redux saugykloje. Šios skiltelės sukuriamos naudojant sukurti Slice funkcija, kuri automatiškai generuoja pjūvio reduktorius, veiksmo kūrėjus ir veiksmų tipus.

Viduje redux kataloge, sukurkite naują aplanką ir pavadinkite jį reduktoriai. Šiame aplanke sukurkite profileSlice.js failą ir pridėkite šį kodą.

importuoti {createSlice} iš„@reduxjs/toolkit“;
konst profileSlice = createSlice({
 vardas: 'profilis',
 pradinė būsena: {
 vardas: 'nė vienas'
 },
 reduktoriai: {
 SET_NAME: (būsena, veiksmas) => {
 state.name = action.payload
 }
}})
eksportuotikonst {SET_NAME} = profileSlice.actions;
eksportuotinumatytas profileSlice.reducer;

Pateiktame kode, sukurti Slice funkcija sukuria vartotojo profilio būsenos būsenos pjūvį. The profilisSlice objektas apima pjūvio pavadinimą ir jo pavadinimą pradinė būsena, kuriame yra numatytosios būsenos ypatybių reikšmės.

Be to, pjūvio objektas taip pat paima a reduktoriai ypatybę, kuri apibrėžia šios dalies veiksmų tvarkykles. Šiuo atveju viena reduktoriaus funkcija pavadinta SET_NAME. Iš esmės, kai iškviečiate šią funkciją, ji atnaujins valstybės pavadinimo ypatybę pateiktais duomenimis.

The sukurti Slice funkcija automatiškai generuoja veiksmų kūrėjus ir veiksmų tipus pagal apibrėžtus reduktorius. Eksportuotas SET_NAME veiksmo kūrėjas ir profilisSlice.reduktorius reiškia sugeneruotą veiksmo kūrėją ir profilio pjūvio reduktoriaus funkciją.

Sukūrę šią būsenos dalį, programos komponentai gali naudoti SET_NAME veiksmą ir perduoti norimą naudingą apkrovą, kad atnaujintumėte profilio pavadinimą būsenoje.

Sukurkite komponentą RTK būsenos valdymo funkcionalumui išbandyti

Atidaryk index.js failą puslapių kataloge, ištrinkite pagrindinį Next.js kodą ir pridėkite šį kodą.

importuoti stiliai iš„@/styles/Home.module.css“
importuoti {useRef} iš'reaguoti'
importuoti {useSelector, useDispatch} iš'react-redux'
importuoti {SET_NAME} iš„../../redux/reducers/profileSlice“
funkcijaRodomas pavadinimas(){
konst {vardas} = useSelector((valstybė) => state.profile)
grąžinti (

 Aš esu {vardas} !!</h1> 
 ) }
eksportuotinumatytasfunkcijaNamai() {
konst inputName = useRef()
konst dispatch = useDispatch()
funkcijaPateiktiVardas() {
konsolė.log (inputName.current.value)
 išsiuntimas (SET_NAME(inputName.current.value))
 }
grąžinti (
 <>

'Įveskite vardą' ref={inputName} />
Įveskite vardą</button>

 </main>
 </>
 )}

Aukščiau pateiktas kodas sukuria ir pateikia Next.js komponentą, kuris leidžia vartotojui įvesti pavadinimą ir pateikti pateiktą pavadinimą naršyklės puslapyje. Efektyviai valdykite programos būseną naudodami „Redux Toolkit“.

The Rodomas pavadinimas komponentas naudoja useSelector kablys, kad pasiektumėte vardas ypatybę iš profilio būsenos Redux parduotuvėje ir pateikia ją puslapyje.

Norėdami įvesti pavadinimą, vartotojas spusteli Įveskite vardą mygtuką. Tai iššaukia PateiktiVardas funkcija, kuri išsiunčia SET_NAME veiksmas su įvesties verte kaip naudingoji apkrova. Šis veiksmas atnaujina vardo ypatybę profilio būsenoje.

Atnaujinkite failą _app.js

Galiausiai, norėdami sukonfigūruoti Redux Toolkit naudoti visoje Next.js programoje, turite apvynioti programą su „Redux“ teikėjas – tai užtikrina, kad „Redux“ saugykla ir galimos būsenos būtų prieinamos visiems komponentams taikymas.

Atidaryk _app.js failą ir atnaujinkite jį taip:

importuoti {Teikėjas} iš'react-redux'
importuoti parduotuvė iš„../../redux/store“
eksportuotinumatytasfunkcijaProgramėlė({ Komponentas, puslapio rekvizitai }) {
grąžinti (


 </Teikėjas> )
}

Dabar eikite į priekį ir paleiskite kūrimo serverį, kad atspindėtų jūsų atliktus pakeitimus, ir eikite į http://localhost: 3000 naršyklėje, kad išbandytumėte programą.

npm paleisti dev

Duomenų rehidratacijos tvarkymas iš naujo įkeliant puslapį

Duomenų hidratacija iš naujo įkeliant puslapį reiškia programos būsenos atkūrimo ir inicijavimo procesą, kai puslapis įkeliamas iš naujo. Serverio pateikiamoje Next.js programoje pradinė būsena pirmiausia pateikiama serveryje, o tada siunčiama klientui.

Kliento „JavaScript“ kodas yra atsakingas už programos būsenos atkūrimą, nuskaitant ir deserializuojant iš serverio gautą nuosekliąją būseną.

Tai darydama programa gali sklandžiai atkurti reikiamus duomenis ir išsaugoti vartotojo seansą. Šis metodas leidžia išvengti nereikalingo duomenų gavimo ir užtikrina nepertraukiamą vartotojo patirtį naršant tarp puslapių arba iš naujo įkeliant programą.

Vienas iš Redux Toolkit naudojimo Next.js programose pranašumų yra jo paprastumas ir kūrėjams patogios funkcijos. Tai žymiai sumažina pagrindinį kodą, reikalingą veiksmams, reduktoriams ir parduotuvės konfigūracijai apibrėžti, todėl bus lengviau ir efektyviau dirbti su Redux valdant būseną.