Вграденият контекстен API на React е идеален за споделяне на състояние. Разберете как да го използвате с най-новата версия на Next.js.

Next.js предлага няколко подхода за управление на състоянието. Въпреки че някои от тези методи изискват инсталиране на нови библиотеки, контекстният API на React е вграден, така че е чудесен начин за намаляване на външните зависимости.

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

Разбиране на React Context API

Преди да се потопите в кода, е важно да разберете какво представлява 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 Context дефинира a TodoContext който първоначално съдържа състоянието на празен списък със задачи за приложението.

Освен създаването на първоначалното състояние, тази контекстна конфигурация включва a редуктор функция, която дефинира различни видове действия. Тези типове действия ще променят състоянието на контекста в зависимост от задействаните действия. В този случай действията включват добавяне, изтриване и редактиране на задачи.

The TodoContextProvider компонент осигурява TodoContext към други компоненти в приложението. Този компонент приема два пропса: проп стойността, който е първоначалното състояние на контекста, и проп редуктора, който е редукторната функция.

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

Добавете доставчика на контекст към приложението Next.js

Сега, за да сте сигурни, че доставчикът на контекст се изобразява в основата на вашето приложение Next.js и че всички клиентски компоненти имат достъп до него, трябва да добавите контекста към основния компонент на оформлението на приложението.

За да направите това, отворете src/app/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>
 );
}

Създайте компонент To-Do

Създайте нов файл, src/компоненти/Todo.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

И накрая, импортирайте компонента Задачи в компонента на страницата.

За да направите това, отворете файла 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 Context.

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

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

По този начин можете да се възползвате от предимствата на различните решения за управление на състоянието, за да създадете ефективни и поддържаеми приложения.