Správa stavu leží v srdci moderních webových aplikací, hraje zásadní roli při správě dat uživatelů a zachycování jejich interakcí. Ať už jde o naplnění nákupního košíku na platformě elektronického obchodu nebo udržování relace přihlášeného uživatele po ověření, tyto akce jsou možné díky efektivní správě stavu.

V zásadě manažeři státu umožňují aplikacím přistupovat k datům a zpracovávat je za účelem dosažení požadovaných výsledků. Next.js poskytuje podporu pro více řešení správy stavu. V této příručce se však zaměříme na využití nástroje Redux Toolkit pro správu státu.

V aplikacích Next.js správa stavu obvykle zahrnuje dva typy stavů: globální stav a stav komponenty. Globální stav obsahuje informace sdílené všemi komponentami v aplikaci, jako je stav autentizace uživatele, zatímco stav komponenty ukládá data specifická pro jednotlivé komponenty.

Globální stavy i stavy komponent hrají zásadní roli při správě celkového stavu aplikace, což usnadňuje efektivní zpracování dat.

Reduxis je široce přijímán jako řešení správy státu napříč různé frameworky JavaScriptu. Může však představovat komplikace, zejména u menších projektů.

Jednou z běžných nevýhod je potřeba psát opakující se standardní kód pro definování typů akcí, tvůrců akcí a reduktorů. To může vést ke zvýšené redundanci kódu.

Chcete-li překonat tyto výzvy, Redux Toolkit (RTK) přichází na pomoc. Zaměřuje se především na zefektivnění zkušeností s vývojem při práci s Knihovna pro správu stavu Redux. Poskytuje sadu nástrojů a utilit, které zjednodušují běžné úlohy Redux a eliminují potřebu nadměrného standardního kódu.

Nyní se pojďme ponořit do používání Redux Toolkit ke správě stavu v aplikacích Next.js. Chcete-li začít, vytvořte projekt Next.js a nainstalujte požadované závislosti podle následujících kroků.

1. Vytvořte nový projekt Next.js lokálně spuštěním příkazu níže v terminálu:

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

2. Po vytvoření projektu přejděte do adresáře projektu spuštěním:

   cd next-redux-toolkit

3. Nakonec nainstalujte potřebné závislosti ve svém projektu pomocí npm, správce balíčků Node.

   npm install @reduxjs/toolkit reagovat-redux

Jakmile nastavíte základní projekt Next.js, jste nyní připraveni vytvořit demo aplikaci Next.js, která využívá sadu nástrojů Redux pro správu stavu.

Zde najdete kód tohoto projektu úložiště GitHub.

Nakonfigurujte obchod Redux Store

Redux store je centrální kontejner, který uchovává celý stav aplikace. Slouží jako jediný zdroj dat aplikace a poskytuje stavy každé součásti. Obchod je zodpovědný za správu a aktualizaci stavu prostřednictvím akcí a omezovačů, což usnadňuje správu stavu v celé aplikaci.

Chcete-li vytvořit obchod Redux, vytvořte nový redux složku v kořenovém adresáři vašeho projektu Next.js. V této složce vytvořte nový store.js soubor a přidejte následující kód:

import {configureStore} z'@reduxjs/toolkit';
import profileReducer z'./reducers/profileSlice';
vývoznívýchozí configureStore({
 reduktor:{
 profil: profileReducer
 }
})

Výše uvedený kód využívá configureStore funkce pro vytvoření a konfiguraci obchodu Redux. Konfigurace úložiště zahrnuje specifikaci reduktorů pomocí reduktor objekt.

Reduktory v tomto případě určují, jak se má změnit stav aplikace v reakci na konkrétní akce nebo zadané události. V tomto příkladu je profil Reduktor je zodpovědný za řízení akcí souvisejících se stavem profilu.

Nastavením úložiště Redux vytváří kód základní strukturu pro správu stavu aplikace pomocí sady Redux Toolkit.

Definujte stavové řezy

Řezy stavu redux jsou komponenty, které zapouzdřují logiku pro správu stavu konkrétních datových položek v rámci nakonfigurovaného úložiště redux. Tyto řezy jsou vytvořeny pomocí vytvořitSlice funkce, která automaticky generuje redukci, tvůrce akcí a typy akcí pro řez.

V redux adresář, vytvořte novou složku a pojmenujte ji reduktory. Uvnitř této složky vytvořte profileSlice.js soubor a přidejte následující kód.

import {createSlice} z'@reduxjs/toolkit';
konst profileSlice = createSlice({
 název: 'profil',
 initialState: {
 název: 'žádný'
 },
 redukce: {
 SET_NAME: (stav, akce) => {
 state.name = action.payload
 }
}})
vývozníkonst {SET_NAME} = profileSlice.actions;
vývoznívýchozí profileSlice.reducer;

