Når du administrerer komplekse tilstande i en Next-applikation, kan tingene hurtigt blive vanskelige. Traditionelle kroge som useState bistand med statsforvaltningen, men præsentere et spørgsmål om propboring. Propboring betyder at sende data eller funktioner ned gennem flere komponenter.

En bedre tilgang ville være at adskille din tilstandsstyringslogik fra komponenterne og opdatere disse tilstande fra hvor som helst i din applikation. Vi vil lede dig igennem, hvordan du bruger Context API, mens vi bygger en simpel opgavelisteapplikation.

Før du starter din opgaveliste

Før du kan bygge opgavelisten-applikationen, skal du bruge:

  • Grundlæggende kendskab til moderne JavaScript-operatører og Reacts useState hook.
  • En forståelse af, hvordan man destrukturere arrays og objekter i JavaScript.
  • Node v16.8 eller nyere installeret på din lokale maskine og kendskab til pakkeadministratorer som npm eller garn.

Du kan finde det færdige projekt på GitHub til reference og yderligere udforskning.

Forståelse af applikationstilstand og -styring

instagram viewer

Ansøgningstilstand refererer til den aktuelle tilstand for en applikation på et givet tidspunkt. Dette inkluderer information, som appen kender og administrerer, såsom brugerinput og data hentet fra en database eller en API (Application Programming Interface).

For at forstå applikationstilstanden skal du overveje de mulige tilstande for en simpel modapplikation. De omfatter:

  • Standardtilstanden når tælleren er på nul.
  • En øget tilstand når tælleren øges med én.
  • En nedsat tilstand når tælleren reduceres med én.
  • En nulstillingstilstand når tælleren vender tilbage til sin standardtilstand.

En React-komponent kan abonnere på ændringer i tilstanden. Når en bruger interagerer med en sådan komponent, kan deres handlinger – såsom knapklik – administrere opdateringer til tilstanden.

Dette uddrag viser en simpel tællerapplikation i standardtilstand, der administrerer tilstand baseret på klikhandlinger:

konst [tæller, sætTæller] = useState(0);
Vend tilbage (

{tæller}</h1>

Opsætning og installation

Projektets repository indeholder to grene: forret og sammenhæng. Du kan bruge startgrenen som en base til at bygge projektet ud fra eller kontekstgrenen til at få vist den endelige demo.

Kloning af Starter-appen

Startappen giver den brugergrænseflade, du skal bruge til den endelige app, så du kan fokusere på implementeringen af ​​kernelogikken. Åbn en terminal og kør følgende kommando for at klone startgrenen af ​​depotet til din lokale maskine:

git klon -b starter https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Kør følgende kommando i projektbiblioteket for at installere afhængighederne og starte din udviklingsserver:

garn && garn dev

Eller:

npm i && npm køre dev

Hvis alt gik godt, skulle brugergrænsefladen blive vist i din browser:

Implementering af logikken

Context API'en giver mulighed for at administrere og dele tilstandsdata på tværs af komponenter uden behov for manuel propboring.

Trin 1: Opret og eksporter kontekst

Lave en src/app/kontekst mappe for at gemme kontekstfilen og holde projektmappen velorganiseret. I denne mappe skal du oprette en todo.context.jsx fil, der vil indeholde al kontekstlogik for applikationen.

Importer skabekontekst funktion fra reagere bibliotek og kald det, gemmer resultatet i en variabel:

importere { createContext} fra"reagere";
konst TodoContext = createContext();

Dernæst skal du oprette en brugerdefineret brug TodoContext krog, der vender tilbage TodoContext i sin brugbare form.

eksportkonst useTodoContext = () => useContext (TodoContext);

Trin 2: Opret og administrer stater

For at udføre applikationens CRUD-handlinger (Create, Read, Update, Delete), skal du oprette tilstandene og administrere dem med Udbyder komponent.

konst TodoContextProvider = ({ børn }) => {
konst [opgave, sætTask] = useState("");
konst [opgaver, sætTasks] = useState([]);
Vend tilbage<TodoContext. Udbyderværdi={{}}>{børn}TodoContext. Udbyder>;
};
eksportStandard TodoContextProvider;

Lige før Vend tilbage erklæring, oprette en håndtereTodoInput funktion, der kører, når brugeren indtaster en opgave. Denne funktion opdaterer derefter opgave stat.

konst handleTodoInput = (input) => sætTask (input);

Tilføj en opretteTask funktion, der kører, når en bruger sender en opgave. Denne funktion opdaterer opgaver tilstand og tildeler den nye opgave et tilfældigt ID.

konst opretteTask = (e) => {
 e.preventDefault();
 sætTasks([
 {
 id: Matematik.trunc(Matematik.random() * 1000 + 1),
 opgave,
 },
 ...opgaver,
 ]);
 };

Opret en opdatereTask funktion, der kortlægger gennem opgaver liste og opdaterer den opgave, hvis id matcher id'et for den klikkede opgave.

konst updateTask = (id, updateText) =>
 sætTasks (tasks.map((t) => (t.id id? { ...t, opgave: updateText }: t)));

Lave en sletOpgave funktion, der opdaterer opgaver liste, så den inkluderer alle opgaver, hvis ID ikke matcher den givne parameter.

konst sletTask = (id) => sætTasks (tasks.filter((t) => t.id !== id));

Trin 3: Tilføj stater og handlere til udbyderen

Nu du har oprettet tilstandene og skrevet kode til at administrere dem, skal du gøre disse tilstande og håndteringsfunktioner tilgængelige for Udbyder. Du kan levere dem i form af et objekt ved hjælp af værdi ejendom af Udbyder komponent.

Vend tilbage (
 værdi={{
 opgave,
 opgaver,
 handleTodoInput,
 oprette opgave,
 updateTask,
 slet opgave,
 }}
 >
 {børn}
 </TodoContext.Provider>
);

Trin 4: Omfang konteksten

Det Udbyder du har oprettet, skal ombryde komponenten på øverste niveau for at gøre konteksten tilgængelig for hele applikationen. For at gøre dette, rediger src/app/page.jsx og pakk ind Todos komponent med TodoContextProvider komponent:


;
</TodoContextProvider>;

Trin 5: Brug konteksten i komponenter

Rediger din src/app/components/Todos.jsx fil og destruktur opgaver, opgave, håndtereTodoInput, og opretteTask via et opkald til brug TodoContext fungere.

konst { opgave, opgaver, handleTodoInput, createTask } = useTodoContext();

Opdater nu formularelementet for at håndtere indsendelseshændelsen og ændringer i hovedindtastningsfeltet:

 opretteTask (e)}>
