API-ul Context încorporat al lui React este perfect pentru partajarea stării. Aflați cum să îl utilizați cu cea mai recentă versiune de Next.js.

Next.js oferă mai multe abordări ale managementului de stat. În timp ce unele dintre aceste metode necesită instalarea de noi biblioteci, API-ul Context React este încorporat, deci este o modalitate excelentă de a reduce dependențele externe.

Cu React Context, puteți trece fără probleme date prin diferite părți ale arborelui componente, eliminând necazul găuririi cu prop. Acest lucru este util în special pentru gestionarea stării globale, cum ar fi starea de conectare a utilizatorului curent sau tema preferată.

Înțelegerea API-ului React Context

Înainte de a te scufunda în cod, este important să înțelegeți ce este API-ul React Context și ce problemă abordează.

Recuzitele oferă o metodă eficientă de partajare a datelor între componente. Acestea vă permit să transmiteți date de la o componentă părinte la componentele sale secundare.

Această abordare este utilă deoarece arată în mod clar care componente folosesc anumite date și modul în care acestea curg în arborele componentelor.

Cu toate acestea, problemele apar atunci când aveți componente profund imbricate care trebuie să consume aceleași elemente de recuzită. Această situație poate introduce complexități și poate duce la un cod complicat, care este mai greu de întreținut. Aceste probleme, printre altele, sunt dezavantajele forării cu prop.

React Context rezolvă această provocare oferind o metodă centralizată de a crea și de a utiliza date care trebuie să fie accesibile la nivel global, între componente.

Setează un context pentru a păstra aceste date, permițând componentelor să le acceseze. Această abordare vă ajută să vă structurați baza de cod pentru a vă asigura că este bine organizată.

Puteți găsi codul acestui proiect în documentul său GitHub repertoriu.

Noțiuni introductive cu gestionarea stării în Next.js 13 Utilizarea API-ului React Context

Componentele serverului Next.js vă permit să creați aplicații care profită de cele mai bune din ambele lumi: interactivitatea aplicațiilor de pe partea clientului și beneficiile de performanță ale redării serverului.

Next.js 13 implementează Componentele serverului în aplicația directorul – care acum este stabil – implicit. Cu toate acestea, deoarece toate componentele sunt randate pe server, este posibil să întâmpinați probleme atunci când integrați biblioteci pe partea client sau API-uri, cum ar fi React Context.

Pentru a evita acest lucru, o soluție excelentă este utilizați clientul marcaj pe care îl puteți seta pentru fișierele care vor rula cod la nivelul clientului.

Pentru a începe, creați un proiect Next.js 13 local, rulând această comandă în terminalul dvs.:

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

După crearea proiectului, navigați la directorul acestuia:

cd next-context-api

Apoi porniți serverul de dezvoltare:

npm run dev

După ce ați configurat un proiect de bază Next.js, puteți crea o aplicație de lucru de bază care utilizează API-ul React Context pentru gestionarea stării.

Creați furnizorul de context

Fișierul furnizor de context servește ca un hub central unde definiți și gestionați starea globală pe care componentele trebuie să o acceseze.

Creați un fișier nou, src/context/Todo.context.js, și populați-l cu următorul cod.

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

Această configurare React Context definește a TodoContext care deține inițial starea unei liste de activități goale pentru aplicație.

Pe lângă crearea stării inițiale, această configurație de context include a reductor funcție care definește diferite tipuri de acțiuni. Aceste tipuri de acțiuni vor modifica starea contextului în funcție de acțiunile declanșate. În acest caz, acțiunile includ adăugarea, ștergerea și editarea sarcinilor de făcut.

The TodoContextProvider componenta oferă TodoContext la alte componente din aplicație. Această componentă are două elemente de recuzită: prop de valoare, care este starea inițială a contextului, și prop de reductor, care este funcția de reducere.

Când o componentă consumă TodoContext, poate accesa starea contextului și poate trimite acțiuni pentru a actualiza starea.

Adăugați furnizorul de context în aplicația Next.js

Acum, pentru a vă asigura că furnizorul de context se redă la rădăcina aplicației dvs. Next.js și că toate componentele client o pot accesa, trebuie să adăugați contextul la componenta de aspect rădăcină a aplicației.

Pentru a face acest lucru, deschideți src/app/layout.js fișier și înfășurați nodul copii în șablonul HTML cu furnizorul de context, după cum urmează:

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

Creați o componentă de făcut

Creați un fișier nou, src/components/Todo.js, și adăugați următorul cod la acesta.

Începeți prin a efectua următoarele importuri. Asigurați-vă că includeți utilizați clientul flag pentru a marca această componentă ca componentă pe partea clientului.

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

Apoi, definiți componenta funcțională, inclusiv elementele JSX care vor fi redate în browser.

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

Această componentă funcțională include câmpuri de introducere pentru a adăuga, edita și șterge sarcini de făcut, împreună cu butoanele corespunzătoare. Folosește Redarea condiționată a lui React pentru a afișa butoanele de editare și ștergere pe baza valorii indexului de editare.

În cele din urmă, definiți variabilele de stare necesare și funcțiile de gestionare necesare pentru fiecare tip de acțiune. În interiorul componentei funcție, adăugați următorul cod.

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

Aceste funcții de gestionare sunt responsabile de gestionarea adăugării, ștergerii și editarii sarcinilor de făcut ale unui utilizator în starea contextului.

Acestea asigură că atunci când un utilizator adaugă, șterge sau editează o lucrare de făcut, acțiunile corespunzătoare sunt trimise la reductor de context pentru a actualiza starea în consecință.

Redați Componenta To-Do

În cele din urmă, importați componenta To-do în componenta pagină.

Pentru a face acest lucru, deschideți fișierul page.js din directorul src/app, ștergeți codul boilerplate Next.js și adăugați codul de mai jos:

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


 </main>
 )
}

Grozav! În acest moment, ar trebui să puteți gestiona starea în aplicația To-do Next.js folosind React Context.

Utilizarea React Context API cu alte tehnologii de management de stat

API-ul React Context este o soluție excelentă pentru managementul statului. Cu toate acestea, este posibil să îl utilizați alături de alte biblioteci de management de stat, cum ar fi Redux. Această abordare hibridă vă asigură că utilizați cel mai bun instrument pentru diferite părți ale aplicației dvs. care îndeplinesc roluri cheie.

Procedând astfel, puteți valorifica beneficiile diferitelor soluții de management de stat pentru a crea aplicații eficiente și ușor de întreținut.