A React beépített Context API-ja tökéletes az állapotmegosztáshoz. Ismerje meg, hogyan használhatja a Next.js legújabb verziójával.

A Next.js számos megközelítést kínál az állapotkezeléshez. Míg ezen módszerek némelyike ​​új könyvtárak telepítését igényli, a React Context API be van építve, így nagyszerű módja a külső függőségek csökkentésének.

A React Context segítségével zökkenőmentesen továbbíthatja az adatokat a komponensfa különböző részein, kiküszöbölve a támasztékfúrás fáradalmait. Ez különösen hasznos a globális állapotok, például az aktuális felhasználó bejelentkezett állapotának vagy a preferált témának a kezelésére.

A React Context API megértése

Mielőtt belemerülne a kódba, fontos megérteni, mi az a React Context API és milyen problémát old meg.

A kellékek hatékony módszert biztosítanak az adatok komponensek közötti megosztására. Lehetővé teszik az adatok átadását a szülőkomponensről a gyermekkomponenseknek.

Ez a megközelítés azért hasznos, mert világosan megmutatja, hogy mely összetevők használnak bizonyos adatokat, és ezek az adatok hogyan áramlanak le az összetevőfán.

instagram viewer

Azonban problémák merülnek fel, ha mélyen beágyazott összetevői vannak, amelyeknek ugyanazokat a kellékeket kell fogyasztaniuk. Ez a helyzet bonyolultságot okozhat, és potenciálisan bonyolult kódot eredményezhet, amelyet nehezebb fenntartani. Ezek a kérdések többek között a a támaszfúrás hátrányai.

A React Context megoldja ezt a kihívást azáltal, hogy központosított módszert biztosít olyan adatok létrehozására és felhasználására, amelyeknek globálisan, az összetevők között elérhetőnek kell lenniük.

Kontextust hoz létre az adatok tárolására, lehetővé téve az összetevők hozzáférését. Ez a megközelítés segít a kódbázis felépítésében, hogy biztosítsa annak jól szervezettségét.

A projekt kódja megtalálható benne GitHub adattár.

Az állapotkezelés használatának megkezdése a Next.js-ben 13 A React Context API használata

A Next.js Server Components lehetővé teszi olyan alkalmazások létrehozását, amelyek mindkét világból a legjobbat hozzák ki: a kliensoldali alkalmazások interaktivitását és a kiszolgálói megjelenítés teljesítménybeli előnyeit.

A Next.js 13 implementálja a szerverösszetevőket a kb könyvtár – amely most már stabil – alapértelmezés szerint. Mivel azonban az összes összetevőt kiszolgáló rendereli, problémákba ütközhet az ügyféloldali könyvtárak vagy API-k, például a React Context integrálása során.

Ennek elkerülésére nagyszerű megoldás a kliens használata zászló, amelyet beállíthat azokon a fájlokon, amelyek kliensoldali kódot futtatnak.

A kezdéshez hozzon létre egy Next.js 13 projektet helyileg a következő parancs futtatásával a terminálon:

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

A projekt létrehozása után keresse meg annak könyvtárát:

cd next-context-api

Ezután indítsa el a fejlesztői kiszolgálót:

npm run dev

Miután beállította az alapvető Next.js projektet, létrehozhat egy alapvető teendő alkalmazást, amely a React Context API-t használja az állapotkezeléshez.

Hozza létre a Context Provider-t

A kontextusszolgáltató fájl központi hubként szolgál, ahol meghatározhatja és kezelheti azt a globális állapotot, amelyhez az összetevőknek hozzá kell férniük.

Hozzon létre egy új fájlt, src/context/Todo.context.js, és töltse fel a következő kóddal.

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

Ez a React Context beállítás meghatározza a TodoContext amely kezdetben az alkalmazás üres teendőlistájának állapotát tartalmazza.

A kezdeti állapot létrehozásán kívül ez a kontextuskonfiguráció magában foglalja a csökkentő függvény, amely különféle művelettípusokat határoz meg. Ezek a művelettípusok módosítják a kontextus állapotát a kiváltott műveletektől függően. Ebben az esetben a műveletek közé tartozik a teendők hozzáadása, törlése és szerkesztése.

A TodoContextProvider komponens biztosítja a TodoContext az alkalmazás más összetevőihez. Ez a komponens két támasztékot igényel: az értéktámaszt, amely a kontextus kezdeti állapota, és a redukáló támasztékot, amely a redukciós funkció.

Amikor egy összetevő felhasználja a TodoContextet, hozzáférhet a környezet állapotához, és műveleteket küldhet az állapot frissítéséhez.

Adja hozzá a Context Providert a Next.js alkalmazáshoz

Most annak biztosításához, hogy a környezetszolgáltató a Next.js alkalmazás gyökerében jelenjen meg, és hogy az összes ügyfélösszetevő hozzáférhessen, hozzá kell adnia a kontextust az alkalmazás gyökérelrendezési összetevőjéhez.

Ehhez nyissa meg a src/app/layout.js fájlba, és csomagolja be a gyermek csomópontot a HTML-sablonba a környezetszolgáltatóval a következőképpen:

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

Hozzon létre egy teendő komponenst

Hozzon létre egy új fájlt, src/components/Todo.js, és adja hozzá a következő kódot.

Kezdje a következő importálással. Ügyeljen arra, hogy tartalmazza a kliens használata jelölje be ezt az összetevőt kliensoldali összetevőként.

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

Ezután határozza meg a funkcionális összetevőt, beleértve a JSX elemeket is, amelyek megjelennek a böngészőben.

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

Ez a funkcionális komponens beviteli mezőket tartalmaz a teendők hozzáadásához, szerkesztéséhez és törléséhez, valamint a megfelelő gombokat. Használja A React feltételes megjelenítése a szerkesztés és a törlés gombok megjelenítéséhez a szerkesztési index értéke alapján.

Végül határozza meg a szükséges állapotváltozókat és a szükséges kezelő függvényeket minden egyes művelettípushoz. A függvénykomponensen belül adja hozzá a következő kódot.

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

Ezek a kezelő funkciók felelősek a felhasználói teendők hozzáadásának, törlésének és szerkesztésének kezeléséért a kontextus állapotán belül.

Biztosítják, hogy amikor a felhasználó hozzáad, töröl vagy szerkeszt egy teendőt, a megfelelő műveletek elküldésre kerülnek a kontextus redukálójába, hogy ennek megfelelően frissítsék az állapotot.

Renderje le a To-Do komponenst

Végül importálja a Teendő összetevőt az oldalkomponensbe.

Ehhez nyissa meg a page.js fájlt az src/app könyvtárban, törölje a szokásos Next.js kódot, és adja hozzá az alábbi kódot:

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


 </main>
 )
}

Nagy! Ezen a ponton képesnek kell lennie az állapot kezelésére a To-do Next.js alkalmazásban a React Context használatával.

React Context API használata más állapotkezelési technológiákkal

A React Context API nagyszerű megoldás az állapotkezelésre. Mindazonáltal lehetséges más állami kezelési könyvtárak, például a Redux mellett is használni. Ez a hibrid megközelítés biztosítja, hogy a legjobb eszközt használja az alkalmazás kulcsszerepet betöltő különböző részeihez.

Ezzel kihasználhatja a különböző államirányítási megoldások előnyeit hatékony és karbantartható alkalmazások létrehozásához.