Stāvokļa pārvaldība ir mūsdienu tīmekļa lietojumprogrammu pamatā, un tai ir būtiska loma lietotāju datu pārvaldībā un viņu mijiedarbības tveršanā. Neatkarīgi no tā, vai tā ir iepirkumu groza aizpildīšana e-komercijas platformā vai pieteikusies lietotāja sesijas uzturēšana pēc autentifikācijas, šīs darbības ir iespējamas, izmantojot efektīvu stāvokļa pārvaldību.

Būtībā valsts vadītāji ļauj lietotnēm piekļūt datiem un apstrādāt tos, lai iegūtu vēlamos rezultātus. Next.js nodrošina atbalstu vairākiem valsts pārvaldības risinājumiem. Tomēr šajā rokasgrāmatā mēs koncentrēsimies uz Redux rīkkopas izmantošanu valsts pārvaldībai.

Programmā Next.js stāvokļa pārvaldība parasti ietver divu veidu stāvokļus: globālo stāvokli un komponenta stāvokli. Globālais stāvoklis satur informāciju, ko koplieto visi lietojumprogrammas komponenti, piemēram, lietotāja autentifikācijas statuss, savukārt komponenta stāvoklis saglabā datus, kas raksturīgi atsevišķiem komponentiem.

Gan globālajam, gan komponentu stāvoklim ir būtiska loma lietojumprogrammas vispārējā stāvokļa pārvaldībā, veicinot efektīvu datu apstrādi.

Reduxis ir plaši izmantots kā valsts pārvaldības risinājums dažādi JavaScript ietvari. Tomēr tas var radīt sarežģījumus, jo īpaši mazākiem projektiem.

Viens no izplatītākajiem trūkumiem ir nepieciešamība rakstīt atkārtotu standarta kodu, lai definētu darbību veidus, darbību veidotājus un reduktorus. Tas var palielināt koda dublēšanos.

Lai pārvarētu šos izaicinājumus, Redux rīkkopa (RTK) nāk palīgā. Tās galvenais mērķis ir racionalizēt izstrādes pieredzi, strādājot ar Redux valsts pārvaldes bibliotēka. Tas nodrošina rīku un utilītu kopu, kas vienkāršo bieži sastopamos Redux uzdevumus, novēršot vajadzību pēc pārmērīga standarta koda.

Tagad pievērsīsimies Redux rīkkopas izmantošanai, lai pārvaldītu Next.js lietojumprogrammu stāvokli. Lai sāktu, izveidojiet Next.js projektu un instalējiet vajadzīgās atkarības, veicot tālāk norādītās darbības.

1. Izveidojiet jaunu Next.js projektu lokāli, terminālī izpildot tālāk norādīto komandu:

   npx create-next-app@latest next-redux-rīku komplekts

2. Pēc projekta izveides pārejiet uz projekta direktoriju, izpildot:

   cd next-redux-rīkkopa

3. Visbeidzot, instalējiet vajadzīgās atkarības savā projektā, izmantojot npm, mezgla pakotņu pārvaldnieks.

   npm instalējiet @reduxjs/toolkit react-redux

Kad esat iestatījis pamata Next.js projektu, tagad esat gatavs izveidot demo lietojumprogrammu Next.js, kas izmanto Redux Toolkit valsts pārvaldībai.

Jūs varat atrast šī projekta kodu GitHub repozitorijs.

Konfigurējiet Redux veikalu

Redux veikals ir centrālais konteiners, kurā ir viss lietojumprogrammas stāvoklis. Tas kalpo kā vienīgais lietojumprogrammas datu avots, nodrošinot katra komponenta stāvokļus. Veikals ir atbildīgs par stāvokļa pārvaldību un atjaunināšanu, izmantojot darbības un samazinātājus, atvieglojot stāvokļa pārvaldību visā lietojumprogrammā.

Lai izveidotu Redux veikalu, izveidojiet jaunu redux mapi sava Next.js projekta saknes direktorijā. Šajā mapē izveidojiet jaunu veikals.js failu un pievienojiet šādu kodu:

imports {configureStore} no'@reduxjs/rīkkopa';
imports profilsReducētājs no'./reducers/profileSlice';
eksportētnoklusējuma configureStore({
 reduktors:{
 profils: profileReducer
 }
})

Iepriekš minētais kods tiek izmantots configureStore funkciju, lai izveidotu un konfigurētu Redux veikalu. Veikala konfigurācijā ietilpst reduktoru norādīšana, izmantojot reduktors objektu.

Reducētāji šajā gadījumā norāda, kā lietojumprogrammas stāvoklim vajadzētu mainīties, reaģējot uz noteiktām darbībām vai noteiktiem notikumiem. Šajā piemērā profils reduktors ir atbildīgs par darbību, kas saistītas ar profila stāvokli, pārvaldību.

Iestatot Redux veikalu, kods izveido pamata struktūru lietojumprogrammas stāvokļa pārvaldībai, izmantojot Redux Toolkit.

Definējiet stāvokļa šķēles

Redux stāvokļa šķēles ir komponenti, kas iekapsulē loģiku konkrētu datu vienumu stāvokļa pārvaldībai konfigurētajā redux krātuvē. Šīs šķēles tiek izveidotas, izmantojot izveidot Šķēli funkcija, kas automātiski ģenerē šķēlei reduktoru, darbību veidotājus un darbību veidus.

Iekš redux direktorijā, izveidojiet jaunu mapi un piešķiriet tai nosaukumu reduktori. Šajā mapē izveidojiet profileSlice.js failu un pievienojiet šādu kodu.

imports {createSlice} no'@reduxjs/rīkkopa';
konst profileSlice = createSlice({
 nosaukums: 'profils',
 sākotnējais stāvoklis: {
 nosaukums: 'neviens'
 },
 reduktori: {
 SET_NAME: (stāvoklis, darbība) => {
 state.name = action.payload
 }
}})
eksportētkonst {SET_NAME} = profileSlice.actions;
eksportētnoklusējuma profileSlice.reducer;

Norādītajā kodā izveidot Šķēli funkcija izveido stāvokļa šķēli lietotāja profila stāvoklim. The profils Šķēle objekts ietver šķēles nosaukumu un tā nosaukumu sākotnējais stāvoklis, kurā ir ietvertas stāvokļa rekvizītu noklusējuma vērtības.

Turklāt šķēles objekts arī uzņem a reduktori rekvizītu, kas definē darbību apdarinātājus šai sadaļai. Šajā gadījumā tiek nosaukta viena reduktora funkcija SET_NAME. Būtībā, izsaucot šo funkciju, tā atjauninās štata nosaukuma rekvizītu ar sniegtajiem datiem.

The izveidot Šķēli funkcija automātiski ģenerē darbību veidotājus un darbību veidus, pamatojoties uz definētajiem reduktoriem. Eksportētais SET_NAME darbības veidotājs un profileSlice.reducer apzīmē ģenerēto darbību veidotāju un profila šķēluma reducēšanas funkciju.

Izveidojot šo stāvokļa daļu, lietojumprogrammas komponenti var izmantot SET_NAME darbību un nododiet vajadzīgo kravnesību, lai atjauninātu profila nosaukumu stāvoklī.

Izveidojiet komponentu, lai pārbaudītu RTK stāvokļa pārvaldības funkcionalitāti

Atveriet index.js failu mapē lapas direktorijā, izdzēsiet standarta Next.js kodu un pievienojiet šādu kodu.

imports stilus no"@/styles/Home.module.css"
imports {useRef} no'reaģēt'
imports {useSelector, useDispatch} no'react-redux'
imports {SET_NAME} no"../../redux/reducers/profileSlice"
funkcijuParādāmais nosaukums(){
konst {name} = useSelector((Valsts) => state.profils)
atgriezties (

 Es esmu {name} !!</h1> 
 ) }
eksportētnoklusējumafunkcijuMājas() {
konst inputName = useRef()
konst nosūtīt = useDispatch()
funkcijusubmitName() {
konsole.log (inputName.current.value)
 nosūtīšana (SET_NAME(inputName.current.value))
 }
atgriezties (
 <>

'ievadiet vārdu' ref={inputName} />
Ievadiet vārdu</button>

 </main>
 </>
 )}

Iepriekš minētais kods izveido un atveido Next.js komponentu, kas ļauj lietotājam ievadīt nosaukumu un parādīt norādīto nosaukumu pārlūkprogrammas lapā. Efektīvi lietojumprogrammas stāvokļa pārvaldīšana, izmantojot Redux Toolkit.

The Parādāmais nosaukums komponents izmanto useSelector āķis, lai piekļūtu nosaukums rekvizītu no profila stāvokļa Redux veikalā un atveido to lapā.

Lai ievadītu nosaukumu, lietotājs noklikšķina uz Ievadiet vārdu pogu. Tas izsauc submitName funkcija, kas nosūta SET_NAME darbība ar ievades vērtību kā lietderīgo slodzi. Šī darbība profila stāvoklī atjaunina nosaukuma rekvizītu.

Atjauniniet failu _app.js

Visbeidzot, lai konfigurētu Redux Toolkit lietošanai visā Next.js lietojumprogrammā, lietojumprogramma ir jāietver ar Redux nodrošinātājs — tas nodrošina, ka Redux veikals un pieejamie stāvokļi ir pieejami visiem komponentiem pieteikumu.

Atveriet _app.js failu un atjauniniet to šādi:

imports {Provider} no'react-redux'
imports veikals no"../../redux/veikals"
eksportētnoklusējumafunkcijuApp({ Component, pageProps }) {
atgriezties (


 </Provider> )
}

Tagad turpiniet un palaidiet izstrādes serveri, lai atspoguļotu jūsu veiktās izmaiņas, un pārejiet uz http://localhost: 3000 pārlūkprogrammā, lai pārbaudītu lietojumprogrammu.

npm palaist dev

Datu rehidratācijas apstrāde lapas atkārtotas ielādes laikā

Datu rehidratācija lapas atkārtotas ielādes laikā attiecas uz lietojumprogrammas stāvokļa atjaunošanas un inicializācijas procesu, kad lapa tiek atkārtoti ielādēta. Servera renderētā Next.js lietojumprogrammā sākotnējais stāvoklis vispirms tiek renderēts serverī un pēc tam nosūtīts klientam.

Klientā JavaScript kods ir atbildīgs par lietojumprogrammas stāvokļa rekonstrukciju, izgūstot un deserializējot no servera saņemto serializēto stāvokli.

To darot, lietojumprogramma var nemanāmi atjaunot nepieciešamos datus un saglabāt lietotāja sesiju. Šī pieeja ļauj izvairīties no nevajadzīgas datu ielādes un nodrošina nepārtrauktu lietotāja pieredzi, pārvietojoties starp lapām vai atkārtoti ielādējot lietojumprogrammu.

Viena no Redux Toolkit izmantošanas priekšrocībām Next.js lietojumprogrammās ir tā vienkāršība un izstrādātājiem draudzīgas funkcijas. Tas ievērojami samazina darbību, reduktoru un veikala konfigurācijas definēšanai nepieciešamo pamatkodu, padarot darbu ar Redux vienkāršāku un efektīvāku stāvokļa pārvaldībā.