De ingebouwde Context API van React is perfect voor het delen van statussen. Ontdek hoe u het kunt gebruiken met de nieuwste versie van Next.js.

Next.js biedt verschillende benaderingen van statusbeheer. Hoewel sommige van deze methoden het installeren van nieuwe bibliotheken vereisen, is de Context API van React ingebouwd, dus het is een geweldige manier om externe afhankelijkheden te verminderen.

Met React Context kunt u gegevens naadloos doorgeven aan verschillende delen van uw componentenboom, waardoor u geen last meer heeft van propboren. Dit is vooral handig voor het beheren van de algemene status, zoals de ingelogde status van de huidige gebruiker of het voorkeursthema.

Inzicht in de React Context-API

Voordat je in de code duikt, is het belangrijk om begrijp wat React Context API is en welk probleem het aanpakt.

Props bieden een effectieve methode voor het delen van gegevens tussen componenten. Hiermee kunt u gegevens van een bovenliggende component doorgeven aan de onderliggende componenten.

instagram viewer

Deze aanpak is nuttig omdat het duidelijk laat zien welke componenten bepaalde gegevens gebruiken en hoe die gegevens door de componentenboom stromen.

Er doen zich echter problemen voor als je diep geneste componenten hebt die dezelfde rekwisieten moeten verbruiken. Deze situatie kan voor complexiteit zorgen en mogelijk resulteren in ingewikkelde code die moeilijker te onderhouden is. Deze kwesties zijn onder meer de nadelen van propboren.

React Context lost deze uitdaging op door een gecentraliseerde methode te bieden voor het creëren en gebruiken van gegevens die wereldwijd toegankelijk moeten zijn, over alle componenten heen.

Het creëert een context waarin deze gegevens worden bewaard, zodat componenten er toegang toe hebben. Deze aanpak helpt u uw codebase te structureren, zodat deze goed georganiseerd is.

U kunt de code van dit project vinden in zijn GitHub opslagplaats.

Aan de slag met statusbeheer in Next.js 13 React Context API gebruiken

Met Next.js Server Components kunt u applicaties maken die het beste uit twee werelden halen: de interactiviteit van apps aan de clientzijde en de prestatievoordelen van serverrendering.

Next.js 13 implementeert servercomponenten in de app directory, die nu stabiel is, standaard. Omdat alle componenten echter door de server worden weergegeven, kunt u problemen tegenkomen bij het integreren van bibliotheken aan de clientzijde of API's zoals React Context.

Om dit te voorkomen, is een goede oplossing het gebruik cliënt vlag die u kunt instellen voor bestanden die code aan de clientzijde uitvoeren.

Om aan de slag te gaan, maakt u lokaal een Next.js 13-project door deze opdracht in uw terminal uit te voeren:

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

Nadat u het project hebt gemaakt, navigeert u naar de map:

cd next-context-api

Start vervolgens de ontwikkelingsserver:

npm run dev

Nadat u een eenvoudig Next.js-project heeft opgezet, kunt u een eenvoudige taken-app bouwen die gebruikmaakt van de React Context API voor statusbeheer.

Maak de contextprovider

Het contextproviderbestand fungeert als een centrale hub waar u de globale status definieert en beheert waartoe componenten toegang moeten hebben.

Maak een nieuw bestand, src/context/Todo.context.jsen vul het in met de volgende code.

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

Deze React Context-opstelling definieert a TodoContext die aanvankelijk de status bevat van een lege takenlijst voor de app.

Naast het creëren van de initiële status, omvat deze contextconfiguratie een verloopstuk functie die verschillende actietypen definieert. Deze actietypen zullen de status van de context wijzigen, afhankelijk van de geactiveerde acties. In dit geval omvatten de acties het toevoegen, verwijderen en bewerken van taken.

De TodoContextProvider onderdeel zorgt voor de TodoContext naar andere componenten in de applicatie. Deze component heeft twee rekwisieten nodig: de waardeprop, die de beginstatus van de context is, en de reducerprop, die de reducerfunctie is.

Wanneer een component de TodoContext gebruikt, heeft deze toegang tot de status van de context en kan hij acties verzenden om de status bij te werken.

Voeg de contextprovider toe aan de Next.js-app

Om er nu voor te zorgen dat de contextprovider in de hoofdmap van uw Next.js-toepassing wordt weergegeven en dat alle clientcomponenten er toegang toe hebben, moet u de context toevoegen aan de hoofdindelingscomponent van de app.

Om dit te doen, opent u de src/app/layout.js bestand en verpak het kinderknooppunt in de HTML-sjabloon met de contextprovider als volgt:

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

Maak een takencomponent

Maak een nieuw bestand, src/componenten/Todo.jsen voeg de volgende code eraan toe.

Begin met het maken van de volgende invoer. Zorg ervoor dat u de gebruik cliënt flag om deze component te markeren als een component aan de clientzijde.

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

Definieer vervolgens de functionele component, inclusief de JSX-elementen die in de browser worden weergegeven.

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

Dit functionele onderdeel bevat invoervelden voor het toevoegen, bewerken en verwijderen van taken, samen met bijbehorende knoppen. Het gebruikt De voorwaardelijke weergave van React om de knoppen Bewerken en Verwijderen weer te geven op basis van de bewerkingsindexwaarde.

Definieer ten slotte de vereiste statusvariabelen en de vereiste afhandelingsfuncties voor elk actietype. Voeg binnen de functiecomponent de volgende code toe.

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

Deze handlerfuncties zijn verantwoordelijk voor het afhandelen van het toevoegen, verwijderen en bewerken van de taken van een gebruiker binnen de status van de context.

Ze zorgen ervoor dat wanneer een gebruiker een taak toevoegt, verwijdert of bewerkt, de juiste acties naar de reducer van de context worden verzonden om de status dienovereenkomstig bij te werken.

Geef de taakcomponent weer

Importeer ten slotte de To-do-component in de paginacomponent.

Om dat te doen, opent u het page.js-bestand in de src/app-directory, verwijdert u de standaard Next.js-code en voegt u de onderstaande code toe:

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


 </main>
 )
}

Geweldig! Op dit punt zou u de status in de To-do Next.js-app moeten kunnen beheren met behulp van React Context.

React Context API gebruiken met andere State Management-technologieën

De React Context API is een geweldige oplossing voor statusbeheer. Niettemin is het mogelijk om het naast andere staatsbeheerbibliotheken zoals Redux te gebruiken. Deze hybride aanpak zorgt ervoor dat u de beste tool gebruikt voor verschillende delen van uw app die een sleutelrol vervullen.

Door dit te doen, kunt u profiteren van de voordelen van verschillende oplossingen voor statusbeheer om efficiënte en onderhoudbare applicaties te creëren.