Управление состоянием в Next JS 13 App Router

Next.js, фреймворк JavaScript, разработанный Vercel, приобрел огромную популярность благодаря своей способности беспрепятственно сочетать лучшее из React и рендеринга на стороне сервера (SSR). Интегрируя рендеринг на стороне сервера с компонентной архитектурой React, Next.js предлагает разработчикам мощный набор инструментов для создания быстрых, интерактивных и оптимизированных для SEO веб-приложений. Кроме того, Next.js 13 включает в себя последние достижения в экосистеме React, обеспечивая плавную интеграцию с React 18. Вы можете воспользоваться преимуществами новых функций React 18, таких как параллельный режим и серверные компоненты, чтобы получить еще больший прирост производительности и создавать высокочувствительные пользовательские интерфейсы.

В заключение, Next.js 13 меняет правила игры в мире веб-разработки. Благодаря непревзойденному сочетанию рендеринга на стороне сервера, интеграции с React, повышенной производительности и удобных для разработчиков функций Next.js 13 позволяет с легкостью создавать исключительные веб-приложения. Являетесь ли вы опытным разработчиком или только начинаете свой путь в программировании, Next.js 13 здесь, чтобы революционизировать ваш опыт веб-разработки и открыть безграничные возможности. Будьте готовы вывести свои проекты на новый уровень с помощью Next.js 13!

Управление состоянием играет решающую роль в разработке сложных веб-приложений с удобным пользовательским интерфейсом. Хотя Next.js сам по себе не предоставляет встроенного решения для управления состоянием, он легко интегрируется с различными популярными библиотеками и шаблонами управления состоянием, позволяя разработчикам выбрать тот, который лучше всего соответствует требованиям их проекта. Давайте рассмотрим некоторые часто используемые параметры управления состоянием в Next.js 13.

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

1- Набор инструментов Redux

Redux — это широко распространенная библиотека управления состоянием, которая предлагает контейнер с предсказуемым состоянием для приложений JavaScript.

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

1.Установка

Начните с установки необходимых зависимостей. В каталоге проекта Next.js выполните следующую команду:

npm install @reduxjs/toolkit react-redux

2.Настройка Redux Store
в каталоге приложений вашего проекта Next.js. Создайте файл, например Store.js`, чтобы определить конфигурацию вашего магазина Redux.

import { configureStore } from '@reduxjs/toolkit';
 // Import your reducers
 import Reducer from './Slices';
const store = configureStore({
 reducer: {
 Reducer,
 // Add more reducers as needed
 },
 });
export default store;

В приведенном выше фрагменте кода мы импортируем `configureStore` из `@reduxjs/toolkit` и определяем наш магазин Redux с нужными редьюсерами. Обязательно создайте отдельные файлы редукторов (например, `counter.js`) для каждого фрагмента состояния в вашем приложении.

3.Создание редукторов
Создайте отдельный файл для каждого редуктора. Например, в Slice.js` вы должны определить свой срез состояния и связанные с ним действия, используя функцию createSlice из Redux Toolkit:

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
 name: 'counter',
 initialState: 0,
 reducers: {
 increment: (state) => state + 1,
 decrement: (state) => state - 1,
 },
 });
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

В этом примере мы определяем срез состояния счетчика с начальным значением 0 и двумя действиями: «увеличить» и «уменьшить».

4.Подключение Redux к Next.js
В приложении Next.js вы можете подключить хранилище Redux к своим компонентам, используя компонент Provider из `react-redux`.

В файле layout.js внутри каталога приложения импортируйте компонент Provider и оберните им свое приложение:

"use client"// Because we're inside a server component

import { Provider } from 'react-redux';
import store from '../store';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Provider store={store}>
   {children}
</Provider>
</body>
</html>
);
}

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

Вы также можете сохранить layout.js серверным компонентом, добавив внешнего поставщика, а затем экспортировав его внутрь layout.js.

ReduxProvider.js

"use client";

import { Provider } from "react-redux";
import Store from "./Store";

export default function ReduxProvider({ children }) {
  return <Provider store={Store}>{children}</Provider>;
}

layout.js

