Hur man använder React Context för statshantering i Next.js 13
Next.js erbjuder flera olika sätt att hantera tillstånd. Medan vissa av dessa metoder kräver installation av nya bibliotek, är React’s Context API inbyggt, så det är ett bra sätt att minska externa beroenden.
React Context gör det möjligt att enkelt överföra information genom en komponenthierarki, vilket minskar behovet av påträngande propborrning. Detta visar sig vara särskilt fördelaktigt för att upprätthålla globalt relevanta data som den för närvarande autentiserade användarens inloggningsstatus och deras favorittema.
Förståelse för React Context API
För att effektivt kunna fördjupa sig i implementeringen av koden är det viktigt att ha en omfattande förståelse för React Context API och dess syfte när det gäller att hantera specifika utmaningar.
Att använda rekvisita möjliggör en sömlös överföring av information mellan sammankopplade element, vilket underlättar överföringen av data från en överordnad komponent till dess underordnade motsvarigheter genom en hierarkisk struktur.
Denna metod visar sig vara fördelaktig eftersom den otvetydigt visar de specifika komponenter som är beroende av viss information, tillsammans med den efterföljande utvecklingen av sådana data genom den hierarkiska strukturen av komponenter.
Det kan dock uppstå svårigheter när komponenter med komplicerad indelning måste dela på identiska rekvisita. Sådana omständigheter kan ge upphov till komplikationer och eventuellt leda till invecklad kod som är svårare att upprätthålla. Bland dessa problem, liksom andra, finns de nackdelar som är förknippade med prop drilling.
React Context löser problemet med åtkomst till globala data genom att erbjuda en enhetlig metod för att skapa och använda information som måste vara tillgänglig i olika komponenter i en applikation.
Användningen av en strukturerad databehållare underlättar sömlös hämtning och hantering av information i olika systemkomponenter. Organisationens effektivitet förbättras därigenom, vilket säkerställer optimal funktionalitet i ett annars komplext nätverk.
Källkoden för detta projekt finns i vårt GitHub-repository, som kan nås av intresserade parter.
Komma igång med State Management i Next.js 13 Använda React Context API
Next.js Server Components gör det möjligt för utvecklare att bygga applikationer som sömlöst integrerar responsiviteten hos plattformar på klientsidan med de effektivitetsvinster som förknippas med serverrenderat innehåll och därigenom erbjuder en överlägsen användarupplevelse samtidigt som prestandan optimeras.
Next.js version 13 har som standard integrerat serverkomponenter i applikationens katalog, vilket nu anses vara stabilt. Det bör dock noteras att eftersom alla komponenter renderas på serversidan kan det uppstå problem när man försöker integrera bibliotek på klientsidan eller API:er som React Context.
En effektiv lösning för att förhindra detta problem är att använda flaggan “client”, som kan användas på JavaScript-filer för att exekvera kod på klientsidan.
För att starta processen kan du skapa en Next.js 13-utvecklingsmiljö på din lokala dator med hjälp av följande steg i terminalen:
npx create-next-app@latest next-context-api
Följ dessa steg för att få tillgång till katalogen för ett nyskapat projekt på ett sofistikerat sätt:1. När du har skapat projektet med en lämplig metod fortsätter du att lokalisera dess fysiska plats på filsystemet genom att navigera genom den hierarkiska strukturen av kataloger och filer tills du når den angivna mappen som innehåller alla komponenter som är relaterade till projektet. Denna process kan innebära att du använder kommandoradsgränssnitt eller grafiska användargränssnitt beroende på ditt operativsystem och dina preferenser.
cd next-context-api
Starta sedan utvecklingsservern:
npm run dev
Efter att ha etablerat en grundläggande Next.js-projektstruktur kan man konstruera en rudimentär uppgiftshanteringsapplikation som utnyttjar React Context API som sitt primära sätt att styra staten.
Skapa Context Provider
Funktionen Context Provider fungerar som en primär källa från vilken olika komponenter hämtar nödvändig global information, vilket gör att de kan interagera med sin omgivning på ett effektivt sätt.
Skapa en ny fil med namnet src/context/Todo.context.js i din projektkatalog och klistra in följande kod i den: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>
);
};
Den här konfigurationen skapar ett kontextuellt ramverk för React, kallat “TodoContext”, som börjar med en tom aktivitetslista som det ursprungliga tillståndet för applikationen.
Förutom att etablera starttillståndet innehåller denna kontextkonfiguration en reduceringsfunktion som beskriver flera åtgärdstyper. Implementeringen av dessa åtgärdstyper kommer att orsaka förändringar i kontextens tillstånd baserat på de utförda operationerna.Dessa åtgärder kan t.ex. innebära införande, borttagning eller ändring av att göra-objekt i kontexten.
value prop, som representerar kontextens starttillstånd, och reducer prop, som betecknar reduktionsoperationens funktion.
Vid intag av TodoContext av ett givet element kan det aktuella tillståndet för kontexten hämtas, tillsammans med möjligheten att sprida signaler för att ändra dess disposition.
Lägg till kontextleverantören i Next.js-appen
För att kontextleverantören ska återges på den översta nivån i din Next.js-applikation, så att alla komponenter på klientsidan har tillgång till den, är det nödvändigt att inkludera kontexten i applikationens rotlayoutkomponent.
För att utföra den här uppgiften ska du öppna filen “src/app/layout.js” och bifoga underordnade noder i en HTML-mall med hjälp av en context provider enligt nedanstående exempel:
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>
);
}
Skapa en att göra-komponent
För att skapa en ny fil inom den angivna katalogstrukturen, följ dessa steg:1. Öppna din föredragna textredigerare eller integrerade utvecklingsmiljö (IDE).2. Navigera till mappen “src” i ditt projekt.3.I mappen “src” letar du upp och väljer undermappen “components”.4. Klicka på knappen “Ny fil” i din textredigerare eller IDE för att skapa ett nytt tomt dokument.5. Spara den nyskapade filen med namnet “Todo.js”. Detta bör göras både i undermappen “components” och i den övergripande mappen “src”.6. När filen har sparats kan du sedan kopiera och klistra in det medföljande kodavsnittet i den nya filen “Todo.js”. Se till att indraget
Införliva de nödvändiga importangivelserna, inklusive use client flaggan, och utse den här komponenten som en klientkomponent genom att använda lämpliga flaggor i kodavsnittet nedan:javascriptimport { use client } from ’next/client’;const MyComponent = () => {const [data, setData] = useState([]);// Använd klientflaggan här…return ( {/* Din komponents JSX hamnar här */} );};export default MyComponent;
"use client"
import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";
Därefter ska vi definiera den funktionella aspekten av vår applikation genom att ange de HTML-komponenter som ska återges i webbläsaren med hjälp av 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>
);
}
Denna funktionella komponent omfattar interaktiva element för att lägga till, ändra och radera uppgifter i en lista.Dessa komponenter är konstruerade med hjälp av Reacts funktioner för villkorlig rendering, som visar redigerings- och borttagningsknapparna beroende på indexeringsvariabelns aktuella värde.
Slutligen måste man ange de nödvändiga tillståndsvariablerna och implementera lämpliga hanteringsfunktioner för varje åtgärdstyp inom den funktionella komponentens kropp. För att åstadkomma detta, införliva följande kodrader.
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 ovannämnda funktionella ansvarsområdena omfattar hanteringen av en användares uppgifter inom kontextens tillstånd, inklusive tillägg, borttagning och ändring av dessa.
Mellanvaran ansvarar för att säkerställa att alla ändringar som en användare gör i sina uppgifter, t.ex. lägga till, ta bort eller redigera dem, resulterar i att rätt uppdateringar skickas till butikens reducerare så att den kan hantera och upprätthålla en korrekt representation av applikationens tillstånd.
Rendera komponenten Att göra
Införliva komponenten Att göra i kontexten för sidkomponenten genom att importera den.
För att utföra den önskade uppgiften, vänligen öppna filen “page.js” som finns i mappen “src/app” i ditt projekt. När du har öppnat filen ber vi dig att ta bort all onödig befintlig kod som är kopplad till Next.js och infoga det medföljande kodavsnittet i filen.
import styles from './page.module.css'
import Todo from '../components/Todo'
export default function Home() {
return (
<main className={styles.main}>
<Todo />
</main>
)
}
Med implementeringen av React Context i To-do Next.js-applikationen kan man effektivt hantera och manipulera tillståndshanteringsprocessen på ett mer effektivt sätt.
Använda React Context API med andra tekniker för tillståndshantering
Integrationen av React Context API med ytterligare lösningar för tillståndshantering som Redux ger möjlighet att utnyttja fördelarna med båda systemen i tandem. Genom att använda denna hybridstrategi kan utvecklare dra nytta av styrkorna hos respektive teknik och optimera applikationens prestanda genom att använda de mest lämpliga verktygen för specifika kritiska komponenter inom programvaruarkitekturen.
Genom detta tillvägagångssätt kan man utnyttja fördelarna med olika state management-metoder för att utveckla effektiva och välorganiserade programvarusystem.