Upravljanje stanjem nalazi se u srcu modernih web aplikacija, igrajući ključnu ulogu u upravljanju korisničkim podacima i bilježenju njihovih interakcija. Bilo da se radi o popunjavanju košarice za kupnju na platformi za e-trgovinu ili održavanju sesije prijavljenog korisnika nakon autentifikacije, te radnje omogućene su učinkovitim upravljanjem stanjem.

U biti, upravitelji stanja dopuštaju aplikacijama pristup i obradu podataka kako bi proizveli željene rezultate. Next.js pruža podršku za više rješenja upravljanja stanjem. Međutim, u ovom ćemo se vodiču usredotočiti na korištenje Redux Toolkita za upravljanje stanjem.

U Next.js aplikacijama upravljanje stanjem obično uključuje dvije vrste stanja: globalno stanje i stanje komponente. Globalno stanje sadrži informacije koje dijele sve komponente u aplikaciji, kao što je status autentifikacije korisnika, dok stanje komponente pohranjuje podatke specifične za pojedinačne komponente.

I globalno stanje i stanje komponente igraju vitalne uloge u upravljanju cjelokupnim stanjem aplikacije, olakšavajući učinkovito rukovanje podacima.

Reduxis je široko prihvaćen kao rješenje za upravljanje stanjem razni JavaScript okviri. Međutim, može dovesti do složenosti, osobito za manje projekte.

Jedan uobičajeni nedostatak je potreba za pisanjem ponavljajućeg šablonskog koda za definiranje tipova radnji, kreatora akcija i reduktora. To može dovesti do povećane redundantnosti koda.

Da biste prevladali ove izazove, Redux Toolkit (RTK) priskače u pomoć. Uglavnom ima za cilj pojednostaviti razvojno iskustvo pri radu s Knjižnica za upravljanje stanjem Redux. Omogućuje skup alata i uslužnih programa koji pojednostavljuju uobičajene Redux zadatke, eliminirajući potrebu za pretjeranim standardnim kodom.

Sada zaronimo u korištenje Redux Toolkita za upravljanje stanjem u Next.js aplikacijama. Za početak izradite Next.js projekt i instalirajte potrebne ovisnosti slijedeći korake u nastavku.

1. Stvorite novi Next.js projekt lokalno pokretanjem donje naredbe na vašem terminalu:

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

2. Nakon izrade projekta, idite u direktorij projekta tako što ćete pokrenuti:

   cd next-redux-toolkit

3. Na kraju, instalirajte potrebne ovisnosti u svoj projekt pomoću npm, upravitelj paketa Node.

   npm instalirajte @reduxjs/toolkit react-redux

Nakon što postavite osnovni Next.js projekt, sada ste spremni izgraditi demo Next.js aplikaciju koja koristi Redux Toolkit za upravljanje stanjem.

Kôd ovog projekta možete pronaći ovdje GitHub spremište.

Konfigurirajte Redux Store

Redux trgovina središnji je spremnik koji sadrži cijelo stanje aplikacije. Služi kao jedini izvor podataka aplikacije, pružajući stanja svakoj komponenti. Trgovina je odgovorna za upravljanje i ažuriranje stanja putem radnji i reduktora—olakšavajući upravljanje stanjem u cijeloj aplikaciji.

Da biste izgradili Redux trgovinu, napravite novu redux mapu u korijenskom direktoriju vašeg projekta Next.js. Unutar ove mape stvorite novu trgovina.js datoteku i dodajte sljedeći kod:

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

Gornji kod koristi configureStore funkcija za stvaranje i konfiguriranje Redux trgovine. Konfiguracija trgovine uključuje određivanje reduktora pomoću reduktor objekt.

Reduktori, u ovom slučaju, određuju kako bi se stanje aplikacije trebalo promijeniti kao odgovor na određene akcije ili određene događaje. U ovom primjeru, profil reduktor je odgovoran za upravljanje radnjama koje se odnose na stanje profila.

Postavljanjem Redux trgovine, kod uspostavlja temeljnu strukturu za upravljanje stanjem aplikacije pomoću Redux Toolkita.

Definirajte državne odsječke

Odsječci Redux stanja su komponente koje sažimaju logiku za upravljanje stanjem specifičnih podatkovnih stavki unutar konfigurirane redux trgovine. Ove su kriške izrađene pomoću createSlice koja automatski generira reduktor, kreatore radnji i vrste akcija za odsječak.

u redux imenik, stvorite novu mapu i dajte joj naziv reduktori. Unutar ove mape stvorite profileSlice.js datoteku i dodajte sljedeći kod.

uvoz {createSlice} iz'@reduxjs/toolkit';
konst profileSlice = createSlice({
 Ime: 'profil',
 početno stanje: {
 Ime: 'ništa'
 },
 reduktori: {
 SET_NAME: (stanje, djelovanje) => {
 state.name = action.payload
 }
}})
izvozkonst {SET_NAME} = profileSlice.actions;
izvozzadano profileSlice.reducer;

U navedenom kodu, createSlice funkcija stvara odsječak stanja za stanje korisničkog profila. The profileSlice objekt uključuje naziv odsječka i njegov početno stanje, koji sadrži zadane vrijednosti za svojstva stanja.

Osim toga, objekt slice također prima a reduktori svojstvo koje definira rukovatelje radnjom za ovaj odsječak. U ovom slučaju, jedna funkcija reduktora imenovana SET_NAME. U suštini, nakon što pozovete ovu funkciju, ona će ažurirati svojstvo naziva države danim podacima.

The createSlice funkcija automatski generira kreatore radnji i tipove akcija na temelju definiranih reduktora. Izvezeni SET_NAME kreator akcije i profileSlice.reduktor predstavlja generirani kreator radnje i reduktorsku funkciju za profilni odsječak.

Stvaranjem ovog odsječka stanja, komponente unutar aplikacije mogu koristiti SET_NAME akciju i proslijedite željeni korisni teret za ažuriranje naziva profila u stanju.

Napravite komponentu za testiranje funkcionalnosti upravljanja stanjem RTK-a

Otvori index.js datoteka u stranice direktorij, izbrišite predložak Next.js koda i dodajte sljedeći kod.

uvoz stilovi iz'@/styles/Home.module.css'
uvoz {useRef} iz'reagirati'
uvoz {useSelector, useDispatch} iz'react-redux'
uvoz {SET_NAME} iz'../../redux/reducers/profileSlice'
funkcijaDisplayName(){
konst {name} = useSelector((država) => stanje.profil)
povratak (

 Ja sam {name} !!</h1> 
 ) }
izvozzadanofunkcijaDom() {
konst inputName = useRef()
konst otprema = useDispatch()
funkcijaposlatiNaziv() {
konzola.log (inputName.current.value)
 slanje (SET_NAME(inputName.current.value))
 }
povratak (
 <>

'unesi ime' ref={inputName} />
Unesite ime</button>

 </main>
 </>
 )}

Gornji kod stvara i renderira Next.js komponentu koja korisniku omogućuje unos imena i prikaz navedenog imena na stranici preglednika. Učinkovito, upravljanje stanjem aplikacije pomoću Redux Toolkita.

The DisplayName komponenta koristi useSelector kuka za pristup Ime svojstvo iz stanja profila u Redux trgovini i prikazuje ga na stranici.

Za unos imena, korisnik klikne na Unesite ime dugme. Ovo priziva poslatiNaziv funkcija koja otprema SET_NAME radnja s ulaznom vrijednošću kao korisnim opterećenjem. Ova radnja ažurira svojstvo naziva u stanju profila.

Ažurirajte datoteku _app.js

Na kraju, da biste konfigurirali Redux Toolkit za korištenje u cijeloj Next.js aplikaciji, trebate omotati aplikaciju s Redux provider—ovo osigurava da su Redux store i dostupna stanja dostupni svim komponentama u primjena.

Otvori _app.js datoteku i ažurirajte je na sljedeći način:

uvoz {Provider} iz'react-redux'
uvoz trgovina iz'../../redux/store'
izvozzadanofunkcijaaplikacija({ Komponenta, pageProps }) {
povratak (


 </Provider> )
}

Sada samo naprijed i pokrenite razvojni poslužitelj kako bi odražavao promjene koje ste napravili i dođite do njega http://localhost: 3000 u svom pregledniku da testirate aplikaciju.

npm run dev

Rukovanje rehidracijom podataka pri ponovnom učitavanju stranice

Rehidracija podataka pri ponovnom učitavanju stranice odnosi se na proces vraćanja i pokretanja stanja aplikacije kada se stranica ponovno učitava. U Next.js aplikaciji koju prikazuje poslužitelj, početno stanje prvo se prikazuje na poslužitelju, a zatim se šalje klijentu.

Na klijentu je JavaScript kod odgovoran za rekonstrukciju stanja aplikacije dohvaćanjem i deserijalizacijom serijaliziranog stanja primljenog od poslužitelja.

Na taj način aplikacija može neprimjetno vratiti potrebne podatke i sačuvati korisničku sesiju. Ovaj pristup izbjegava nepotrebno dohvaćanje podataka i osigurava neometano korisničko iskustvo prilikom kretanja između stranica ili ponovnog učitavanja aplikacije.

Jedna od prednosti korištenja Redux Toolkita u Next.js aplikacijama je njegova jednostavnost i značajke prilagođene programerima. Značajno smanjuje standardni kod potreban za definiranje akcija, reduktora i konfiguracije pohrane, čineći lakšim i učinkovitijim rad s Reduxom u upravljanju stanjem.