Управление состоянием лежит в основе современных веб-приложений, играя жизненно важную роль в управлении данными пользователей и регистрации их взаимодействий. Будь то заполнение корзины покупок на платформе электронной коммерции или поддержание сеанса пользователя, вошедшего в систему после аутентификации, эти действия становятся возможными благодаря эффективному управлению состоянием.

По сути, менеджеры состояний позволяют приложениям получать доступ к данным и обрабатывать их для получения желаемых результатов. Next.js обеспечивает поддержку нескольких решений для управления состоянием. Однако в этом руководстве мы сосредоточимся на использовании Redux Toolkit для управления состоянием.

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

И глобальное состояние, и состояние компонентов играют жизненно важную роль в управлении общим состоянием приложения, способствуя эффективной обработке данных.

Reduxis широко применяется в качестве решения для управления состоянием в различные фреймворки JavaScript. Однако это может привести к сложностям, особенно для небольших проектов.

Одним из распространенных недостатков является необходимость написания повторяющегося шаблонного кода для определения типов действий, создателей действий и редюсеров. Это может привести к увеличению избыточности кода.

Чтобы преодолеть эти трудности, Редукс Инструментарий (РТК) приходит на помощь. В основном он направлен на оптимизацию опыта разработки при работе с Библиотека управления состоянием 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

После того, как вы настроили базовый проект Next.js, вы теперь готовы создать демонстрационное приложение Next.js, использующее Redux Toolkit для управления состоянием.

Вы можете найти код этого проекта в этом Репозиторий GitHub.

Настройте магазин Redux

Хранилище Redux — это центральный контейнер, в котором хранится все состояние приложения. Он служит единственным источником данных приложения, предоставляя состояния каждому компоненту. Хранилище отвечает за управление состоянием и его обновление с помощью действий и редюсеров, что облегчает управление состоянием во всем приложении.

Чтобы создать магазин Redux, создайте новый редукс папку в корневом каталоге вашего проекта Next.js. Внутри этой папки создайте новый store.js файл и добавьте следующий код:

Импортировать {configureStore} от'@reduxjs/инструментарий';
Импортировать профильРедуктор от'./редукторы/профильСлайс';
экспортпо умолчанию настроить магазин({
 редуктор: {
 профиль: профильРедуктор
 }
})

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

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

Настраивая хранилище Redux, код устанавливает базовую структуру для управления состоянием приложения с помощью Redux Toolkit.

Определить срезы состояния

Срезы состояния Redux — это компоненты, которые инкапсулируют логику для управления состоянием определенных элементов данных в настроенном хранилище Redux. Эти фрагменты создаются с помощью создатьSlice Функция, которая автоматически генерирует редюсер, создателей действий и типы действий для среза.

в редукс каталог, создайте новую папку и назовите ее редукторы. Внутри этой папки создайте профильSlice.js файл и добавьте следующий код.

Импортировать {createSlice} от'@reduxjs/инструментарий';
константа profileSlice = createSlice({
 имя: 'профиль',
 начальное состояние: {
 имя: 'никто'
 },
 редукторы: {
 ИМЯ НАБОРА: (состояние, действие) => {
 state.name = действие.полезная нагрузка
 }
}})
экспортконстанта {SET_NAME} = profileSlice.actions;
экспортпо умолчанию профильSlice.reducer;

В предоставленном коде создатьSlice Функция создает срез состояния для состояния профиля пользователя. профильSlice объект включает в себя имя среза и его начальное состояние, который содержит значения по умолчанию для свойств состояния.

Кроме того, объект среза также принимает редукторы свойство, которое определяет обработчики действий для этого фрагмента. В этом случае единственная функция редуктора с именем ИМЯ НАБОРА. По сути, как только вы вызовете эту функцию, она обновит свойство name состояния с предоставленными данными.

создатьSlice Функция автоматически генерирует создателей действий и типы действий на основе определенных редюсеров. экспортируется ИМЯ НАБОРА создатель действия и профильSlice.reducer представляет сгенерированный создатель действия и функцию редуктора для среза профиля.

Создавая этот срез состояния, компоненты в приложении могут использовать ИМЯ НАБОРА action и передайте нужную полезную нагрузку, чтобы обновить имя профиля в состоянии.

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

Открой index.js файл в страницы каталог, удалите шаблонный код Next.js и добавьте следующий код.

Импортировать стили от'@/styles/Home.module.css'
Импортировать {useRef} от«реагировать»
Импортировать {useSelector, useDispatch} от'реагировать-редукс'
Импортировать {ИМЯ НАБОРА} от'../../редукс/редукторы/профильСлайс'
функцияОтображаемое имя(){
константа {имя} = использоватьселектор((состояние) => состояние.профиль)
возвращаться (

 Я {имя} !!</h1> 
 ) }
экспортпо умолчаниюфункцияДом() {
константа имя_входа = useRef()
константа диспетчеризация = использование Dispatch ()
функцияsubmitName() {
консоль.log(inputName.current.value)
 отправка (SET_NAME(inputName.current.value))
 }
возвращаться (
 <>

'введите имя' ссылка={имя_входа} />
Введите имя</button>

 </main>
 </>
 )}

Приведенный выше код создает и отображает компонент Next.js, который позволяет пользователю вводить имя и отображать предоставленное имя на странице браузера. Эффективно управлять состоянием приложения с помощью Redux Toolkit.

Отображаемое имя компонент использует использованиеселектор крючок для доступа к имя свойство из состояния профиля в магазине Redux и отображает его на странице.

Чтобы ввести имя, пользователь нажимает кнопку Введите имя кнопка. Это вызывает submitName функция, которая отправляет ИМЯ НАБОРА действие с входным значением в качестве полезной нагрузки. Это действие обновляет свойство имени в состоянии профиля.

Обновите файл _app.js

Наконец, чтобы настроить Redux Toolkit для использования во всем приложении Next.js, вам необходимо обернуть приложение Поставщик Redux — это гарантирует, что хранилище Redux и доступные состояния доступны для всех компонентов в приложение.

Открой _app.js файл и обновите его следующим образом:

Импортировать {Провайдер} от'реагировать-редукс'
Импортировать магазин от'../../редукс/магазин'
экспортпо умолчаниюфункцияПриложение({Компонент, pageProps}) {
возвращаться (


 </Провайдер> )
}

Теперь запустите сервер разработки, чтобы отразить внесенные вами изменения, и перейдите к http://localhost: 3000 в браузере, чтобы протестировать приложение.

нпм запустить разработчик

Обработка повторной гидратации данных при перезагрузке страницы

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

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

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

Одним из преимуществ использования Redux Toolkit в приложениях Next.js является его простота и удобные для разработчиков функции. Это значительно сокращает шаблонный код, необходимый для определения действий, редьюсеров и конфигурации хранилища, что упрощает и повышает эффективность работы с Redux при управлении состоянием.