Reactov vgrajen Context API je kot nalašč za deljenje stanja. Ugotovite, kako ga uporabljati z najnovejšo različico Next.js.

Next.js ponuja več pristopov k upravljanju stanja. Medtem ko nekatere od teh metod zahtevajo namestitev novih knjižnic, je Reactov Context API vgrajen, zato je odličen način za zmanjšanje zunanjih odvisnosti.

Z React Context lahko nemoteno prenašate podatke skozi različne dele drevesa komponent, s čimer odpravite težave z vrtanjem. To je še posebej uporabno za upravljanje globalnega stanja, kot je stanje prijavljenega trenutnega uporabnika ali njegova želena tema.

Razumevanje React Context API

Preden se poglobite v kodo, je pomembno, da razumeti, kaj je React Context API in kakšno težavo obravnava.

Rekviziti zagotavljajo učinkovito metodo za izmenjavo podatkov med komponentami. Omogočajo vam prenos podatkov iz nadrejene komponente v njene podrejene komponente.

Ta pristop je koristen, ker jasno pokaže, katere komponente uporabljajo določene podatke in kako ti podatki tečejo navzdol po drevesu komponent.

instagram viewer

Težave pa nastanejo, ko imate globoko ugnezdene komponente, ki morajo porabiti iste pripomočke. Ta situacija lahko povzroči zapletenost in potencialno povzroči zapleteno kodo, ki jo je težje vzdrževati. Ta vprašanja so med drugim slabosti vrtanja z vrtanjem.

React Context rešuje ta izziv z zagotavljanjem centralizirane metode za ustvarjanje in uporabo podatkov, ki morajo biti dostopni globalno, prek komponent.

Vzpostavi kontekst za shranjevanje teh podatkov, kar komponentam omogoča dostop do njih. Ta pristop vam pomaga strukturirati kodno zbirko, da zagotovite, da je dobro organizirana.

Kodo tega projekta najdete v GitHub repozitorij.

Začetek upravljanja stanja v Next.js 13 Uporaba React Context API

Strežniške komponente Next.js vam omogočajo ustvarjanje aplikacij, ki kar najbolje izkoristijo oba svetova: interaktivnost aplikacij na strani odjemalca in prednosti zmogljivosti upodabljanja strežnika.

Next.js 13 implementira strežniške komponente v aplikacija imenik—ki je zdaj stabilen—privzeto. Ker pa so vse komponente upodobljene na strežniku, lahko naletite na težave pri integraciji knjižnic ali API-jev na strani odjemalca, kot je React Context.

Da bi se temu izognili, je odlična rešitev uporabite odjemalca zastavico, ki jo lahko nastavite na datoteke, ki bodo izvajale kodo na strani odjemalca.

Za začetek ustvarite projekt Next.js 13 lokalno tako, da zaženete ta ukaz v vašem terminalu:

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

Ko ustvarite projekt, se pomaknite do njegovega imenika:

cd next-context-api

Nato zaženite razvojni strežnik:

npm run dev

Ko nastavite osnovni projekt Next.js, lahko zgradite osnovno aplikacijo za opravila, ki za upravljanje stanja uporablja React Context API.

Ustvarite ponudnika konteksta

Datoteka ponudnika konteksta služi kot osrednje vozlišče, kjer definirate in upravljate globalno stanje, do katerega morajo komponente dostopati.

Ustvari novo datoteko, src/context/Todo.context.jsin ga zapolnite z naslednjo kodo.

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

Ta nastavitev konteksta React definira a TodoContext ki na začetku vsebuje stanje praznega seznama opravil za aplikacijo.

Poleg ustvarjanja začetnega stanja ta kontekstna konfiguracija vključuje a reduktor funkcija, ki določa različne vrste dejanj. Te vrste dejanj bodo spremenile stanje konteksta glede na sprožena dejanja. V tem primeru dejanja vključujejo dodajanje, brisanje in urejanje opravil.

The TodoContextProvider komponenta zagotavlja TodoContext na druge komponente v aplikaciji. Ta komponenta ima dva propa: prop vrednosti, ki je začetno stanje konteksta, in prop reduktorja, ki je funkcija reduktorja.

Ko komponenta porabi TodoContext, lahko dostopa do stanja konteksta in pošilja dejanja za posodobitev stanja.

Dodajte ponudnika konteksta v aplikacijo Next.js

Če želite zdaj zagotoviti, da se ponudnik konteksta upodablja v korenu vaše aplikacije Next.js in da lahko vse odjemalske komponente dostopajo do njega, morate dodati kontekst v komponento korenske postavitve aplikacije.

Če želite to narediti, odprite src/aplikacija/layout.js in ovijte podrejeno vozlišče v predlogo HTML s ponudnikom konteksta, kot sledi:

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

Ustvarite komponento To-Do

Ustvari novo datoteko, src/komponente/Todo.jsin ji dodajte naslednjo kodo.

Začnite z naslednjimi uvozi. Ne pozabite vključiti uporabite odjemalca zastavico za označevanje te komponente kot komponente na strani odjemalca.

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

Nato definirajte funkcionalno komponento, vključno z elementi JSX, ki bodo upodobljeni v brskalniku.

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

Ta funkcionalna komponenta vključuje vnosna polja za dodajanje, urejanje in brisanje opravil, skupaj z ustreznimi gumbi. Uporablja se Reactovo pogojno upodabljanje za prikaz gumbov za urejanje in brisanje na podlagi vrednosti indeksa urejanja.

Na koncu definirajte zahtevane spremenljivke stanja in zahtevane funkcije obravnave za vsako vrsto dejanja. Znotraj funkcijske komponente dodajte naslednjo kodo.

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

Te funkcije obdelovalca so zadolžene za ravnanje z dodajanjem, brisanjem in urejanjem uporabnikovih opravil znotraj stanja konteksta.

Zagotavljajo, da ko uporabnik doda, izbriše ali uredi opravilo, se ustrezna dejanja pošljejo reduktorju konteksta, da ustrezno posodobi stanje.

Upodobite komponento opravila

Končno uvozite komponento To-do v komponento strani.

To naredite tako, da odprete datoteko page.js v imeniku src/app, izbrišete kodo Next.js za predlogo in dodate spodnjo kodo:

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


 </main>
 )
}

Super! Na tej točki bi morali biti sposobni upravljati stanje v aplikaciji To-do Next.js z uporabo React Context.

Uporaba React Context API z drugimi tehnologijami za upravljanje stanja

React Context API je odlična rešitev za upravljanje stanja. Kljub temu ga je mogoče uporabljati skupaj z drugimi knjižnicami za upravljanje stanja, kot je Redux. Ta hibridni pristop zagotavlja uporabo najboljšega orodja za različne dele vaše aplikacije, ki opravljajo ključne vloge.

S tem lahko izkoristite prednosti različnih rešitev za upravljanje stanja in ustvarite učinkovite aplikacije, ki jih je mogoče vzdrževati.