"todo-input" type="tekst" pladsholder="Indtast en opgave" påkrævet værdi={task} onChange={(e) => handleTodoInput (e.target.value)} />
"indsend opgave" type="Indsend" værdi="Tilføj opgave" />
</form>

Trin 6: Gengiv opgaver i brugergrænsefladen

Du kan nu bruge appen til at oprette og tilføje en opgave til opgaver liste. For at opdatere skærmen skal du kortlægge eksisterende opgaver og gengive dem i brugergrænsefladen. Først skal du oprette en src/app/components/Todo.jsx komponent til at indeholde en enkelt opgave.

Indenfor src/app/components/Todo.jsx komponent, rediger eller slet en opgave ved at aktivere opdatereTask og sletOpgave funktioner, vi har oprettet i src/app/context/todo.context.jsx fil.

importere Reager, { useState } fra"reagere";
importere { useTodoContext } fra"../context/todo.context";
konst Todo = ({ opgave }) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit-tilstand sporer, når en opgave er i redigeringstilstand
konst [isEdit, setIsEdit] = useState(falsk);


Vend tilbage (

"todo-indpakning">


 {er Rediger? ( <inputtype="tekst"værdi={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<thklassenavn="opgave">{task.task}th> )}



"handlinger">






eksportStandard At gøre;

At gengive src/app/components/Todo.jsx komponent for hver opgave, gå ind i src/app/components/Todos.jsx fil og betinget kort gennem opgaver lige efter header afsluttende tag.

{opgaver && (

 {tasks.map((opgave, dvs) => ( <At gørenøgle={jeg}opgave={opgave} /> ))}
</main>
)}

Test din applikation i en browser og bekræft, at den giver det forventede resultat.

Lagring af opgaver i lokalt lager

I øjeblikket vil opdatering af siden nulstille opgaverne, hvilket vil kassere alle, du har oprettet. En måde at løse dette problem på er ved at gemme opgaverne i browserens lokale lager.

Web storage API er en forbedring af cookie-lagring med funktioner, der forbedrer oplevelsen for både brugere og udviklere.