Managementul statului se află în centrul aplicațiilor web moderne, jucând un rol vital în gestionarea datelor utilizatorilor și captarea interacțiunilor acestora. Fie că este vorba de popularea unui coș de cumpărături pe o platformă de comerț electronic sau de menținerea unei sesiuni de utilizator conectat după autentificare, aceste acțiuni sunt posibile printr-un management eficient al statului.

În esență, managerii de stat permit aplicațiilor să acceseze și să proceseze datele pentru a produce rezultatele dorite. Next.js oferă suport pentru mai multe soluții de management de stat. Cu toate acestea, în acest ghid, ne vom concentra pe utilizarea Redux Toolkit pentru managementul statului.

În aplicațiile Next.js, managementul stării implică de obicei două tipuri de stări: stare globală și starea componentelor. Starea globală conține informații partajate de toate componentele din aplicație, cum ar fi starea de autentificare a unui utilizator, în timp ce starea componentei stochează date specifice componentelor individuale.

Atât statele globale, cât și cele ale componentelor joacă un rol vital în gestionarea stării generale a aplicației, facilitând gestionarea eficientă a datelor.

Reduxis a fost adoptată pe scară largă ca soluție de management de stat diverse cadre JavaScript. Cu toate acestea, poate introduce complexități, în special pentru proiecte mai mici.

Un dezavantaj comun este necesitatea de a scrie cod repetitiv pentru a defini tipurile de acțiuni, creatorii de acțiuni și reductorii. Acest lucru poate duce la creșterea redundanței codului.

Pentru a depăși aceste provocări, Setul de instrumente Redux (RTK) vine în ajutor. Acesta își propune în principal să eficientizeze experiența de dezvoltare atunci când lucrează cu Biblioteca de gestionare a stării Redux. Oferă un set de instrumente și utilități care simplifică sarcinile Redux obișnuite, eliminând necesitatea unui cod boilerplate excesiv.

Acum, să ne aprofundăm în utilizarea Redux Toolkit pentru a gestiona starea în aplicațiile Next.js. Pentru a începe, creați un proiect Next.js și instalați dependențele necesare urmând pașii de mai jos.

1. Creați un nou proiect Next.js la nivel local, rulând comanda de mai jos în terminalul dvs.:

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

2. După crearea proiectului, navigați în directorul proiectului rulând:

   cd next-redux-toolkit

3. În cele din urmă, instalați dependențele necesare în proiectul dvs. folosind npm, managerul de pachete Node.

   npm instalează @reduxjs/toolkit react-redux

Odată ce ați configurat un proiect de bază Next.js, sunteți acum gata să construiți o aplicație demonstrativă Next.js care utilizează Redux Toolkit pentru gestionarea statului.

Puteți găsi codul acestui proiect în aceasta Depozitul GitHub.

Configurați magazinul Redux

Un magazin Redux este un container central care deține întreaga stare a aplicației. Acesta servește ca sursă unică a datelor aplicației, oferind stări fiecărei componente. Magazinul este responsabil pentru gestionarea și actualizarea stării prin acțiuni și reductoare — facilitând gestionarea statului în întreaga aplicație.

Pentru a construi un magazin Redux, creați un magazin nou redux folderul din directorul rădăcină al proiectului Next.js. În interiorul acestui folder, creați unul nou magazin.js fișier și adăugați următorul cod:

import {configureStore} din„@reduxjs/toolkit”;
import profileReducer din„./reducers/profileSlice”;
exportMod implicit configureStore({
 reductor:{
 profil: profileReducer
 }
})

Codul de mai sus folosește configureStore funcția de a crea și configura magazinul Redux. Configurația magazinului include specificarea reductoarelor folosind reductor obiect.

Reductoarele, în acest caz, specifică modul în care starea aplicației ar trebui să se schimbe ca răspuns la anumite acțiuni sau evenimente specificate. În acest exemplu, profil reductor este responsabil de gestionarea acțiunilor legate de starea profilului.

Prin configurarea magazinului Redux, codul stabilește structura de bază pentru gestionarea stării aplicației folosind Redux Toolkit.

Definiți secțiunile de stare

Secțiunile de stare Redux sunt componente care încapsulează logica pentru gestionarea stării anumitor elemente de date din depozitul redux configurat. Aceste felii sunt create folosind createSlice funcția, care generează automat reductorul, creatorii de acțiuni și tipurile de acțiuni pentru felie.

În redux director, creați un folder nou și denumiți-l reductoare. În interiorul acestui folder, creați profileSlice.js fișier și adăugați următorul cod.

