Reactov ugrađeni Context API savršen je za dijeljenje stanja. Saznajte kako ga koristiti s najnovijom verzijom Next.js.

Next.js nudi nekoliko pristupa upravljanju stanjem. Iako neke od ovih metoda zahtijevaju instaliranje novih biblioteka, Reactov Context API je ugrađen, tako da je to izvrstan način smanjenja vanjskih ovisnosti.

S React Contextom možete neprimjetno proslijediti podatke kroz različite dijelove vašeg stabla komponenti, eliminirajući gnjavažu oko bušenja. Ovo je posebno korisno za upravljanje globalnim stanjem kao što je status prijavljenog korisnika ili njegova željena tema.

Razumijevanje React Context API-ja

Prije nego što uđete u kod, važno je razumjeti što je React Context API i koji problem rješava.

Rekviziti pružaju učinkovitu metodu za dijeljenje podataka između komponenti. Oni vam omogućuju prijenos podataka od nadređene komponente do njezinih podređenih komponenti.

Ovaj pristup je koristan jer jasno pokazuje koje komponente koriste određene podatke i kako ti podaci teku niz stablo komponenti.

instagram viewer

Međutim, problemi nastaju kada imate duboko ugniježđene komponente koje trebaju konzumirati iste rekvizite. Ova situacija može dovesti do složenosti i potencijalno rezultirati zamršenim kodom koji je teže održavati. Ta su pitanja, među ostalima nedostaci propelerskog bušenja.

React Context rješava ovaj izazov pružajući centraliziranu metodu za stvaranje i korištenje podataka koji trebaju biti dostupni globalno, preko komponenti.

Postavlja kontekst za čuvanje ovih podataka, dopuštajući komponentama da im pristupe. Ovaj vam pristup pomaže da strukturirate svoju bazu kodova kako biste bili sigurni da je dobro organizirana.

Kôd ovog projekta možete pronaći u GitHub spremište.

Početak rada s upravljanjem stanjem u Next.js 13 Korištenje React Context API-ja

Komponente poslužitelja Next.js omogućuju vam da stvorite aplikacije koje čine najbolje iz oba svijeta: interaktivnost aplikacija na strani klijenta i prednosti performansi prikazivanja poslužitelja.

Next.js 13 implementira poslužiteljske komponente u aplikacija imenik—koji je sada stabilan—prema zadanim postavkama. Međutim, budući da su sve komponente prikazane na poslužitelju, možete naići na probleme prilikom integracije biblioteka ili API-ja na strani klijenta kao što je React Context.

Da biste to izbjegli, odlično rješenje je koristiti klijenta zastavu koju možete postaviti na datoteke koje će pokretati kod na strani klijenta.

Za početak kreirajte projekt Next.js 13 lokalno pokretanjem ove naredbe na svom terminalu:

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

Nakon izrade projekta, idite do njegovog direktorija:

cd next-context-api

Zatim pokrenite razvojni poslužitelj:

npm run dev

Nakon što postavite osnovni Next.js projekt, možete izraditi osnovnu aplikaciju za obavljanje zadataka koja koristi React Context API za upravljanje stanjem.

Stvorite pružatelja konteksta

Datoteka pružatelja konteksta služi kao središnje čvorište gdje definirate i upravljate globalnim stanjem kojem komponente trebaju pristupiti.

Stvorite novu datoteku, src/kontekst/Todo.context.js, i popunite ga sljedećim kodom.

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

Ova postavka React konteksta definira a TodoContext koji inicijalno drži stanje praznog popisa obaveza za aplikaciju.

Osim stvaranja početnog stanja, ova konfiguracija konteksta uključuje a reduktor funkcija koja definira različite vrste radnji. Ove vrste radnji izmijenit će stanje konteksta ovisno o pokrenutim radnjama. U ovom slučaju radnje uključuju dodavanje, brisanje i uređivanje obaveza.

The TodoContextProvider komponenta pruža TodoContext drugim komponentama u aplikaciji. Ova komponenta ima dva props-a: prop vrijednosti, koji je početno stanje konteksta, i prop reduktora, koji je funkcija reduktora.

Kada komponenta potroši TodoContext, može pristupiti stanju konteksta i poslati radnje za ažuriranje stanja.

Dodajte pružatelja konteksta aplikaciji Next.js

Sada, kako biste osigurali da se pružatelj konteksta prikazuje u korijenu vaše Next.js aplikacije i da mu sve klijentske komponente mogu pristupiti, morate dodati kontekst u korijensku komponentu rasporeda aplikacije.

Da biste to učinili, otvorite src/aplikacija/layout.js datoteku i zamotajte podređeni čvor u HTML predložak s pružateljem konteksta na sljedeći način:

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

Stvorite komponentu obaveza

Stvorite novu datoteku, src/komponente/Todo.jsi dodajte mu sljedeći kod.

Započnite sa sljedećim uvozima. Obavezno uključite koristiti klijenta zastavica za označavanje ove komponente kao komponente na strani klijenta.

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

Zatim definirajte funkcionalnu komponentu, uključujući JSX elemente koji će se prikazati u pregledniku.

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

Ova funkcionalna komponenta uključuje polja za unos za dodavanje, uređivanje i brisanje obaveza, zajedno s odgovarajućim gumbima. Koristi se Reactovo uvjetno iscrtavanje za prikaz gumba za uređivanje i brisanje na temelju vrijednosti indeksa za uređivanje.

Na kraju, definirajte potrebne varijable stanja i potrebne funkcije rukovatelja za svaku vrstu akcije. Unutar funkcijske komponente dodajte sljedeći 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("");
 };

Ove funkcije rukovatelja zadužene su za rukovanje dodavanjem, brisanjem i uređivanjem korisničkih zadataka unutar stanja konteksta.

Oni osiguravaju da kada korisnik doda, izbriše ili uredi zadatak, odgovarajuće akcije se šalju reduktoru konteksta kako bi se stanje ažuriralo u skladu s tim.

Renderirajte To-Do komponentu

Na kraju, uvezite komponentu To-do u komponentu stranice.

Da biste to učinili, otvorite datoteku page.js u direktoriju src/app, izbrišite predložak Next.js koda i dodajte kod u nastavku:

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


 </main>
 )
}

Sjajno! U ovom trenutku trebali biste moći upravljati stanjem u aplikaciji To-do Next.js koristeći React Context.

Korištenje React Context API-ja s drugim tehnologijama upravljanja stanjem

React Context API izvrsno je rješenje za upravljanje stanjem. Unatoč tome, moguće ju je koristiti uz druge knjižnice za upravljanje stanjem poput Reduxa. Ovaj hibridni pristup osigurava korištenje najboljeg alata za različite dijelove vaše aplikacije koji imaju ključne uloge.

Na taj način možete kapitalizirati prednosti različitih rješenja za upravljanje stanjem kako biste stvorili učinkovite aplikacije koje se mogu održavati.