Руководство по управлению состоянием в Next.js с использованием Redux Toolkit
Использование Redux в небольших приложениях Next.js может привести к ненужным накладным расходам. Упростите управление состоянием с помощью Redux Toolkit.
Управление состоянием лежит в основе современных веб-приложений, играя жизненно важную роль в управлении данными пользователей и отслеживании их взаимодействий. Будь то заполнение корзины покупок на платформе электронной коммерции или поддержание сеанса вошедшего в систему пользователя после аутентификации, эти действия становятся возможными благодаря эффективному управлению состоянием.
По сути, менеджеры состояний позволяют приложениям получать доступ к данным и обрабатывать их для получения желаемых результатов. Next.js обеспечивает поддержку нескольких решений по управлению состоянием. Однако в этом руководстве мы сосредоточимся на использовании Redux Toolkit для управления состоянием.
Управление состоянием в Next.js с использованием Redux Toolkit
В приложениях Next.js управление состоянием обычно включает два типа состояний: глобальное состояние и состояние компонента. Глобальное состояние содержит информацию, общую для всех компонентов приложения, например статус аутентификации пользователя, тогда как состояние компонента хранит данные, специфичные для отдельных компонентов.
Как глобальное состояние, так и состояние компонентов играют жизненно важную роль в управлении общим состоянием приложения, способствуя эффективной обработке данных.
Redux широко применяется в качестве решения для управления состоянием в различных средах JavaScript. Однако это может привести к сложностям, особенно для небольших проектов.
Одним из распространенных недостатков является необходимость написания повторяющегося шаблонного кода для определения типов действий, создателей действий и средств восстановления. Это может привести к увеличению избыточности кода.
Чтобы преодолеть эти проблемы, на помощь приходит Redux Toolkit (RTK). В основном он направлен на оптимизацию процесса разработки при работе с библиотекой управления состоянием Redux. Он предоставляет набор инструментов и утилит, которые упрощают типичные задачи Redux, устраняя необходимость в излишнем шаблонном коде.
Начало работы с Redux Toolkit в приложениях Next.js
Теперь давайте углубимся в использование Redux Toolkit для управления состоянием в приложениях Next.js. Для начала создайте проект Next.js и установите необходимые зависимости, выполнив следующие действия.
Создайте новый проект Next.js локально, выполнив в терминале следующую команду:
npx create-next-app@latest next-redux-toolkit
После создания проекта перейдите в каталог проекта, выполнив:
cd next-redux-toolkit
Наконец, установите необходимые зависимости в свой проект с помощью npm, менеджера пакетов Node.
npm install @reduxjs/toolkit react-redux
После настройки базового проекта Next.js вы готовы создать демонстрационное приложение Next.js, использующее Redux Toolkit для управления состоянием.
Вы можете найти код этого проекта в этом репозитории GitHub.
Настройте хранилище Redux
Хранилище Redux — это центральный контейнер, в котором хранится все состояние приложения. Он служит единственным источником данных приложения, предоставляя состояния каждому компоненту. Хранилище отвечает за управление и обновление состояния с помощью действий и редукторов, что упрощает управление состоянием во всем приложении.
Чтобы создать хранилище Redux, создайте новую папку redux в корневом каталоге вашего проекта Next.js. Внутри этой папки создайте новый файл store.js и добавьте следующий код:
import {configureStore} from '@reduxjs/toolkit';
import profileReducer from './reducers/profileSlice';
export default configureStore({
reducer:{
profile: profileReducer
}
})
В приведенном выше коде используется функция configureStore для создания и настройки хранилища Redux. Конфигурация хранилища включает в себя указание редукторов с помощью объекта reducer.
В этом случае редукторы указывают, как состояние приложения должно меняться в ответ на определенные действия или указанные события. В этом примере редуктор profile отвечает за управление действиями, связанными с состоянием профиля.
Настраивая хранилище Redux, код устанавливает базовую структуру для управления состоянием приложения с помощью Redux Toolkit.
Определить фрагменты состояния
Срезы состояния Redux — это компоненты, которые инкапсулируют логику управления состоянием определенных элементов данных в настроенном хранилище Redux. Эти фрагменты создаются с помощью функции createSlice, которая автоматически генерирует редуктор, создателей действий и типы действий для фрагмента.
В каталоге redux создайте новую папку и назовите ее reducers. Внутри этой папки создайте файл profileSlice.js и добавьте следующий код.
import {createSlice} from '@reduxjs/toolkit';
const profileSlice = createSlice({
name: 'profile',
initialState: {
name: 'none'
},
reducers: {
SET_NAME: (state, action) => {
state.name = action.payload
}
}})
export const {SET_NAME} = profileSlice.actions;
export default profileSlice.reducer;
В предоставленном коде функция createSlice создает срез состояния для состояния профиля пользователя. Объект profileSlice включает имя среза и его initialState, который содержит значения по умолчанию для свойств состояния.
Кроме того, объект среза также принимает свойство reducers, которое определяет обработчики действий для этого среза. В данном случае это одна функция редуктора с именем SET_NAME. По сути, как только вы вызовете эту функцию, она обновит свойство имени состояния предоставленными данными.
Функция createSlice автоматически генерирует создателей и типы действий на основе определенных редукторов. Экспортированный создатель действия SET_NAME и profileSlice.reducer представляют сгенерированный создатель действия и функцию редуктора для среза профиля.
Создав этот срез состояния, компоненты приложения могут использовать действие SET_NAME и передавать нужные полезные данные для обновления имени профиля в состоянии.
Создайте компонент для тестирования функциональности управления состоянием RTK.
Откройте файл index.js в каталоге pages, удалите шаблонный код Next.js и добавьте следующий код.
import styles from '@/styles/Home.module.css'
import {useRef} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {SET_NAME} from '../../redux/reducers/profileSlice'
function DisplayName(){
const {name} = useSelector((state) => state.profile)
return (
<h1> I am {name} !!</h1>
) }
export default function Home() {
const inputName = useRef()
const dispatch = useDispatch()
function submitName() {
console.log(inputName.current.value)
dispatch(SET_NAME(inputName.current.value))
}
return (
<>
<main className={styles.main}>
<input placeholder='enter name' ref={inputName} />
<button onClick={submitName}>Enter name</button>
<DisplayName />
</main>
</>
)}
Приведенный выше код создает и отображает компонент Next.js, который позволяет пользователю вводить имя и отображать указанное имя на странице браузера. По сути, управление состоянием приложения с помощью Redux Toolkit.
Компонент DisplayName использует хук useSelector для доступа к свойству name из состояния профиля в хранилище Redux и отображает его на странице.
Чтобы ввести имя, пользователь нажимает кнопку Ввести имя. При этом вызывается функция submitName, которая отправляет действие SET_NAME с входным значением в качестве полезной нагрузки. Это действие обновляет свойство имени в состоянии профиля.
Обновите файл _app.js.
Наконец, чтобы настроить Redux Toolkit для использования во всем приложении Next.js, вам необходимо обернуть приложение поставщиком Redux — это гарантирует, что хранилище Redux и доступные состояния будут доступны для всех компонентов в приложении.
Откройте файл _app.js и обновите его следующим образом:
import {Provider} from 'react-redux'
import store from '../../redux/store'
export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider> )
}
Теперь запустите сервер разработки, чтобы отразить внесенные вами изменения, и перейдите по адресу http://localhost:3000 в своем браузере, чтобы протестировать приложение.
npm run dev
Обработка повторной гидратации данных при перезагрузке страницы
Регидратация данных при перезагрузке страницы — это процесс восстановления и инициализации состояния приложения при перезагрузке страницы. В приложении Next.js, отображаемом на сервере, исходное состояние сначала отображается на сервере, а затем отправляется клиенту.
На клиенте код JavaScript отвечает за восстановление состояния приложения путем получения и десериализации сериализованного состояния, полученного с сервера.
Благодаря этому приложение сможет беспрепятственно восстановить необходимые данные и сохранить сеанс пользователя. Такой подход позволяет избежать ненужной выборки данных и обеспечивает бесперебойную работу пользователя при навигации между страницами или перезагрузке приложения.
Работа с Redux Toolkit в приложениях Next.js
Одним из преимуществ использования Redux Toolkit в приложениях Next.js является его простота и удобство для разработчиков. Это значительно сокращает количество шаблонного кода, необходимого для определения действий, редукторов и конфигурации хранилища, что делает работу с Redux проще и эффективнее в управлении состоянием.