Управлението на състоянието е в основата на съвременните уеб приложения, като играе жизненоважна роля в управлението на данните на потребителите и улавянето на техните взаимодействия. Независимо дали става въпрос за попълване на количка за пазаруване в платформа за електронна търговия или поддържане на сесия на влязъл потребител след удостоверяване, тези действия стават възможни чрез ефективно управление на състоянието.

По същество държавните мениджъри позволяват на приложенията да имат достъп и да обработват данните, за да произведат желаните резултати. Next.js осигурява поддръжка за множество решения за управление на състоянието. В това ръководство обаче ще се съсредоточим върху използването на Redux Toolkit за управление на състоянието.

В приложенията Next.js управлението на състоянието обикновено включва два типа състояния: глобално състояние и състояние на компонент. Глобалното състояние съдържа информация, споделена от всички компоненти в приложението, като състоянието на удостоверяване на потребител, докато състоянието на компонента съхранява данни, специфични за отделните компоненти.

Както глобалното състояние, така и състоянието на компонентите играят жизненоважна роля в управлението на цялостното състояние на приложението, улеснявайки ефективната обработка на данни.

Reduxis е широко разпространен като решение за управление на състоянието различни JavaScript рамки. Това обаче може да създаде сложности, особено за по-малки проекти.

Един често срещан недостатък е необходимостта от писане на повтарящ се шаблонен код, за да се дефинират типове действия, създатели на действия и редуктори. Това може да доведе до повишена излишност на кода.

За да преодолеете тези предизвикателства, Redux Toolkit (RTK) идва на помощ. Основно има за цел да рационализира опита за разработка при работа с Библиотека за управление на състояние Redux. Той предоставя набор от инструменти и помощни програми, които опростяват обичайните задачи на Redux, елиминирайки необходимостта от прекомерен шаблонен код.

Сега нека се потопим в използването на Redux Toolkit за управление на състоянието в приложенията Next.js. За да започнете, създайте проект Next.js и инсталирайте необходимите зависимости, като следвате стъпките по-долу.

1. Създайте нов проект Next.js локално, като изпълните командата по-долу във вашия терминал:

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

2. След като създадете проекта, отидете в директорията на проекта, като изпълните:

   cd next-redux-toolkit

3. И накрая, инсталирайте необходимите зависимости във вашия проект, като използвате npm, мениджърът на пакети Node.

   npm инсталирайте @reduxjs/toolkit react-redux

След като настроите основен проект Next.js, вече сте готови да изградите демонстрационно приложение Next.js, което използва Redux Toolkit за управление на състоянието.

Можете да намерите кода на този проект тук GitHub хранилище.

Конфигурирайте Redux Store

Redux store е централен контейнер, който съдържа цялото състояние на приложението. Той служи като единствен източник на данни на приложението, като предоставя състояния на всеки компонент. Магазинът е отговорен за управлението и актуализирането на състоянието чрез действия и редуктори — улесняване на управлението на състоянието в цялото приложение.

За да създадете Redux магазин, създайте нов намаление папка в главната директория на вашия проект Next.js. В тази папка създайте нова store.js файл и добавете следния код:

импортиране {configureStore} от'@reduxjs/toolkit';
импортиране profileReducer от'./reducers/profileSlice';
износпо подразбиране configureStore({
 редуктор:{
 профил: profileReducer
 }
})

Кодът по-горе използва configureStore функция за създаване и конфигуриране на магазина Redux. Конфигурацията на магазина включва указване на редуктори с помощта на редуктор обект.

Редукторите в този случай указват как трябва да се промени състоянието на приложението в отговор на определени действия или определени събития. В този пример, профил редукторът отговаря за управлението на действията, свързани със състоянието на профила.

Чрез настройване на хранилището на Redux кодът установява основната структура за управление на състоянието на приложението с помощта на Redux Toolkit.

Дефиниране на държавни срезове

Срезовете на състоянието на Redux са компоненти, които капсулират логиката за управление на състоянието на конкретни елементи от данни в рамките на конфигурираното хранилище на redux. Тези резени са създадени с помощта на createSlice функция, която автоматично генерира редуктора, създателите на действия и типовете действия за среза.

В намаление директория, създайте нова папка и я наименувайте редуктори. В тази папка създайте profileSlice.js файл и добавете следния код.

