Riadenie stavu leží v srdci moderných webových aplikácií, hrá zásadnú úlohu pri správe údajov používateľov a zachytávaní ich interakcií. Či už ide o naplnenie nákupného košíka na platforme elektronického obchodu alebo udržiavanie relácie prihláseného používateľa po overení totožnosti, tieto akcie sú možné vďaka efektívnej správe stavu.

Štátni manažéri v podstate umožňujú aplikáciám pristupovať k údajom a spracovávať ich, aby dosiahli požadované výsledky. Next.js poskytuje podporu pre viaceré riešenia správy stavu. V tejto príručke sa však zameriame na využitie Redux Toolkit na správu štátu.

V aplikáciách Next.js správa stavu zvyčajne zahŕňa dva typy stavov: globálny stav a stav komponentu. Globálny stav obsahuje informácie zdieľané všetkými komponentmi v aplikácii, ako je napríklad stav autentifikácie používateľa, zatiaľ čo stav komponentu ukladá údaje špecifické pre jednotlivé komponenty.

Globálny stav aj stav komponentov zohrávajú zásadnú úlohu pri riadení celkového stavu aplikácie, čo uľahčuje efektívnu manipuláciu s údajmi.

Reduxis je široko používaný ako riešenie riadenia štátu rôzne rámce JavaScriptu. Môže to však priniesť komplikácie, najmä pre menšie projekty.

Jednou z bežných nevýhod je potreba písať opakujúci sa štandardný kód na definovanie typov akcií, tvorcov akcií a redukcií. To môže viesť k zvýšenej redundancii kódu.

Na prekonanie týchto výziev, Redux Toolkit (RTK) prichádza na pomoc. Jeho cieľom je hlavne zefektívniť vývojové skúsenosti pri práci s Knižnica riadenia stavu Redux. Poskytuje sadu nástrojov a pomôcok, ktoré zjednodušujú bežné úlohy Redux, čím eliminujú potrebu nadmerného štandardného kódu.

Teraz sa poďme ponoriť do používania Redux Toolkit na správu stavu v aplikáciách Next.js. Ak chcete začať, vytvorte projekt Next.js a nainštalujte požadované závislosti podľa nasledujúcich krokov.

1. Vytvorte nový projekt Next.js lokálne spustením príkazu nižšie v termináli:

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

2. Po vytvorení projektu prejdite do adresára projektu spustením:

   cd next-redux-toolkit

3. Nakoniec nainštalujte potrebné závislosti vo svojom projekte pomocou npm, správca balíkov Node.

   npm install @reduxjs/toolkit response-redux

Po nastavení základného projektu Next.js ste teraz pripravení vytvoriť demo aplikáciu Next.js, ktorá využíva Redux Toolkit na správu stavu.

Kód tohto projektu nájdete v tomto úložisko GitHub.

Nakonfigurujte obchod Redux Store

Obchod Redux je centrálny kontajner, ktorý obsahuje celý stav aplikácie. Slúži ako jediný zdroj údajov aplikácie a poskytuje stavy každému komponentu. Obchod je zodpovedný za správu a aktualizáciu stavu prostredníctvom akcií a redukcií, ktoré uľahčujú správu stavu v celej aplikácii.

Ak chcete vybudovať obchod Redux, vytvorte nový redux priečinok v koreňovom adresári vášho projektu Next.js. V tomto priečinku vytvorte nový store.js súbor a pridajte nasledujúci kód:

importovať {configureStore} od'@reduxjs/toolkit';
importovať profileReducer od'./reducers/profileSlice';
exportpredvolená configureStore({
 redukcia:{
 profil: profileReducer
 }
})

Vyššie uvedený kód využíva configureStore funkciu na vytvorenie a konfiguráciu obchodu Redux. Konfigurácia obchodu zahŕňa špecifikovanie redukcií pomocou reduktor objekt.

Reduktory v tomto prípade určujú, ako sa má zmeniť stav aplikácie v reakcii na konkrétne akcie alebo špecifikované udalosti. V tomto príklade profilu Reduktor je zodpovedný za riadenie akcií súvisiacich so stavom profilu.

Nastavením úložiska Redux kód vytvára základnú štruktúru na správu stavu aplikácie pomocou súpravy nástrojov Redux.

Definujte časti stavu

Stavové segmenty reduxu sú komponenty, ktoré zapuzdrujú logiku na riadenie stavu špecifických údajových položiek v rámci nakonfigurovaného úložiska redux. Tieto rezy sú vytvorené pomocou createSlice funkcia, ktorá automaticky generuje redukciu, tvorcov akcií a typy akcií pre rez.

V redux adresár, vytvorte nový priečinok a pomenujte ho redukcie. V tomto priečinku vytvorte profileSlice.js súbor a pridajte nasledujúci kód.

importovať {createSlice} od'@reduxjs/toolkit';
konšt profileSlice = createSlice({
 názov: 'profil',
 počiatočný stav: {
 názov: 'žiadny'
 },
 redukcie: {
 SET_NAME: (stav, akcia) => {
 state.name = action.payload
 }
}})
exportkonšt {SET_NAME} = profileSlice.actions;
exportpredvolená profileSlice.reducer;

