Bij het beheren van complexe statussen in een Next-applicatie kan het snel lastig worden. Traditionele haken zoals gebruikState hulp bij staatsbeheer, maar een probleem van propboren. Propboren betekent het doorgeven van gegevens of functies aan verschillende componenten.

Een betere benadering is om uw statusbeheerlogica te scheiden van de componenten en deze statussen overal in uw toepassing bij te werken. We laten u zien hoe u Context API kunt gebruiken terwijl we een eenvoudige takenlijst-applicatie bouwen.

Voordat u aan uw takenlijst begint

Voordat u de takenlijst-applicatie kunt bouwen, heeft u het volgende nodig:

  • Basiskennis van moderne JavaScript-operators En React's useState-hook.
  • Een begrip van hoe het moet destructureer arrays en objecten in JavaScript.
  • Knooppunt v16.8 of later geïnstalleerd op uw lokale computer en bekendheid met pakketbeheerders zoals npm of garen.

Je vindt het afgeronde project op GitHub ter referentie en verder onderzoek.

Applicatiestatus en -beheer begrijpen

instagram viewer

Applicatiestatus verwijst naar de huidige toestand van een applicatie op een bepaald moment. Dit omvat informatie die de app kent en beheert, zoals gebruikersinvoer en gegevens die worden opgehaald uit een database of een API (Application Programming Interface).

Overweeg de mogelijke statussen van een eenvoudige tegentoepassing om de toepassingsstatus te begrijpen. Ze bevatten:

  • De standaardstatus wanneer de teller op nul staat.
  • Een verhoogde staat wanneer de teller met één stijgt.
  • Een verminderde staat wanneer de teller met één afneemt.
  • Een resetstatus wanneer de teller terugkeert naar de standaardstatus.

Een React-component kan zich abonneren op statusveranderingen. Wanneer een gebruiker met zo'n component communiceert, kunnen hun acties, zoals klikken op knoppen, updates van de status beheren.

Dit fragment toont een eenvoudige tellertoepassing, in de standaardstatus, die de status beheert op basis van klikacties:

const [teller, setCounter] = useState(0);
opbrengst (

{teller}</h1>

Installatie en installatie

De repository van het project bevat twee takken: beginner En context. U kunt de starter-branch gebruiken als basis om het project op te bouwen of de context-branch om een ​​voorvertoning van de uiteindelijke demo te bekijken.

De Starter-app klonen

De starter-app biedt de gebruikersinterface die u nodig heeft voor de uiteindelijke app, zodat u zich kunt concentreren op de implementatie van de kernlogica. Open een terminal en voer de volgende opdracht uit om de starttak van de repository naar uw lokale computer te klonen:

gek kloon -b voorgerecht https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Voer de volgende opdracht uit in de projectdirectory om de afhankelijkheden te installeren en uw ontwikkelserver te starten:

garen && garen dev

Of:

npm ik && npm run dev

Als alles goed is gegaan, zou de gebruikersinterface in uw browser moeten worden weergegeven:

De logica implementeren

De Context API biedt een manier om statusgegevens tussen componenten te beheren en te delen, zonder dat er handmatig moet worden geboord.

Stap 1: Context maken en exporteren

Maak een src/app/context map om het contextbestand op te slaan en de projectdirectory goed georganiseerd te houden. Maak in deze map een todo.context.jsx bestand dat alle contextlogica voor de toepassing zal bevatten.

Importeer de createContext functie uit de Reageer bibliotheek en noem het, sla het resultaat op in een variabele:

importeren { creëerContext} van"Reageer";
const TodoContext = maakContext();

Maak vervolgens een aangepaste gebruikTodoContext haak die terugkeert TodoContext in zijn bruikbare vorm.

exporterenconst useTodoContext = () => gebruikContext (TodoContext);

Stap 2: Staten maken en beheren

Om de CRUD-acties (Create, Read, Update, Delete) van de applicatie uit te voeren, moet u de statussen maken en beheren met de Aanbieder bestanddeel.

const TodoContextProvider = ({ kinderen }) => {
const [taak, setTask] = useState("");
const [taken, setTasks] = useState([]);
opbrengst<TodoContext. Aanbiederwaarde={{}}>{kinderen}TodoContext. Aanbieder>;
};
exporterenstandaard TodoContextProvider;

Vlak voor de opbrengst verklaring, maak een handvatTodoInput functie die wordt uitgevoerd wanneer de gebruiker een taak invoert. Deze functie werkt vervolgens de taak staat.

const handleTodoInput = (invoer) => setTask (invoer);

Voeg een... toe createTask functie die wordt uitgevoerd wanneer een gebruiker een taak indient. Deze functie werkt de taken state en wijst de nieuwe taak een willekeurig ID toe.

const createTask = (e) => {
 e.preventDefault();
 taken instellen([
 {
 ID kaart: Wiskunde.trunc(Wiskunde.willekeurig() * 1000 + 1),
 taak,
 },
 ...taken,
 ]);
 };

Creëer een updateTaak functie die in kaart wordt gebracht door de taken lijst en werkt de taak bij waarvan de ID overeenkomt met de ID van de aangeklikte taak.

const updateTask = (id, updateTekst) =>
 setTasks (taken.map((T) => (t.id id? { ...T, taak: updateText }: t)));

Maak een taak verwijderen functie die de taken zodat het alle taken bevat waarvan de ID niet overeenkomt met de gegeven parameter.

const deleteTask = (ID kaart) => setTasks (taken.filter((T) => t.id !== id));

Stap 3: Voeg staten en handlers toe aan de provider

Nu je de statussen hebt gemaakt en code hebt geschreven om ze te beheren, moet je deze statussen en handlerfuncties beschikbaar maken voor de Aanbieder. U kunt ze aanleveren in de vorm van een object, met behulp van de waarde eigendom van de Aanbieder bestanddeel.

opbrengst (
 waarde={{
 taak,
 taken,
 handvatTodoInput,
 taak maken,
 updateTaak,
 taak verwijderen,
 }}
 >
 {kinderen}
 </TodoContext.Provider>
);

Stap 4: bereik de context

De Aanbieder die u hebt gemaakt, moet de component op het hoogste niveau inpakken om de context beschikbaar te maken voor de hele toepassing. Om dit te doen, bewerken src/app/pagina.jsx en wikkel de Taken onderdeel met de TodoContextProvider bestanddeel:


;
</TodoContextProvider>;

Stap 5: Gebruik de context in componenten

Bewerk uw src/app/components/Todos.jsx archiveren en destructureren taken, taak, handvatTodoInput, En createTask via een telefoontje naar de gebruikTodoContext functie.

const {taak, taken, handleTodoInput, createTask} = useTodoContext();

Werk nu het formulierelement bij om de indieningsgebeurtenis en wijzigingen in het hoofdinvoerveld af te handelen:

 createTask (e)}>
"todo-invoer" type="tekst" tijdelijke aanduiding="Voer een taak in" vereiste waarde={task} onChange={(e) => handleTodoInput (e.target.value)} />
"verzenden" type="indienen" waarde="Voeg taak toe" />
</form>

Stap 6: geef taken weer in de gebruikersinterface

U kunt nu de app gebruiken om een ​​taak aan te maken en toe te voegen aan de taken lijst. Om de weergave bij te werken, moet u bestaande kaarten in kaart brengen taken en geef ze weer in de gebruikersinterface. Maak eerst een src/app/components/Todo.jsx component om een ​​enkel to-do-item vast te houden.

Binnen de src/app/components/Todo.jsx component, bewerk of verwijder een taak door de updateTaak En taak verwijderen functies waarin we hebben gemaakt src/app/context/todo.context.jsx bestand.

importeren Reageer, { useState } van"Reageer";
importeren {gebruikTodoContext} van"../context/todo.context";
const Todo = ({ taak }) => {
const { updateTask, deleteTask } = useTodoContext();


// isEdit houdt bij wanneer een taak zich in de bewerkingsmodus bevindt
const [isEdit, setIsEdit] = useState(vals);


opbrengst (

"todo-wrapper">


 {isBewerken? ( <invoertype="tekst"waarde={taak.taak}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<enaam van de klasse="taak">{taak.taak}e> )}



"acties">






exporterenstandaard Te doen;

Om de src/app/components/Todo.jsx onderdeel voor elk taak, ga in de src/app/components/Todos.jsx bestand en voorwaardelijk toewijzen via de taken direct na de koptekst afsluitende tag.

{taken && (

 {taken.map((taak, ik) => ( <Te doensleutel={i}taak={taak} /> ))}
</main>
)}

Test uw toepassing in een browser en bevestig dat deze het verwachte resultaat geeft.

Taken opslaan in lokale opslag

Momenteel worden door het vernieuwen van de pagina de taken gereset en worden de door u gemaakte taken verwijderd. Een manier om dit probleem op te lossen is door de taken op te slaan in de lokale opslag van de browser.

De webopslag-API is een verbetering ten opzichte van cookie-opslag, met functies die de ervaring voor zowel gebruikers als ontwikkelaars verbeteren.