Reacts innebygde Context API er perfekt for tilstandsdeling. Finn ut hvordan du bruker den med den nyeste versjonen av Next.js.

Next.js tilbyr flere tilnærminger til statlig ledelse. Mens noen av disse metodene krever installasjon av nye biblioteker, er Reacts Context API innebygd, så det er en fin måte å redusere eksterne avhengigheter.

Med React Context kan du sømløst sende data gjennom forskjellige deler av komponenttreet ditt, noe som eliminerer bryet med propellboring. Dette er spesielt nyttig for å administrere global tilstand som gjeldende brukers påloggede status eller deres foretrukne tema.

Forstå React Context API

Før du dykker ned i koden, er det viktig å forstå hva React Context API er og hvilket problem det løser.

Rekvisitter gir en effektiv metode for å dele data mellom komponenter. De lar deg overføre data fra en overordnet komponent til dens underordnede komponenter.

Denne tilnærmingen er nyttig fordi den tydelig viser hvilke komponenter som bruker bestemte data og hvordan disse dataene flyter nedover komponenttreet.

instagram viewer

Imidlertid oppstår problemer når du har dypt nestede komponenter som trenger å konsumere de samme rekvisittene. Denne situasjonen kan introdusere kompleksitet og potensielt resultere i kronglete kode som er vanskeligere å vedlikeholde. Disse problemene er blant andre ulemper ved propellboring.

React Context løser denne utfordringen ved å tilby en sentralisert metode for å lage og bruke data som må være tilgjengelig globalt, på tvers av komponenter.

Den setter opp en kontekst for å holde disse dataene, slik at komponenter får tilgang til dem. Denne tilnærmingen hjelper deg med å strukturere kodebasen din for å sikre at den er godt organisert.

Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.

Komme i gang med State Management i Next.js 13 Bruke React Context API

Next.js-serverkomponenter lar deg lage applikasjoner som gjør det beste ut av begge verdener: interaktiviteten til apper på klientsiden og ytelsesfordelene ved servergjengivelse.

Next.js 13 implementerer serverkomponenter i app katalog – som nå er stabil – som standard. Men fordi alle komponentene er servergjengitt, kan du få problemer når du integrerer klientsidebiblioteker eller APIer som React Context.

For å unngå dette er en god løsning bruke klient flagg som du kan sette på filer som kjører kode på klientsiden.

For å komme i gang, lag et Next.js 13-prosjekt lokalt ved å kjøre denne kommandoen i terminalen din:

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

Etter å ha opprettet prosjektet, naviger til katalogen:

cd next-context-api

Start deretter utviklingsserveren:

npm run dev

Når du har satt opp et grunnleggende Next.js-prosjekt, kan du bygge en grunnleggende gjøremålsapp som bruker React Context API for statsadministrasjon.

Opprett kontekstleverandøren

Kontekstleverandørfilen fungerer som et sentralt knutepunkt der du definerer og administrerer den globale tilstanden som komponentene trenger tilgang til.

Opprett en ny fil, src/context/Todo.context.js, og fyll den med følgende kode.

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

Dette React Context-oppsettet definerer en TodoContext som i utgangspunktet har statusen til en tom gjøremålsliste for appen.

Bortsett fra å opprette den opprinnelige tilstanden, inkluderer denne kontekstkonfigurasjonen en redusering funksjon som definerer ulike handlingstyper. Disse handlingstypene vil endre kontekstens tilstand avhengig av de utløste handlingene. I dette tilfellet inkluderer handlingene å legge til, slette og redigere gjøremål.

De TodoContextProvider komponent gir TodoContext til andre komponenter i applikasjonen. Denne komponenten tar to rekvisitter: verdipropen, som er den opprinnelige tilstanden til konteksten, og reduksjonsrekvisitten, som er reduksjonsfunksjonen.

Når en komponent bruker TodoContext, kan den få tilgang til tilstanden til konteksten og sende handlinger for å oppdatere tilstanden.

Legg til kontekstleverandøren i Next.js-appen

Nå, for å sikre at kontekstleverandøren gjengir roten til Next.js-applikasjonen din, og at alle klientkomponenter har tilgang til den, må du legge til konteksten til appens rotlayoutkomponent.

For å gjøre dette, åpne src/app/layout.js fil og pakk barnenoden inn i HTML-malen med kontekstleverandøren som følger:

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

Lag en gjøremålskomponent

Opprett en ny fil, src/components/Todo.js, og legg til følgende kode til den.

Start med å gjøre følgende importer. Sørg for å inkludere bruke klient flagg for å merke denne komponenten som en komponent på klientsiden.

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

Definer deretter den funksjonelle komponenten, inkludert JSX-elementene som skal gjengis i nettleseren.

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

Denne funksjonelle komponenten inkluderer inndatafelt for å legge til, redigere og slette gjøremål, sammen med tilsvarende knapper. Det bruker Reacts betingede gjengivelse for å vise redigerings- og sletteknappene basert på redigeringsindeksverdien.

Til slutt, definer de nødvendige tilstandsvariablene og de nødvendige behandlerfunksjonene for hver handlingstype. Inne i funksjonskomponenten legger du til følgende kode.

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

Disse behandlerfunksjonene er ansvarlige for å håndtere tillegg, sletting og redigering av en brukers gjøremål innenfor kontekstens tilstand.

De sikrer at når en bruker legger til, sletter eller redigerer en gjøremål, sendes de nødvendige handlingene til kontekstens redusering for å oppdatere tilstanden tilsvarende.

Gjengi gjøremålskomponenten

Til slutt importerer du gjøremålskomponenten til sidekomponenten.

For å gjøre det åpner du page.js-filen i src/app-katalogen, sletter koden for Next.js, og legger til koden nedenfor:

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


 </main>
 )
}

Flott! På dette tidspunktet bør du kunne administrere tilstanden i To-do Next.js-appen ved å bruke React Context.

Bruk av React Context API med andre statlige administrasjonsteknologier

React Context API er en flott løsning for statsadministrasjon. Ikke desto mindre er det mulig å bruke det sammen med andre statlige administrasjonsbiblioteker som Redux. Denne hybride tilnærmingen sikrer at du bruker det beste verktøyet for ulike deler av appen din som utfører nøkkelroller.

Ved å gjøre det kan du dra nytte av fordelene med ulike statlige administrasjonsløsninger for å lage effektive og vedlikeholdbare applikasjoner.