Hoe React Context gebruiken voor statusbeheer in Next.js 13
Next.js biedt verschillende benaderingen voor statusbeheer. Sommige van deze methoden vereisen het installeren van nieuwe bibliotheken, maar React’s Context API is ingebouwd, dus het is een geweldige manier om externe afhankelijkheden te verminderen.
React Context zorgt voor de moeiteloze overdracht van informatie door een hiÃ"rarchie van componenten, waardoor opdringerige prop drilling overbodig wordt. Dit is vooral voordelig bij het bijhouden van globaal relevante gegevens, zoals de aanmeldstatus van de huidige geauthenticeerde gebruiker en zijn favoriete thema.
Inzicht in React Context API
Om effectief in de implementatie van de code te duiken, is het cruciaal om een uitgebreid inzicht te hebben in de React Context API en het doel ervan bij het aanpakken van specifieke uitdagingen.
Het gebruik van props zorgt voor een naadloze overdracht van informatie tussen onderling verbonden elementen, waardoor de overdracht van gegevens van een superieur component naar zijn ondergeschikte tegenhangers via een hiërarchische structuur wordt vergemakkelijkt.
Deze methode blijkt voordelig te zijn omdat het ondubbelzinnig de specifieke componenten laat zien die afhankelijk zijn van bepaalde informatie, samen met de daaropvolgende progressie van dergelijke gegevens door de hiërarchische structuur van componenten.
Er kunnen echter problemen ontstaan wanneer componenten met een ingewikkelde nesting identieke rekwisieten moeten delen. Dergelijke omstandigheden kunnen leiden tot complicaties en mogelijk uitmonden in ingewikkelde code die moeilijker te handhaven is. Een van deze en andere bezwaren heeft te maken met de nadelen van prop drilling.
React Context pakt het probleem van toegang tot globale gegevens aan door een uniforme aanpak te bieden voor het maken en gebruiken van informatie die beschikbaar moet zijn in verschillende componenten binnen een applicatie.
Het gebruik van een gestructureerde gegevenscontainer vergemakkelijkt het naadloos ophalen en manipuleren van informatie door verschillende systeemcomponenten. De organisatorische efficiëntie wordt hierdoor verbeterd, waardoor optimale functionaliteit binnen een anderszins complex netwerk wordt gegarandeerd.
De broncode voor dit project wordt gehost op onze GitHub repository, die toegankelijk is voor geïnteresseerde partijen.
Aan de slag met statusbeheer in Next.js 13 React Context API gebruiken
Next.js Server Components stellen ontwikkelaars in staat om applicaties te bouwen die naadloos de responsiviteit van client-side platforms integreren met de efficiëntiewinst die gepaard gaat met server-rendered content, waardoor een superieure gebruikerservaring wordt geboden terwijl de prestaties worden geoptimaliseerd.
Next.js versie 13 heeft standaard Server Components opgenomen in de map van de applicatie, wat nu als stabiel wordt beschouwd. Er moet echter worden opgemerkt dat, omdat alle componenten aan de serverkant worden gerenderd, er problemen kunnen ontstaan bij pogingen om client-side bibliotheken of API’s zoals React Context te integreren.
Een effectieve oplossing om dit probleem te voorkomen is het gebruik van de “client”-vlag, die kan worden toegepast op JavaScript-bestanden voor het uitvoeren van client-side code.
Om het proces te starten, kun je een Next.js 13 ontwikkelomgeving opzetten op je lokale machine met behulp van de volgende stappen in je terminal:
npx create-next-app@latest next-context-api
Om op een geavanceerde manier toegang te krijgen tot de map van een nieuw gemaakt project, volg je de volgende stappen:1. Nadat je het project hebt opgezet met behulp van een geschikte methodologie, ga je verder met het lokaliseren van de fysieke locatie op je bestandssysteem door te navigeren door de hiërarchische structuur van mappen en bestanden totdat je de aangewezen map bereikt die alle componenten bevat die gerelateerd zijn aan het project. Dit proces kan het gebruik van opdrachtregelinterfaces of grafische gebruikersinterfaces inhouden, afhankelijk van je besturingssysteem en voorkeuren.
cd next-context-api
Start vervolgens de ontwikkelserver:
npm run dev
Na het opzetten van een fundamentele Next.js projectstructuur, kan men een rudimentaire taakbeheerapplicatie bouwen die gebruik maakt van de React Context API als primaire manier om de status te beheren.
Maak de Context Provider
De functie Context Provider fungeert als een primaire bron waaraan verschillende componenten de benodigde globale informatie ontlenen, zodat ze effectief kunnen interageren met hun omgeving.
Maak een nieuw bestand aan met de naam src/context/Todo.context.js in je projectmap en plak de volgende code erin:javascriptimport { defineContext } from ‘vuex’;export default defineContext({id: ’todo’,state: () => ({todos: [],selectedTodo: null,isAllChecked: false,showForm: false,}),mutations: {setTodos(state, value) {state.todos = value;},addTodo(state, todo) {if (!state.todos.length) {return;}const updatedTodos = […state.todos
"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;
}
};
export const TodoContext = createContext({
state: initialState,
dispatch: () => null,
});
export const TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<TodoContext.Provider value={{ state, dispatch }}>
{children}
</TodoContext.Provider>
);
};
De huidige configuratie creëert een contextueel raamwerk voor React, aangeduid als “TodoContext”, dat begint met een lege takenlijst als de begintoestand voor de applicatie.
Naast het instellen van de begintoestand bevat deze contextconfiguratie een reducer-functie die verschillende actietypen schetst. De implementatie van deze actietypen veroorzaakt veranderingen in de status van de context op basis van de uitgevoerde bewerkingen.Deze acties kunnen bijvoorbeeld betrekking hebben op het invoegen, verwijderen of wijzigen van taken binnen de context.
de waarde prop, die de begintoestand van de context weergeeft, en de reducer prop, die de reductieoperatie functie aangeeft.
Bij opname van de TodoContext door een gegeven element is de huidige toestand van deze context opvraagbaar, samen met de mogelijkheid om signalen te propageren voor het wijzigen van de dispositie.
De contextprovider toevoegen aan de Next.js-applicatie
Om ervoor te zorgen dat de contextprovider op het hoogste niveau van je Next.js-applicatie wordt weergegeven, zodat alle client-side componenten er toegang toe hebben, is het noodzakelijk om de context op te nemen in de hoofdlay-outcomponent van de applicatie.
Om deze taak te volbrengen, opent u het bestand “src/app/layout.js” en sluit u de kindknooppunten in binnen een HTML-sjabloon door gebruik te maken van een contextprovider zoals hieronder wordt gedemonstreerd:
import './globals.css';
import { TodoContextProvider } from "@/context/Todo.context";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children
}) {
return (
<html lang="en">
<body>
<TodoContextProvider>{children}</TodoContextProvider>
</body>
</html>
);
}
Een To-Do component maken
Om een nieuw bestand aan te maken binnen de gespecificeerde mapstructuur, volgt u deze stappen:1. Open de teksteditor van uw voorkeur of de geïntegreerde ontwikkelomgeving (IDE).2. Navigeer naar de map “src” van uw project.3Zoek en selecteer in de map “src” de submap “components”.4. Klik op de knop “New File” in je teksteditor of IDE om een nieuw leeg document te genereren.5. Sla het nieuw aangemaakte bestand op met de naam “Todo.js”. Dit moet zowel in de submap “components” als in de overkoepelende map “src” gebeuren.6. Zodra het bestand is opgeslagen, kun je het bijgeleverde codefragment kopiëren en plakken in het nieuwe bestand “Todo.js”. Zorg ervoor dat de inspringing
Neem de noodzakelijke importverklaringen op, inclusief de vlag use client , en wijs dit component aan als een client-side component door de juiste vlaggen in het onderstaande codefragment te gebruiken:javascriptimport { use client } from ’next/client’;const MyComponent = () => {const [data, setData] = useState([]);// Gebruik hier de client-vlag…return ( {/* Your component’s JSX goes here */} );};export default MyComponent;
"use client"
import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";
Vervolgens zullen we het functionele aspect van onze toepassing afbakenen door de HTML-componenten te specificeren die in de webbrowser moeten worden weergegeven met behulp van JavaScript Extensible Markup Language (JSX).
export default function Todo() {
return (
<div style={{ marginBottom: "4rem", textAlign: "center" }}>
<h2>Todos</h2>
<input
type="text"
value={todoText}
onChange={(e) => setTodoText(e.target.value)}
style={{ marginBottom: 16}}
placeholder="Enter a todo"
/>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{state.todos.map((todo, index) => (
<li key={index}>
{index === editingIndex ? (
<>
<input
type="text"
value={editedTodo}
onChange={(e) => setEditedTodo(e.target.value)}
/>
<button
style={{ marginRight: 16}}
onClick={() => handleEditTodo(index, editedTodo)}
>
Save
</button>
</>
) : (
<>
{todo}
<button
style={{ marginRight: 16}}
onClick={() => setEditingIndex(index)}
>Edit</button>
<button
onClick={() => handleDeleteTodo(index)}
>Delete</button>
</>
)}
</li>
))}
</ul>
</div>
);
}
Deze functionele component omvat interactieve elementen voor het toevoegen, wijzigen en wissen van taken binnen een lijst.Deze componenten worden opgebouwd met behulp van React’s conditionele renderingmogelijkheden, die de knoppen Bewerken en Verwijderen weergeven afhankelijk van de huidige waarde van de indexeringsvariabele.
Ten slotte moet je de nodige toestandsvariabelen specificeren en geschikte handlerfuncties implementeren voor elk actietype in de body van de functionele component. Om dit te bereiken, neemt u de volgende coderegels op.
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("");
};
De bovengenoemde functionele verantwoordelijkheden omvatten het beheer van de taken van een gebruiker binnen de toestand van de context, inclusief het toevoegen, verwijderen en wijzigen ervan.
De middleware is er verantwoordelijk voor dat alle wijzigingen die een gebruiker aanbrengt in zijn taken, zoals toevoegen, verwijderen of bewerken, resulteren in de juiste updates die naar de reducer van de store worden gestuurd, zodat deze een accurate weergave van de staat van de applicatie kan beheren en onderhouden.
Het To-Do component renderen
Het To-Do component opnemen in de context van het pagina component door het te importeren.
Open het bestand “page.js” in de map “src/app” van je project om de gewenste taak uit te voeren. Zodra je dit bestand hebt geopend, verwijder je alle onnodige code die al is gekoppeld aan Next.js en voeg je het bijgeleverde codefragment toe.
import styles from './page.module.css'
import Todo from '../components/Todo'
export default function Home() {
return (
<main className={styles.main}>
<Todo />
</main>
)
}
Met de implementatie van React Context in de applicatie To-do Next.js kun je het statusbeheerproces inderdaad efficiënter afhandelen en manipuleren.
React Context API gebruiken met andere technologieën voor statusbeheer
De integratie van de React Context API met aanvullende oplossingen voor statusbeheer, zoals Redux, biedt de mogelijkheid om de voordelen van beide systemen samen te benutten. Door gebruik te maken van deze hybride strategie kunnen ontwikkelaars profiteren van de sterke punten van elke respectieve technologie en de prestaties van hun applicatie optimaliseren door de meest geschikte tools te gebruiken voor specifieke kritieke onderdelen binnen de softwarearchitectuur.
Door deze aanpak kan men de voordelen van verschillende toestandsbeheermethoden benutten om effectieve en goed georganiseerde softwaresystemen te ontwikkelen.