V poskytnutom kóde je createSlice funkcia vytvára stavový segment pre stav užívateľského profilu. The profileSlice objekt obsahuje názov rezu a jeho počiatočný stav, ktorý obsahuje predvolené hodnoty pre vlastnosti stavu.

Okrem toho objekt výrezu preberá aj a redukcie vlastnosť, ktorá definuje obslužné rutiny akcií pre tento rez. V tomto prípade je pomenovaná jedna funkcia redukcie SET_NAME. V podstate, keď túto funkciu zavoláte, aktualizuje vlastnosť názvu štátu pomocou poskytnutých údajov.

The createSlice funkcia generuje tvorcov akcií a typy akcií automaticky na základe definovaných redukcií. Vyvezené SET_NAME tvorca akcie a profileSlice.reducer predstavuje generovaný tvorca akcie a funkciu redukcie pre profilový rez.

Vytvorením tohto segmentu stavu môžu komponenty v rámci aplikácie využívať SET_NAME akciu a odovzdať požadované užitočné zaťaženie na aktualizáciu názvu profilu v stave.

Vytvorte komponent na testovanie funkčnosti správy stavu RTK

Otvor index.js súbor v stránky adresár, odstráňte štandardný kód Next.js a pridajte nasledujúci kód.

importovať štýlov od'@/styles/Home.module.css'
importovať {useRef} od'reagovať'
importovať {useSelector, useDispatch} od'react-redux'
importovať {SET_NAME} od'../../redux/reducers/profileSlice'
funkciuZobraziť meno(){
konšt {name} = useSelector((štát) => state.profil)
vrátiť (

 Som {meno} !!</h1> 
 ) }
exportpredvolenáfunkciuDomov() {
konšt inputName = useRef()
konšt odoslanie = useDispatch()
funkciusubmitName() {
konzoly.log (inputName.current.value)
 odoslanie (SET_NAME(inputName.current.value))
 }
vrátiť (
 <>

'Zadaj meno' ref={inputName} />
Zadajte meno</button>

 </main>
 </>
 )}

Vyššie uvedený kód vytvára a vykresľuje komponent Next.js, ktorý umožňuje používateľovi zadať názov a zobraziť zadaný názov na stránke prehliadača. Efektívne spravovanie stavu aplikácie pomocou Redux Toolkit.

The Zobraziť meno komponent využíva useSelector háčik na prístup k názov vlastnosť zo stavu profilu v obchode Redux a vykreslí ju na stránke.

Ak chcete zadať názov, používateľ klikne na Zadaj meno tlačidlo. Toto vyvolá submitName funkciu, ktorá odosiela SET_NAME akciu so vstupnou hodnotou ako užitočné zaťaženie. Táto akcia aktualizuje vlastnosť názvu v stave profilu.

Aktualizujte súbor _app.js

Nakoniec, ak chcete nakonfigurovať Redux Toolkit na použitie v celej aplikácii Next.js, musíte aplikáciu zabaliť do Poskytovateľ Redux — toto zaisťuje, že obchod Redux a dostupné stavy sú prístupné všetkým komponentom v aplikácie.

Otvor _app.js súbor a aktualizujte ho takto:

importovať {Provider} od'react-redux'
importovať obchod od'../../redux/store'
exportpredvolenáfunkciuApp({ Component, pageProps }) {
vrátiť (


 </Poskytovateľ> )
}

Teraz pokračujte a spustite vývojový server, aby odrážal zmeny, ktoré ste vykonali, a prejdite naň http://localhost: 3000 vo svojom prehliadači a otestujte aplikáciu.

npm spustiť dev

Spracovanie rehydratácie údajov pri opätovnom načítaní stránky

Rehydratácia údajov pri opätovnom načítaní stránky sa týka procesu obnovenia a inicializácie stavu aplikácie pri opätovnom načítaní stránky. V serverom vykreslenej aplikácii Next.js sa počiatočný stav najskôr vykreslí na serveri a potom sa odošle klientovi.

Na klientovi je kód JavaScript zodpovedný za rekonštrukciu stavu aplikácie načítaním a deserializáciou serializovaného stavu prijatého zo servera.

Vďaka tomu môže aplikácia bezproblémovo obnoviť potrebné údaje a zachovať reláciu používateľa. Tento prístup zabraňuje zbytočnému načítavaniu údajov a zaisťuje neprerušovaný používateľský zážitok pri navigácii medzi stránkami alebo opätovnom načítaní aplikácie.

Jednou z výhod používania Redux Toolkit v aplikáciách Next.js je jej jednoduchosť a funkcie vhodné pre vývojárov. Výrazne znižuje štandardný kód potrebný na definovanie akcií, redukcií a konfigurácie obchodu, čím uľahčuje a zefektívňuje prácu s Reduxom pri správe stavu.