Поиск по сайту:

Руководство по управлению состоянием в 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 и установите необходимые зависимости, выполнив следующие действия.

  1. Создайте новый проект Next.js локально, выполнив в терминале следующую команду:

    npx create-next-app@latest next-redux-toolkit
  2. После создания проекта перейдите в каталог проекта, выполнив:

    cd next-redux-toolkit
  3. Наконец, установите необходимые зависимости в свой проект с помощью 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 проще и эффективнее в управлении состоянием.

Статьи по данной тематике: