Vestavěné kontextové API Reactu je ideální pro sdílení stavu. Zjistěte, jak jej používat s nejnovější verzí Next.js.

Next.js nabízí několik přístupů ke správě stavu. Zatímco některé z těchto metod vyžadují instalaci nových knihoven, React’s Context API je vestavěné, takže je to skvělý způsob, jak snížit externí závislosti.

S React Context můžete plynule předávat data přes různé části stromu komponent, čímž eliminujete potíže s vrtáním podpěr. To je užitečné zejména pro správu globálního stavu, jako je stav přihlášení aktuálního uživatele nebo jeho preferované téma.

Pochopení React Context API

Než se ponoříte do kódu, je důležité pochopit, co je React Context API a jaký problém řeší.

Podpěry poskytují efektivní způsob sdílení dat mezi komponentami. Umožňují předávat data z nadřazené komponenty jejím podřízeným komponentám.

Tento přístup je užitečný, protože jasně ukazuje, které komponenty používají určitá data a jak tato data proudí ve stromu komponent.

Problémy však nastávají, když máte hluboko vnořené komponenty, které potřebují spotřebovat stejné rekvizity. Tato situace může představovat složitosti a potenciálně vést ke spletitému kódu, který je obtížnější udržovat. Tyto problémy, mimo jiné, jsou

instagram viewer
nevýhody podpěrného vrtání.

React Context řeší tento problém tím, že poskytuje centralizovanou metodu pro vytváření a používání dat, která musí být dostupná globálně, napříč komponentami.

Nastaví kontext pro uložení těchto dat a umožní komponentám k nim přistupovat. Tento přístup vám pomůže strukturovat vaši kódovou základnu, abyste zajistili, že je dobře organizovaná.

Kód tohoto projektu najdete v něm GitHub úložiště.

Začínáme se správou stavu v Next.js 13 Použití React Context API

Serverové komponenty Next.js vám umožňují vytvářet aplikace, které nejlépe využívají oba světy: interaktivitu aplikací na straně klienta a výkonnostní výhody serverového vykreslování.

Next.js 13 implementuje komponenty serveru v aplikace adresář – který je nyní stabilní – ve výchozím nastavení. Protože jsou však všechny komponenty vykreslovány serverem, můžete narazit na problémy při integraci knihoven na straně klienta nebo rozhraní API, jako je React Context.

Chcete-li se tomu vyhnout, skvělým řešením je používat klienta příznak, který můžete nastavit u souborů, které budou spouštět kód na straně klienta.

Chcete-li začít, vytvořte lokálně projekt Next.js 13 spuštěním tohoto příkazu v terminálu:

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

Po vytvoření projektu přejděte do jeho adresáře:

cd next-context-api

Poté spusťte vývojový server:

npm run dev

Jakmile nastavíte základní projekt Next.js, můžete vytvořit základní aplikaci pro úkoly, která využívá React Context API pro správu stavu.

Vytvořte poskytovatele kontextu

Soubor poskytovatele kontextu slouží jako centrální rozbočovač, kde definujete a spravujete globální stav, ke kterému komponenty potřebují přístup.

Vytvořte nový soubor, src/context/Todo.context.jsa naplňte jej následujícím kódem.

"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>
 );
};

Toto nastavení React Context definuje a TodoContext který zpočátku obsahuje stav prázdného seznamu úkolů pro aplikaci.

Kromě vytvoření počátečního stavu tato kontextová konfigurace zahrnuje a reduktor funkce, která definuje různé typy akcí. Tyto typy akcí upraví stav kontextu v závislosti na spuštěných akcích. V tomto případě akce zahrnují přidávání, odstraňování a úpravy úkolů.

The TodoContextProvider komponenta poskytuje TodoContext na další komponenty v aplikaci. Tato komponenta má dvě podpěry: hodnotu podpěry, což je počáteční stav kontextu, a podpěru reduktoru, což je funkce reduktoru.

Když komponenta spotřebovává TodoContext, může přistupovat ke stavu kontextu a odesílat akce k aktualizaci stavu.

Přidejte poskytovatele kontextu do aplikace Next.js

Nyní, abyste zajistili, že se poskytovatel kontextu vykreslí v kořenovém adresáři vaší aplikace Next.js a že k němu budou mít přístup všechny klientské komponenty, musíte přidat kontext do kořenové komponenty rozvržení aplikace.

Chcete-li to provést, otevřete src/app/layout.js soubor a zabalte podřízený uzel do šablony HTML s poskytovatelem kontextu následovně:

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>
 );
}

Vytvořte To-Do Component

Vytvořte nový soubor, src/components/Todo.jsa přidejte do něj následující kód.

Začněte provedením následujících importů. Nezapomeňte uvést používat klienta příznak pro označení této součásti jako součásti na straně klienta.

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

Dále definujte funkční komponentu, včetně prvků JSX, které se vykreslí v prohlížeči.

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>
 );
}

Tato funkční součást obsahuje vstupní pole pro přidání, úpravu a odstranění úkolů spolu s odpovídajícími tlačítky. Používá Podmíněné vykreslování Reactu pro zobrazení tlačítek pro úpravy a odstranění na základě hodnoty indexu úprav.

Nakonec definujte požadované stavové proměnné a požadované funkce obsluhy pro každý typ akce. Uvnitř komponenty funkce přidejte následující kód.

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("");
 };

Tyto obslužné funkce mají na starosti zpracování přidávání, mazání a úpravy úkolů uživatele v rámci stavu kontextu.

Zajišťují, že když uživatel přidá, odstraní nebo upraví úkol, budou příslušné akce odeslány do reduktoru kontextu, aby se odpovídajícím způsobem aktualizoval stav.

Vykreslit komponentu To-Do

Nakonec importujte komponentu To-do do komponenty stránky.

Chcete-li to provést, otevřete soubor page.js v adresáři src/app, odstraňte standardní kód Next.js a přidejte kód níže:

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


 </main>
 )
}

Skvělý! V tuto chvíli byste měli být schopni spravovat stav v aplikaci To-do Next.js pomocí React Context.

Použití kontextového rozhraní API React s dalšími technologiemi správy stavu

React Context API je skvělé řešení pro správu stavu. Je však možné jej používat spolu s dalšími knihovnami státní správy, jako je Redux. Tento hybridní přístup zajišťuje, že používáte nejlepší nástroj pro různé části vaší aplikace, které plní klíčové role.

Tímto způsobem můžete využít výhod různých řešení správy stavu a vytvořit efektivní a udržovatelné aplikace.