Встроенный в React Context API идеально подходит для совместного использования состояния. Узнайте, как использовать его с последней версией Next.js.

Next.js предлагает несколько подходов к управлению состоянием. Хотя некоторые из этих методов требуют установки новых библиотек, контекстный API React встроен, поэтому это отличный способ уменьшить внешние зависимости.

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

Понимание контекстного API React

Прежде чем углубляться в код, важно понять, что такое React Context API и какую проблему он решает.

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

Этот подход полезен, поскольку он четко показывает, какие компоненты используют определенные данные и как эти данные передаются по дереву компонентов.

instagram viewer

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

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

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

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

Начало работы с управлением состоянием в Next.js 13 с использованием React Context API

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

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

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

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

npx create-next-app@latest next-context-api

После создания проекта перейдите в его каталог:

cd next-context-api

Затем запустите сервер разработки:

npm run dev

Настроив базовый проект Next.js, вы можете создать базовое приложение для дел, которое использует React Context API для управления состоянием.

Создайте поставщика контекста

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

Создайте новый файл, src/context/Todo.context.jsи заполните его следующим кодом.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Эта настройка контекста React определяет TodoContext который изначально содержит состояние пустого списка дел для приложения.

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

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

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

Добавьте поставщика контекста в приложение Next.js

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

Для этого откройте src/приложение/layout.js файл и оберните дочерний узел в шаблон HTML с помощью поставщика контекста следующим образом:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Создайте компонент списка дел

Создайте новый файл, источник/компоненты/Тодо.jsи добавьте к нему следующий код.

Начните со следующего импорта. Обязательно включите использовать клиент флаг, чтобы пометить этот компонент как компонент на стороне клиента.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

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

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

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

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

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

Эти функции-обработчики отвечают за обработку добавления, удаления и редактирования задач пользователя в состоянии контекста.

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

Рендеринг компонента To-Do

Наконец, импортируйте компонент To-do в компонент страницы.

Для этого откройте файл page.js в каталоге src/app, удалите шаблонный код Next.js и добавьте приведенный ниже код:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Большой! На этом этапе вы сможете управлять состоянием приложения To-do Next.js с помощью контекста React.

Использование React Context API с другими технологиями управления состоянием

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

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