импортиране {createSlice} от'@reduxjs/toolkit';
конст profileSlice = createSlice({
 име: "профил",
 Първоначално състояние: {
 име: 'нито един'
 },
 редуктори: {
 SET_NAME: (състояние, действие) => {
 state.name = action.payload
 }
}})
износконст {SET_NAME} = profileSlice.actions;
износпо подразбиране profileSlice.reducer;

В предоставения код, createSlice функцията създава срез на състоянието за състоянието на потребителския профил. The profileSlice обектът включва името на среза и неговия Първоначално състояние, който съдържа стойностите по подразбиране за свойствата на състоянието.

В допълнение обектът на срез също приема a редуктори свойство, което дефинира манипулаторите на действие за този срез. В този случай, една единствена редукторна функция с име SET_NAME. По същество, след като извикате тази функция, тя ще актуализира свойството име на състоянието с предоставените данни.

The createSlice функция генерира създатели на действия и типове действия автоматично въз основа на дефинираните редуктори. Изнесените SET_NAME създател на действие и profileSlice.reducer представлява създателя на генерираното действие и функцията за редуциране за среза на профила.

Чрез създаването на този срез на състоянието компонентите в рамките на приложението могат да използват SET_NAME действие и подайте желания полезен товар, за да актуализирате името на профила в състоянието.

Създайте компонент за тестване на функционалността за управление на състоянието на RTK

Отвори index.js файл в страници директория, изтрийте шаблонния код Next.js и добавете следния код.

импортиране стилове от'@/styles/Home.module.css'
импортиране {useRef} от"реагира"
импортиране {useSelector, useDispatch} от'react-redux'
импортиране {SET_NAME} от'../../redux/reducers/profileSlice'
функцияЕкранно име(){
конст {име} = useSelector((състояние) => state.profile)
връщане (

 Аз съм {name} !!</h1> 
 ) }
износпо подразбиранефункцияУ дома() {
конст inputName = useRef()
конст изпращане = useDispatch()
функцияsubmitName() {
конзола.log (inputName.current.value)
 изпращане (SET_NAME(inputName.current.value))
 }
връщане (
 <>

'въведи име' ref={inputName} />
Въведете име</button>

 </main>
 </>
 )}

Кодът по-горе създава и изобразява компонент Next.js, който позволява на потребителя да въведе име и да покаже предоставеното име на страницата на браузъра. Ефективно управление на състоянието на приложението с помощта на Redux Toolkit.

The Екранно име компонентът използва useSelector кука за достъп до име свойство от състоянието на профила в магазина Redux и го изобразява на страницата.

За да въведете име, потребителят щраква върху Въведи име бутон. Това предизвиква submitName функция, която изпраща SET_NAME действие с входната стойност като полезен товар. Това действие актуализира свойството име в състоянието на профила.

Актуализирайте файла _app.js

И накрая, за да конфигурирате Redux Toolkit за използване в цялото приложение Next.js, трябва да обвиете приложението с Доставчик на Redux—това гарантира, че магазинът Redux и наличните състояния са достъпни за всички компоненти в приложение.

Отвори _app.js файл и го актуализирайте, както следва:

импортиране {Доставчик} от'react-redux'
импортиране магазин от„../../redux/store“
износпо подразбиранефункцияПриложение({Component, pageProps}) {
връщане (


 </Доставчик> )
}

Сега давайте напред и стартирайте сървъра за разработка, за да отразите промените, които сте направили, и отидете до http://localhost: 3000 във вашия браузър, за да тествате приложението.

npm стартиране dev

Обработка на повторно хидратиране на данни при презареждане на страницата

Рехидратирането на данни при презареждане на страницата се отнася до процеса на възстановяване и инициализиране на състоянието на приложението, когато страницата се презареди. В изобразено от сървъра приложение Next.js първоначалното състояние първо се изобразява на сървъра и след това се изпраща на клиента.

На клиента JavaScript кодът отговаря за реконструкцията на състоянието на приложението чрез извличане и десериализиране на сериализираното състояние, получено от сървъра.

Правейки това, приложението може безпроблемно да възстанови необходимите данни и да запази сесията на потребителя. Този подход избягва ненужното извличане на данни и гарантира непрекъснато потребителско изживяване при навигация между страници или презареждане на приложението.

Едно от предимствата на използването на Redux Toolkit в приложенията Next.js е неговата простота и удобни за разработчици функции. Той значително намалява шаблонния код, необходим за дефиниране на действия, редуктори и конфигурация на магазина, което прави по-лесна и по-ефективна работата с Redux в управлението на състоянието.