Kā izmantot React kontekstu valsts pārvaldībai vietnē Next.js 13

Next.js piedāvā vairākas pieejas valsts pārvaldībai. Lai gan dažām no šīm metodēm ir jāinstalē jaunas bibliotēkas, React's Context API ir iebūvēts, tāpēc tas ir lielisks veids, kā samazināt ārējās atkarības.

Izmantojot React Context, varat nemanāmi nosūtīt datus caur dažādām komponentu koka daļām, novēršot urbšanas problēmas. Tas ir īpaši noderīgi, lai pārvaldītu globālo stāvokli, piemēram, pašreizējā lietotāja pieteikšanās statusu vai vēlamo tēmu.

React Context API izpratne

Pirms iedziļināties kodā, ir svarīgi saprast, kas ir React Context API un kādu problēmu tas risina.

Rekvizīti nodrošina efektīvu metodi datu apmaiņai starp komponentiem. Tie ļauj pārsūtīt datus no vecākkomponenta uz tā pakārtotajiem komponentiem.

Šī pieeja ir noderīga, jo tā skaidri parāda, kuri komponenti izmanto noteiktus datus un kā šie dati plūst lejup komponentu kokā.

Tomēr problēmas rodas, ja jums ir dziļi ligzdoti komponenti, kuriem jāpatērē tie paši rekvizīti. Šī situācija var radīt sarežģījumus un, iespējams, radīt sarežģītu kodu, kuru ir grūtāk uzturēt. Šie jautājumi, cita starpā, ir

balstu urbšanas trūkumi.

React Context atrisina šo problēmu, nodrošinot centralizētu metodi, lai izveidotu un izmantotu datus, kuriem jābūt pieejamiem globāli, visos komponentos.

Tas izveido kontekstu šo datu glabāšanai, ļaujot komponentiem tiem piekļūt. Šī pieeja palīdz strukturēt kodu bāzi, lai tā būtu labi sakārtota.

Jūs varat atrast šī projekta kodu tajā GitHub krātuve.

Darba sākšana ar valsts pārvaldību vietnē Next.js 13, izmantojot React Context API

Next.js servera komponenti ļauj izveidot lietojumprogrammas, kas vislabāk izmanto abas pasaules: klienta puses lietotņu interaktivitāti un servera renderēšanas veiktspējas priekšrocības.

Next.js 13 ievieš servera komponentus lietotne direktoriju, kas tagad ir stabils, pēc noklusējuma. Tomēr, tā kā visas sastāvdaļas ir atveidotas serverī, var rasties problēmas, integrējot klienta puses bibliotēkas vai API, piemēram, React Context.

Lai no tā izvairītos, lielisks risinājums ir izmantot klientu karodziņu, ko varat iestatīt failiem, kuros tiks palaists klienta puses kods.

Lai sāktu, izveidojiet Next.js 13 projektu lokāli, terminālī izpildot šo komandu:

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

Pēc projekta izveides dodieties uz tā direktoriju:

cd next-context-api

Pēc tam palaidiet izstrādes serveri:

npm run dev

Kad esat iestatījis pamata Next.js projektu, varat izveidot pamata uzdevumu lietotni, kas izmanto React Context API stāvokļa pārvaldībai.

Izveidojiet konteksta nodrošinātāju

Konteksta nodrošinātāja fails kalpo kā centrālais centrs, kurā definējat un pārvaldāt globālo stāvokli, kuram komponentiem ir jāpiekļūst.

Izveidojiet jaunu failu, src/context/Todo.context.js, un aizpildiet to ar šādu kodu.

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

Šis reakcijas konteksta iestatījums definē a TodoContext kas sākotnēji satur tukša programmas uzdevumu saraksta stāvokli.

Papildus sākotnējā stāvokļa izveidei šī konteksta konfigurācija ietver a reduktors funkcija, kas definē dažādus darbību veidus. Šie darbību veidi mainīs konteksta stāvokli atkarībā no aktivizētajām darbībām. Šajā gadījumā darbības ietver uzdevumu pievienošanu, dzēšanu un rediģēšanu.

The TodoContextProvider komponents nodrošina TodoContext citiem lietojumprogrammas komponentiem. Šim komponentam ir nepieciešami divi balsti: vērtības atbalsts, kas ir konteksta sākotnējais stāvoklis, un reduktora balsts, kas ir reduktora funkcija.

Kad komponents patērē TodoContext, tas var piekļūt konteksta stāvoklim un nosūtīt darbības, lai atjauninātu stāvokli.

Pievienojiet lietotnei Next.js konteksta nodrošinātāju

Tagad, lai nodrošinātu, ka konteksta nodrošinātājs tiek renderēts jūsu Next.js lietojumprogrammas saknē un ka visi klienta komponenti var tai piekļūt, jums ir jāpievieno konteksts lietotnes saknes izkārtojuma komponentam.

Lai to izdarītu, atveriet src/app/layout.js failu un ietiniet bērnu mezglu HTML veidnē ar konteksta nodrošinātāju šādi:

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

Izveidojiet uzdevumu komponentu

Izveidojiet jaunu failu, src/components/Todo.jsun pievienojiet tam šādu kodu.

Sāciet ar tālāk norādīto importēšanu. Noteikti iekļaujiet izmantot klientu karodziņš, lai atzīmētu šo komponentu kā klienta puses komponentu.

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

Pēc tam definējiet funkcionālo komponentu, tostarp JSX elementus, kas tiks renderēti pārlūkprogrammā.

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"
 />
Add Todo</button>



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

Šajā funkcionālajā komponentā ir iekļauti ievades lauki uzdevumu pievienošanai, rediģēšanai un dzēšanai, kā arī atbilstošās pogas. Tā izmanto React nosacījuma renderēšana lai parādītu rediģēšanas un dzēšanas pogas, pamatojoties uz rediģēšanas indeksa vērtību.

Visbeidzot, katram darbības veidam definējiet nepieciešamos stāvokļa mainīgos un vajadzīgās apstrādātāja funkcijas. Funkcijas komponentā pievienojiet šādu kodu.

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

Šīs apstrādātāja funkcijas ir atbildīgas par lietotāja uzdevumu pievienošanu, dzēšanu un rediģēšanu konteksta stāvoklī.

Tie nodrošina, ka tad, kad lietotājs pievieno, dzēš vai rediģē uzdevumu, atbilstošās darbības tiek nosūtītas uz konteksta reduktoru, lai attiecīgi atjauninātu stāvokli.

Atveidojiet uzdevumu komponentu

Visbeidzot, lapas komponentā importējiet komponentu Uzdevumi.

Lai to izdarītu, src/app direktorijā atveriet failu page.js, izdzēsiet standarta Next.js kodu un pievienojiet tālāk norādīto kodu:

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


 </main>
 )
}

Lieliski! Šajā brīdī jums vajadzētu būt iespējai pārvaldīt statusu lietotnē To-do Next.js, izmantojot React Context.

React Context API izmantošana ar citām valsts pārvaldības tehnoloģijām

React Context API ir lielisks valsts pārvaldības risinājums. Tomēr to ir iespējams izmantot kopā ar citām valsts pārvaldības bibliotēkām, piemēram, Redux. Šī hibrīdā pieeja nodrošina, ka dažādām lietotnes daļām, kas pilda galvenās lomas, izmantojat labāko rīku.

To darot, varat izmantot dažādu valsts pārvaldības risinājumu priekšrocības, lai izveidotu efektīvas un apkopjamas lietojumprogrammas.