Vstavané kontextové API Reactu je ideálne na zdieľanie stavu. Zistite, ako ho používať s najnovšou verziou Next.js.

Next.js ponúka niekoľko prístupov k riadeniu štátu. Zatiaľ čo niektoré z týchto metód vyžadujú inštaláciu nových knižníc, React's Context API je vstavané, takže je to skvelý spôsob, ako znížiť externé závislosti.

S React Context môžete bezproblémovo prenášať údaje cez rôzne časti stromu komponentov, čím sa eliminujú problémy s vŕtaním podpier. Je to užitočné najmä pri správe globálneho stavu, ako je stav prihlásenia aktuálneho používateľa alebo jeho preferovaná téma.

Pochopenie React Context API

Pred ponorením sa do kódu je dôležité pochopiť, čo je React Context API a aký problém rieši.

Podpery poskytujú efektívnu metódu zdieľania údajov medzi komponentmi. Umožňujú vám odovzdať údaje z nadradeného komponentu jeho podriadeným komponentom.

Tento prístup je užitočný, pretože jasne ukazuje, ktoré komponenty používajú určité údaje a ako tieto údaje prúdia po strome komponentov.

Problémy však nastanú, keď máte hlboko vnorené komponenty, ktoré potrebujú spotrebovať rovnaké rekvizity. Táto situácia môže predstavovať zložitosť a potenciálne viesť ku komplikovanému kódu, ktorý sa ťažšie udržiava. Tieto problémy, okrem iného, ​​sú

instagram viewer
nevýhody podperného vŕtania.

React Context rieši túto výzvu poskytnutím centralizovanej metódy na vytváranie a používanie údajov, ktoré musia byť dostupné globálne, naprieč komponentmi.

Nastavuje kontext na uchovávanie týchto údajov a umožňuje komponentom prístup k nim. Tento prístup vám pomôže štruktúrovať vašu kódovú základňu, aby ste sa uistili, že je dobre organizovaná.

Kód tohto projektu nájdete v ňom GitHub Úložisko.

Začíname so správou stavu v Next.js 13 Používanie React Context API

Serverové komponenty Next.js vám umožňujú vytvárať aplikácie, ktoré využívajú to najlepšie z oboch svetov: interaktivitu aplikácií na strane klienta a výkonnostné výhody serverového vykresľovania.

Next.js 13 implementuje komponenty servera v aplikácie adresár – ktorý je teraz stabilný – štandardne. Pretože sú však všetky komponenty vykresľované serverom, môžete naraziť na problémy pri integrácii knižníc na strane klienta alebo rozhraní API, ako je napríklad React Context.

Ak sa tomu chcete vyhnúť, skvelým riešením je používať klienta príznak, ktorý môžete nastaviť pre súbory, ktoré budú spúšťať kód na strane klienta.

Ak chcete začať, vytvorte projekt Next.js 13 lokálne spustením tohto príkazu vo vašom termináli:

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

Po vytvorení projektu prejdite do jeho adresára:

cd next-context-api

Potom spustite vývojový server:

npm run dev

Po nastavení základného projektu Next.js môžete vytvoriť základnú aplikáciu, ktorá na správu stavu využíva rozhranie React Context API.

Vytvorte poskytovateľa kontextu

Súbor poskytovateľa kontextu slúži ako centrálny rozbočovač, kde definujete a spravujete globálny stav, ku ktorému komponenty potrebujú prístup.

Vytvorte nový súbor, src/context/Todo.context.jsa naplňte ho nasledujúcim kódom.

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

Toto nastavenie kontextu React definuje a TodoContext ktorý spočiatku obsahuje stav prázdneho zoznamu úloh pre aplikáciu.

Okrem vytvorenia počiatočného stavu táto kontextová konfigurácia zahŕňa a reduktor funkcia, ktorá definuje rôzne typy akcií. Tieto typy akcií upravia stav kontextu v závislosti od spustených akcií. V tomto prípade akcie zahŕňajú pridávanie, odstraňovanie a upravovanie úloh.

The TodoContextProvider komponent poskytuje TodoContext na ostatné komponenty v aplikácii. Tento komponent má dve podpery: hodnotovú podperu, čo je počiatočný stav kontextu, a redukčnú podperu, čo je funkcia redukcie.

Keď komponent spotrebuje TodoContext, môže pristupovať k stavu kontextu a odosielať akcie na aktualizáciu stavu.

Pridajte poskytovateľa kontextu do aplikácie Next.js

Teraz, aby ste sa uistili, že poskytovateľ kontextu sa vykresľuje v koreňovom adresári vašej aplikácie Next.js a že k nemu majú prístup všetky klientske komponenty, musíte pridať kontext do koreňového komponentu rozloženia aplikácie.

Ak to chcete urobiť, otvorte src/app/layout.js súbor a zabaľte podradený uzol do šablóny HTML s poskytovateľom kontextu takto:

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

Vytvorte komponent úloh

Vytvorte nový súbor, src/components/Todo.jsa pridajte k nemu nasledujúci kód.

Začnite vykonaním nasledujúcich importov. Nezabudnite zahrnúť používať klienta príznak na označenie tohto komponentu ako komponentu na strane klienta.

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

Ďalej definujte funkčný komponent vrátane prvkov JSX, ktoré sa vykreslia v prehliadači.

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

Tento funkčný komponent obsahuje vstupné polia na pridávanie, úpravu a odstraňovanie úloh spolu s príslušnými tlačidlami. Používa sa Podmienečné vykreslenie React na zobrazenie tlačidiel úprav a vymazania na základe hodnoty indexu úprav.

Nakoniec definujte požadované stavové premenné a požadované funkcie obsluhy pre každý typ akcie. Do komponentu funkcie pridajte nasledujúci kód.

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

Tieto funkcie obsluhy majú na starosti pridávanie, odstraňovanie a úpravu úloh používateľa v rámci stavu kontextu.

Zabezpečujú, že keď používateľ pridá, vymaže alebo upraví úlohu, príslušné akcie sa odošlú do reduktora kontextu, aby sa zodpovedajúcim spôsobom aktualizoval stav.

Vykreslite komponent úlohy

Nakoniec importujte komponent To-do do komponentu stránky.

Ak to chcete urobiť, otvorte súbor page.js v adresári src/app, odstráňte štandardný kód Next.js a pridajte kód nižšie:

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


 </main>
 )
}

Skvelé! V tomto bode by ste mali byť schopní spravovať stav v aplikácii To-do Next.js pomocou React Context.

Používanie kontextového rozhrania API React s inými technológiami správy stavu

React Context API je skvelé riešenie pre správu stavu. Je však možné ho použiť spolu s inými štátnymi knižnicami, ako je Redux. Tento hybridný prístup zaisťuje, že používate najlepší nástroj pre rôzne časti vašej aplikácie, ktoré vykonávajú kľúčové úlohy.

Týmto spôsobom môžete využiť výhody rôznych riešení správy štátu na vytváranie efektívnych a udržiavateľných aplikácií.