import ReduxProvider from "@/Lib/ReduxProvider";
import "./globals.css";
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
  title: "",
  description: "",
  icons: {
    icon: "/favicon.ico",
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

5. Доступ к состоянию и действиям отправки
В любом компоненте, которому требуется доступ к состоянию Redux или необходимо отправлять действия, вы можете использовать хуки `useSelector` и `useDispatch` из `react-redux`.

"use client"// Because we're inside a server component
import { useSelector, useDispatch } from ‘react-redux’;
import { increment, decrement } from ‘../store/counter’;
function CounterComponent() {
 const counter = useSelector((state) => state.counter);
 const dispatch = useDispatch();
return (
 <div>
 <p>Counter: {counter}</p>
 <button onClick={() => dispatch(increment())}>Increment</button>
 <button onClick={() =>
dispatch(decrement())}>Decrement</button>
 </div>
 );
 }

В приведенном выше примере мы используем `useSelector` для доступа к состоянию счетчика из хранилища Redux и `useDispatch` для отправки действий `increment` и `decrement`.

2-React Context Hook

Использование React Context с Next.js позволяет вам обмениваться состоянием или данными между компонентами без необходимости детализации реквизита. Next.js легко интегрируется с React Context, что делает его мощным инструментом для управления глобальным состоянием или обмена данными в вашем приложении Next.js. Давайте рассмотрим, как вы можете использовать React Context в Next.js:

1. Создайте контекст
В проекте Next.js вы можете создать новый файл, например AppContext.js, для определения контекста React.

"use client"// Because we're inside a server component
import React, { createContext, useState, useContext } from 'react';
// Create the context
 const AppContext = createContext();
// Create a provider component
 export const AppProvider = ({ children }) => {
 const [state, setState] = useState(initialState);
// Define any functions or values you want to provide
 const value = {
 state,
 setState,
 };
return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
// Export the context
 export const useAppContext=()=> useContext(AppContext)

В этом примере мы создаем AppContext с помощью createContext(). Мы также создаем компонент провайдера AppProvider, который обертывает дочерние компоненты и предоставляет функции состояния и установки через контекст.

2. Настройте поставщика в layout.js

import {AppProvider} from "@/Lib/AppContext";
import "./globals.css";
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
  title: "",
  description: "",
  icons: {
    icon: "/favicon.ico",
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  );
}

Обернув приложение Next.js с помощью `AppProvider`, функции состояния и установки будут доступны для всех компонентов, вложенных в поставщика.

3.Доступ к контексту в компонентах
Чтобы получить доступ к контексту и его состоянию или функциям, вы можете использовать хук useContext в своих компонентах.

"use client"

import {useAppContext}'../AppContext';
function MyComponent() {
 const { state, setState } = useAppContext()
// Use the state and setState as needed
return <div>{state}</div>;
 }

В этом примере мы импортируем AppContext из AppContext.js и используем useContext для доступа к функциям состояния и установки, предоставляемым контекстом. Вы можете использовать функции состояния и установки внутри компонента по мере необходимости.

3-Зустанд

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

Интеграция Zustand с Next.js 13 — это бесшовный процесс, который позволяет вам использовать облегченные возможности управления состоянием Zustand в ваших приложениях Next.js. Вы можете выполнить следующие шаги, чтобы использовать Zustand в Next.js 13.

1.Установка
Начните с установки Zustand и его необходимых зависимостей. В каталоге проекта Next.js выполните следующую команду:

npm install zustand

2.Создание магазина Zustand:
В проекте Next.js создайте файл, например `store.js`, чтобы определить магазин Zustand.

import { create } from 'zustand';
const useStore = create((set) => ({
 counter: 0,
 increment: () => set((state) => ({ counter: state.counter + 1 })),
 decrement: () => set((state) => ({ counter: state.counter - 1 })),
 }));
export default useStore;

В этом примере мы используем функцию «создать» из Zustand, чтобы определить наш магазин. Хранилище содержит состояние «счетчика» и две функции, «инкремент» и «декремент», для обновления значения счетчика.

3.Доступ к хранилищу Zustand в компонентах:
В любом компоненте, где вам нужен доступ к хранилищу Zustand, вы можете использовать хук useStore.

"use client"

import useStore from '../store';
function MyComponent() {
 const counter = useStore((state) => state.counter);
 const increment = useStore((state) => state.increment);
 const decrement = useStore((state) => state.decrement);
return (
 <div>
 <p>Counter: {counter}</p>
 <button onClick={increment}>Increment</button>
 <button onClick={decrement}>Decrement</button>
 </div>
 );
 }

В этом примере мы импортируем useStore из store.js и используем его для доступа к магазину Zustand. Передавая селекторную функцию в useStore, мы извлекаем требуемое состояние или действия из хранилища.

4.Использование поставщика хранилища Zustand в layout.js`:
Чтобы обеспечить доступность хранилища Zustand во всем приложении Next.js, вы можете использовать поставщика хранилища Zustand в layout.js` файл.

"use client"// Because we're inside a server component

import { Provider } from 'zustand';
import useStore from '../store';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Provider createStore={useStore}>
 {children}
</Provider>
</body>
</html>
);
}

ZustandProvider.js

"use client";
import { Provider } from 'zustand';
import useStore from '../store';
export default function ZustandProvider({ children }) {
  return <Provider createStore={useStore}>{children}</Provider>;
}

layout.js

import ZustandProvider from "@/Lib/ZustandProvider";
import "./globals.css";
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
  title: "",
  description: "",
  icons: {
    icon: "/favicon.ico",
  },
};
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ZustandProvider>{children}</ZustandProvider>
      </body>
    </html>
  );
}

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

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

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

Удачного кодирования!

Управление состоянием в Next JS 13 App Router

1- Набор инструментов Redux

2-React Context Hook

3-Зустанд

Похожие вопросы