V poskytnutém kódu je vytvořitSlice funkce vytvoří stavový řez pro stav uživatelského profilu. The profilSlice objekt obsahuje název řezu a jeho počáteční stav, který obsahuje výchozí hodnoty pro vlastnosti stavu.

Kromě toho objekt řezu také přijímá a reduktory vlastnost, která definuje obslužné rutiny akcí pro tento řez. V tomto případě je pojmenována jedna funkce redukce SET_NAME. Jakmile tuto funkci zavoláte, v zásadě se aktualizuje vlastnost názvu stavu poskytnutými daty.

The vytvořitSlice funkce generuje tvůrce akcí a typy akcí automaticky na základě definovaných redukcí. Vyvezené SET_NAME tvůrce akce a profileSlice.reduktor představuje vygenerovanou akci tvůrce a funkci redukce pro profilový řez.

Vytvořením tohoto stavového řezu mohou komponenty v aplikaci využívat SET_NAME akci a předejte požadované užitečné zatížení k aktualizaci názvu profilu ve stavu.

Vytvořte komponentu pro testování funkčnosti správy stavu RTK

Otevři index.js soubor v stránky adresář, odstraňte standardní kód Next.js a přidejte následující kód.

import styly z'@/styles/Home.module.css'
import {useRef} z'reagovat'
import {useSelector, useDispatch} z'react-redux'
import {SET_NAME} z'../../redux/reducers/profileSlice'
funkceDisplayName(){
konst {name} = useSelector((Stát) => stav.profil)
vrátit se (

 Jsem {jméno}!!</h1> 
 ) }
vývoznívýchozífunkceDomov() {
konst inputName = useRef()
konst odeslání = useDispatch()
funkcesubmitName() {
řídicí panel.log (inputName.current.value)
 odeslání (SET_NAME(inputName.current.value))
 }
vrátit se (
 <>

'Napište jméno' ref={inputName} />
Zadejte jméno</button>

 </main>
 </>
 )}

Výše uvedený kód vytváří a vykresluje komponentu Next.js, která umožňuje uživateli zadat název a zobrazit poskytnuté jméno na stránce prohlížeče. Efektivní správa stavu aplikace pomocí Redux Toolkit.

The DisplayName komponenta využívá useSelector háček pro přístup k název vlastnost ze stavu profilu v úložišti Redux a vykreslí ji na stránce.

Chcete-li zadat název, uživatel klikne na Napište jméno knoflík. To vyvolá submitName funkce, která odesílá SET_NAME akce se vstupní hodnotou jako užitečné zatížení. Tato akce aktualizuje vlastnost name ve stavu profilu.

Aktualizujte soubor _app.js

A konečně, chcete-li nakonfigurovat Redux Toolkit pro použití v celé aplikaci Next.js, musíte aplikaci zabalit do Poskytovatel Redux – to zajišťuje, že úložiště Redux a dostupné stavy jsou přístupné všem komponentám v aplikace.

Otevři _app.js soubor a aktualizujte jej následovně:

import {Provider} z'react-redux'
import obchod z'../../redux/store'
vývoznívýchozífunkceAplikace({ Component, pageProps }) {
vrátit se (


 </Poskytovatel>)
}

Nyní pokračujte a spusťte vývojový server, aby odrážel změny, které jste provedli, a přejděte na něj http://localhost: 3000 ve vašem prohlížeči a otestujte aplikaci.

npm spustit dev

Manipulace s rehydratací dat při opětovném načtení stránky

Rehydratace dat při opětovném načtení stránky se týká procesu obnovení a inicializace stavu aplikace při opětovném načtení stránky. V serverem vykreslené aplikaci Next.js je počáteční stav nejprve vykreslen na serveru a poté odeslán klientovi.

Na klientovi je kód JavaScript zodpovědný za rekonstrukci stavu aplikace načtením a deserializací serializovaného stavu přijatého ze serveru.

Díky tomu může aplikace bezproblémově obnovit potřebná data a zachovat relaci uživatele. Tento přístup zabraňuje zbytečnému načítání dat a zajišťuje nepřetržitý uživatelský zážitek při navigaci mezi stránkami nebo opětovném načítání aplikace.

Jednou z výhod používání Redux Toolkit v aplikacích Next.js je jeho jednoduchost a vývojářské funkce. Výrazně snižuje standardní kód potřebný pro definování akcí, reduktorů a konfiguraci úložiště, což usnadňuje a zefektivňuje práci s Redux ve správě stavu.