Reacti sisseehitatud konteksti API on ideaalne oleku jagamiseks. Siit saate teada, kuidas seda rakenduse Next.js uusima versiooniga kasutada.

Next.js pakub mitmeid riigihalduse lähenemisviise. Kuigi mõned neist meetoditest nõuavad uute teekide installimist, on Reacti konteksti API sisse ehitatud, seega on see suurepärane viis väliste sõltuvuste vähendamiseks.

React Contexti abil saate sujuvalt edastada andmeid läbi oma komponentide puu eri osade, välistades rekvisiitide puurimise vaeva. See on eriti kasulik globaalse oleku, näiteks praeguse kasutaja sisselogimise oleku või eelistatud teema haldamiseks.

React Context API mõistmine

Enne koodi sukeldumist on oluline mõista, mis on React Context API ja mis probleemi see lahendab.

Rekvisiidid pakuvad tõhusat meetodit andmete jagamiseks komponentide vahel. Need võimaldavad teil edastada andmeid ülemkomponendist selle alamkomponentidele.

See lähenemisviis on kasulik, kuna see näitab selgelt, millised komponendid kasutavad teatud andmeid ja kuidas need andmed komponendipuus alla voolavad.

instagram viewer

Probleemid tekivad aga siis, kui teil on sügavalt pesastatud komponendid, mis peavad tarbima samu rekvisiite. Selline olukord võib tekitada keerukust ja põhjustada keerulist koodi, mida on raskem hooldada. Need küsimused on muu hulgas järgmised tugipuurimise puudused.

React Context lahendab selle väljakutse, pakkudes tsentraliseeritud meetodit andmete loomiseks ja kasutamiseks, mis peavad olema globaalselt ja komponentide lõikes juurdepääsetavad.

See loob nende andmete hoidmiseks konteksti, võimaldades komponentidel neile juurde pääseda. See lähenemisviis aitab teil koodibaasi struktureerida, et see oleks hästi organiseeritud.

Selle projekti koodi leiate sellest GitHub hoidla.

Rakenduse Next.js 13 olekuhalduse kasutamise alustamine React Context API kasutamine

Next.js-i serverikomponendid võimaldavad teil luua rakendusi, mis võtavad mõlemast maailmast parima: kliendipoolsete rakenduste interaktiivsuse ja serveri renderdamise jõudluse eelised.

Next.js 13 juurutab serverikomponendid rakendus vaikimisi kataloog, mis on nüüd stabiilne. Kuna aga kõik komponendid renderdatakse serveris, võib teil tekkida probleeme kliendipoolsete teekide või API-de (nt React Context) integreerimisel.

Selle vältimiseks on suurepärane lahendus kasuta klienti lipp, mille saate määrata failidele, mis käitavad kliendipoolset koodi.

Alustamiseks looge Next.js 13 projekt kohapeal, käivitades terminalis järgmise käsu:

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

Pärast projekti loomist liikuge selle kataloogi:

cd next-context-api

Seejärel käivitage arendusserver:

npm run dev

Kui olete põhiprojekti Next.js seadistanud, saate luua lihtsa ülesanderakenduse, mis kasutab olekuhalduseks React Context API-t.

Looge kontekstipakkuja

Kontekstipakkuja fail toimib keskse jaoturina, kus saate määratleda ja hallata globaalset olekut, millele komponendid peavad juurde pääsema.

Looge uus fail, src/context/Todo.context.jsja täitke see järgmise koodiga.

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

See reageerimiskonteksti seadistus määratleb a TodoContext mis algselt sisaldab rakenduse tühja ülesandeloendi olekut.

Lisaks algoleku loomisele sisaldab see kontekstikonfiguratsioon a reduktor funktsioon, mis määrab erinevaid tegevustüüpe. Need toimingutüübid muudavad konteksti olekut sõltuvalt käivitatud toimingutest. Sel juhul hõlmavad toimingud ülesannete lisamist, kustutamist ja redigeerimist.

The TodoContextProvider komponent pakub TodoContext rakenduse muudele komponentidele. Sellel komponendil on kaks tugiseadet: väärtus prop, mis on konteksti algolek, ja reduktor, mis on reduktorfunktsioon.

Kui komponent kasutab TodoContexti, pääseb see juurde konteksti olekule ja saate oleku värskendamiseks toiminguid saata.

Lisage rakendusele Next.js kontekstipakkuja

Nüüd, tagamaks, et kontekstipakkuja renderdab teie rakenduse Next.js juurtes ja kõik kliendikomponendid pääsevad sellele juurde, peate konteksti lisama rakenduse juurpaigutuse komponendile.

Selleks avage src/app/layout.js faili ja mähkige lapse sõlm HTML-i malli kontekstipakkujaga järgmiselt:

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

Looge ülesannete komponent

Looge uus fail, src/components/Todo.jsja lisage sellele järgmine kood.

Alustage järgmiste imporditoimingutega. Lisage kindlasti kasuta klienti lipp, et märkida see komponent kliendipoolseks komponendiks.

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

Järgmisena määratlege funktsionaalne komponent, sealhulgas JSX-i elemendid, mis brauseris renderdatakse.

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

See funktsionaalne komponent sisaldab sisestusvälju ülesannete lisamiseks, muutmiseks ja kustutamiseks koos vastavate nuppudega. See kasutab Reacti tingimuslik renderdus redigeerimisindeksi väärtusel põhinevate redigeerimis- ja kustutamisnuppude kuvamiseks.

Lõpuks määratlege iga toimingutüübi jaoks nõutavad olekumuutujad ja nõutavad töötleja funktsioonid. Lisage funktsioonikomponendi sisse järgmine kood.

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

Need töötleja funktsioonid vastutavad kasutaja ülesannete lisamise, kustutamise ja redigeerimise eest konteksti olekus.

Need tagavad, et kui kasutaja ülesande lisab, kustutab või redigeerib, saadetakse vastavad toimingud konteksti reduktorisse, et olekut vastavalt värskendada.

Renderdage ülesannete komponent

Lõpuks importige ülesannete komponent lehekomponenti.

Selleks avage kataloogis src/app fail page.js, kustutage kood Next.js ja lisage allolev kood:

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


 </main>
 )
}

Suurepärane! Sel hetkel peaksite saama rakenduse To-do Next.js olekut hallata, kasutades React Contexti.

React Context API kasutamine koos teiste olekuhaldustehnoloogiatega

React Context API on suurepärane lahendus riigihalduseks. Sellegipoolest on seda võimalik kasutada koos teiste riigihaldusraamatukogudega, nagu Redux. See hübriidne lähenemisviis tagab, et kasutate oma rakenduse erinevate osade jaoks, mis täidavad võtmerolle, parimat tööriista.

Seda tehes saate tõhusate ja hooldatavate rakenduste loomisel ära kasutada erinevate riigihalduslahenduste eeliseid.