import {createSlice} din„@reduxjs/toolkit”;
const profileSlice = createSlice({
 Nume: 'profil',
 stare initiala: {
 Nume: 'nici unul'
 },
 reductoare: {
 PUNE UN NUME: (stare, acțiune) => {
 state.name = action.payload
 }
}})
exportconst {SET_NAME} = profileSlice.actions;
exportMod implicit profileSlice.reductor;

În codul furnizat, createSlice funcția creează o secțiune de stare pentru starea profilului utilizatorului. The profileSlice obiectul include numele feliei și a acestuia stare initiala, care conține valorile implicite pentru proprietățile de stare.

În plus, obiectul slice preia și a reductoare proprietate care definește manevrele de acțiune pentru această secțiune. În acest caz, o singură funcție reductor numită PUNE UN NUME. În esență, odată ce apelați această funcție, aceasta va actualiza proprietatea nume a statului cu datele furnizate.

The createSlice funcția generează creatori de acțiuni și tipuri de acțiuni automat pe baza reductorilor definiți. Cel exportat PUNE UN NUME creator de acțiuni și profileSlice.reductor reprezintă creatorul de acțiuni generate și funcția de reducere pentru felia de profil.

Prin crearea acestei secțiuni de stare, componentele din aplicație pot utiliza PUNE UN NUME acțiune și treceți sarcina utilă dorită pentru a actualiza numele profilului în stat.

Creați o componentă pentru a testa funcționalitatea de management de stat a RTK

Deschide index.js dosar în pagini director, ștergeți codul boilerplate Next.js și adăugați următorul cod.

import stiluri din„@/styles/Home.module.css”
import {useRef} din'reacţiona'
import {useSelector, useDispatch} din„react-redux”
import {PUNE UN NUME} din„../../redux/reducers/profileSlice”
funcţieNumele de afișare(){
const {nume} = useSelector((stat) => stat.profil)
întoarcere (

 Eu sunt {nume} !!</h1> 
 ) }
exportMod implicitfuncţieAcasă() {
const inputName = useRef()
const dispatch = useDispatch()
funcţiesubmitName() {
consolă.log (inputName.current.value)
 expediere (SET_NAME(inputName.current.value))
 }
întoarcere (
 <>

'Introdu numele' ref={inputName} />
Introduceți numele</button>

 </main>
 </>
 )}

Codul de mai sus creează și redă o componentă Next.js care permite utilizatorului să introducă un nume și să afișeze numele furnizat pe pagina browserului. În mod eficient, gestionarea stării aplicației folosind Redux Toolkit.

The Numele de afișare componenta utilizează utilizați Selector cârlig pentru a accesa Nume proprietate din starea profilului din magazinul Redux și o redă pe pagină.

Pentru a introduce un nume, un utilizator face clic pe Introdu numele buton. Aceasta invocă submitName funcția, care trimite PUNE UN NUME acțiune cu valoarea de intrare ca sarcină utilă. Această acțiune actualizează proprietatea nume în starea profilului.

Actualizați fișierul _app.js

În cele din urmă, pentru a configura Redux Toolkit pentru a fi utilizat în întreaga aplicație Next.js, trebuie să împachetați aplicația cu Furnizor Redux - acest lucru asigură că magazinul Redux și stările disponibile sunt accesibile tuturor componentelor din aplicarea.

Deschide _app.js fișier și actualizați-l după cum urmează:

import {Furnizor} din„react-redux”
import magazin din„../../redux/store”
exportMod implicitfuncţieApp({ Componentă, pageProps }) {
întoarcere (


 </Furnizor> )
}

Acum, mergeți mai departe și porniți serverul de dezvoltare pentru a reflecta modificările pe care le-ați făcut și navigați la http://localhost: 3000 în browser pentru a testa aplicația.

npm run dev

Gestionarea rehidratării datelor la reîncărcarea paginii

Rehidratarea datelor la reîncărcarea paginii se referă la procesul de restaurare și inițializare a stării aplicației atunci când o pagină se reîncarcă. Într-o aplicație Next.js redată de server, starea inițială este mai întâi redată pe server și apoi trimisă clientului.

Pe client, codul JavaScript este responsabil pentru reconstrucția stării aplicației prin preluarea și deserializarea stării serializate primite de la server.

Procedând astfel, aplicația poate restabili fără probleme datele necesare și poate păstra sesiunea utilizatorului. Această abordare evită preluarea inutilă de date și asigură o experiență de utilizator neîntreruptă atunci când navighează între pagini sau reîncărcați aplicația.

Unul dintre avantajele utilizării Redux Toolkit în aplicațiile Next.js este simplitatea și caracteristicile prietenoase pentru dezvoltatori. Reduce semnificativ codul standard necesar pentru definirea acțiunilor, reductoarelor și configurației magazinului, făcând mai ușor și mai eficient lucrul cu Redux în managementul de stat.