Reacts inbyggda Context API är perfekt för tillståndsdelning. Ta reda på hur du använder den med den senaste versionen av Next.js.

Next.js erbjuder flera metoder för statlig förvaltning. Medan vissa av dessa metoder kräver installation av nya bibliotek, är Reacts Context API inbyggt, så det är ett utmärkt sätt att minska externa beroenden.

Med React Context kan du sömlöst skicka data genom olika delar av ditt komponentträd, vilket eliminerar besväret med propellborrning. Detta är särskilt användbart för att hantera global status som den aktuella användarens inloggade status eller deras föredragna tema.

Förstå React Context API

Innan du dyker in i koden är det viktigt att förstå vad React Context API är och vilket problem det löser.

Rekvisita ger en effektiv metod för att dela data mellan komponenter. De låter dig överföra data från en överordnad komponent till dess underordnade komponenter.

Det här tillvägagångssättet är användbart eftersom det tydligt visar vilka komponenter som använder viss data och hur dessa data flödar ner i komponentträdet.

instagram viewer

Men problem uppstår när du har djupt kapslade komponenter som behöver konsumera samma rekvisita. Denna situation kan introducera komplexitet och potentiellt resultera i krystad kod som är svårare att underhålla. Dessa frågor, bland andra, är nackdelar med propborrning.

React Context löser denna utmaning genom att tillhandahålla en centraliserad metod för att skapa och använda data som måste vara tillgänglig globalt, över komponenter.

Den ställer in ett sammanhang för att hålla dessa data, vilket gör att komponenter kan komma åt dem. Detta tillvägagångssätt hjälper dig att strukturera din kodbas för att säkerställa att den är välorganiserad.

Du kan hitta detta projekts kod i dess GitHub förvaret.

Komma igång med State Management i Next.js 13 Använda React Context API

Next.js-serverkomponenter låter dig skapa applikationer som gör det bästa av två världar: interaktiviteten hos appar på klientsidan och prestandafördelarna med serverrendering.

Next.js 13 implementerar serverkomponenter i app katalog – som nu är stabil – som standard. Men eftersom alla komponenter är serverrenderade kan du stöta på problem när du integrerar bibliotek på klientsidan eller API: er som React Context.

För att undvika detta är en bra lösning använda klienten flagga som du kan ställa in på filer som kör kod på klientsidan.

För att komma igång, skapa ett Next.js 13-projekt lokalt genom att köra det här kommandot i din terminal:

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

När du har skapat projektet, navigera till dess katalog:

cd next-context-api

Starta sedan utvecklingsservern:

npm run dev

När du har konfigurerat ett grundläggande Next.js-projekt kan du bygga en grundläggande att-göra-app som använder React Context API för tillståndshantering.

Skapa kontextleverantören

Kontextleverantörsfilen fungerar som ett centralt nav där du definierar och hanterar det globala tillstånd som komponenter behöver åtkomst till.

Skapa en ny fil, src/context/Todo.context.js, och fyll i den med följande kod.

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

Denna React Context-inställning definierar en TodoContext som initialt har statusen för en tom att göra-lista för appen.

Förutom att skapa det initiala tillståndet innehåller denna kontextkonfiguration en reducerare funktion som definierar olika åtgärdstyper. Dessa åtgärdstyper kommer att ändra kontextens tillstånd beroende på de utlösta åtgärderna. I det här fallet inkluderar åtgärderna att lägga till, ta bort och redigera uppgifter.

De TodoContextProvider komponent ger TodoContext till andra komponenter i applikationen. Den här komponenten tar två rekvisita: värdepropet, som är det initiala tillståndet för sammanhanget, och reducerstödet, som är reduceringsfunktionen.

När en komponent använder TodoContext kan den komma åt tillståndet för sammanhanget och skicka åtgärder för att uppdatera tillståndet.

Lägg till Context Provider till Next.js-appen

Nu, för att säkerställa att kontextleverantören renderar i roten av din Next.js-applikation och att alla klientkomponenter kan komma åt den, måste du lägga till sammanhanget till appens rotlayoutkomponent.

För att göra detta, öppna src/app/layout.js fil och slå in barnnoden i HTML-mallen med kontextleverantören enligt följande:

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

Skapa en Att göra-komponent

Skapa en ny fil, src/components/Todo.js, och lägg till följande kod till den.

Börja med att göra följande importer. Se till att inkludera använda klienten flagga för att markera den här komponenten som en komponent på klientsidan.

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

Därefter definierar du den funktionella komponenten, inklusive JSX-elementen som ska renderas i webbläsaren.

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

Denna funktionella komponent innehåller inmatningsfält för att lägga till, redigera och ta bort att göra, tillsammans med motsvarande knappar. Det använder Reacts villkorliga rendering för att visa redigerings- och raderingsknapparna baserat på redigeringsindexvärdet.

Slutligen, definiera de nödvändiga tillståndsvariablerna och de nödvändiga hanterarfunktionerna för varje åtgärdstyp. Inuti funktionskomponenten lägger du till följande kod.

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

Dessa hanterarfunktioner är ansvariga för att hantera tillägg, radering och redigering av en användares att göra i sammanhangets tillstånd.

De säkerställer att när en användare lägger till, tar bort eller redigerar en att göra, skickas lämpliga åtgärder till kontextens reducerare för att uppdatera tillståndet därefter.

Gör att göra-komponenten

Importera slutligen Att-göra-komponenten till sidkomponenten.

För att göra det öppnar du filen page.js i src/app-katalogen, tar bort koden Next.js och lägger till koden nedan:

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


 </main>
 )
}

Bra! Vid det här laget bör du kunna hantera tillståndet i To-do Next.js-appen med hjälp av React Context.

Använda React Context API med andra tillståndshanteringsteknologier

React Context API är en utmärkt lösning för statlig förvaltning. Ändå är det möjligt att använda det tillsammans med andra statliga förvaltningsbibliotek som Redux. Den här hybridmetoden säkerställer att du använder det bästa verktyget för olika delar av din app som har nyckelroller.

Genom att göra det kan du dra nytta av fördelarna med olika statliga hanteringslösningar för att skapa effektiva och underhållbara applikationer.