Når du administrerer komplekse tilstander i en Next-applikasjon, kan ting raskt bli vanskelig. Tradisjonelle kroker som useState bistand med statlig ledelse, men presentere et spørsmål om propellboring. Støtteboring betyr å sende data eller funksjoner ned gjennom flere komponenter.

En bedre tilnærming ville være å skille tilstandsstyringslogikken fra komponentene og oppdatere disse tilstandene fra hvor som helst i applikasjonen din. Vi vil lede deg gjennom hvordan du bruker Context API mens vi bygger en enkel oppgavelisteapplikasjon.

Før du begynner på gjøremålslisten

Før du kan bygge oppgavelisteapplikasjonen, trenger du:

  • Grunnleggende kunnskap om moderne JavaScript-operatører og Reacts brukState-krok.
  • En forståelse av hvordan destrukturere arrays og objekter i JavaScript.
  • Node v16.8 eller nyere installert på din lokale maskin og kjennskap til pakkeforvaltere som npm eller garn.

Du finner det ferdige prosjektet på GitHub for referanse og videre utforskning.

Forstå applikasjonstilstand og -administrasjon

instagram viewer

Søknadstilstand refererer til gjeldende tilstand for en søknad på et gitt tidspunkt. Dette inkluderer informasjon appen kjenner til og administrerer, for eksempel brukerinndata og data hentet fra en database eller et API (Application Programming Interface).

For å forstå applikasjonstilstand, vurder de mulige tilstandene til en enkel motapplikasjon. De inkluderer:

  • Standardtilstanden når telleren står på null.
  • En økt tilstand når telleren øker med én.
  • En redusert tilstand når telleren reduseres med én.
  • En tilbakestillingstilstand når telleren går tilbake til standardtilstanden.

En React-komponent kan abonnere på endringer i tilstanden. Når en bruker samhandler med en slik komponent, kan handlingene deres – for eksempel knappeklikk – administrere oppdateringer til tilstanden.

Dette utdraget viser en enkel tellerapplikasjon, i standardtilstand, som administrerer tilstand basert på klikkhandlinger:

konst [counter, setCounter] = brukState(0);
komme tilbake (

{counter}</h1>

Oppsett og installasjon

Prosjektets depot inneholder to grener: starter og kontekst. Du kan bruke startgrenen som en base for å bygge prosjektet fra eller kontekstgrenen for å forhåndsvise den endelige demoen.

Kloning av Starter-appen

Startappen gir brukergrensesnittet du trenger for den endelige appen, slik at du kan fokusere på implementering av kjernelogikken. Åpne en terminal og kjør følgende kommando for å klone startgrenen til depotet til din lokale maskin:

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

Kjør følgende kommando i prosjektkatalogen for å installere avhengighetene og starte utviklingsserveren:

garn && garnutvikling

Eller:

npm i && npm kjøre dev

Hvis alt gikk bra, skal brukergrensesnittet vises i nettleseren din:

Implementering av logikken

Context API gir en måte å administrere og dele tilstandsdata på tvers av komponenter, uten behov for manuell propellboring.

Trinn 1: Opprett og eksporter kontekst

Lage en src/app/context mappe for å lagre kontekstfilen og holde prosjektkatalogen godt organisert. I denne mappen oppretter du en todo.context.jsx fil som vil inneholde all kontekstlogikk for applikasjonen.

Importer skape kontekst funksjon fra reagere bibliotek og kall det, lagre resultatet i en variabel:

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

Deretter oppretter du en egendefinert bruk TodoContext krok som kommer tilbake TodoContext i sin brukbare form.

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

Trinn 2: Opprett og administrer stater

For å utføre programmets CRUD-handlinger (Create, Read, Update, Delete), må du opprette tilstandene og administrere dem med Forsørger komponent.

konst TodoContextProvider = ({ barn }) => {
konst [oppgave, settTask] = brukState("");
konst [oppgaver, setTasks] = brukState([]);
komme tilbake<TodoContext. Forsørgerverdi={{}}>{barn}TodoContext. Forsørger>;
};
eksportmisligholde TodoContextProvider;

Rett før komme tilbake uttalelse, lage en handleTodoInput funksjon som vil kjøre når brukeren skriver inn en gjøremål. Denne funksjonen oppdaterer deretter oppgave stat.

konst handleTodoInput = (input) => setTask (inndata);

Legg til en oppretteTask funksjon som vil kjøre når en bruker sender inn en gjøremål. Denne funksjonen oppdaterer oppgaver tilstand og tildeler den nye oppgaven en tilfeldig ID.

konst createTask = (e) => {
 e.preventDefault();
 settTasks([
 {
 id: Matte.trunc(Matte.random() * 1000 + 1),
 oppgave,
 },
 ...oppgaver,
 ]);
 };

Opprett en oppdaterTask funksjon som kartlegger gjennom oppgaver liste og oppdaterer oppgaven hvis ID samsvarer med IDen til den klikkede oppgaven.

konst updateTask = (id, updateText) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, oppgave: updateText }: t)));

Lage en slettTask funksjon som oppdaterer oppgaver liste slik at den inkluderer alle oppgaver hvis ID ikke samsvarer med den gitte parameteren.

konst deleteTask = (id) => setTasks (tasks.filter((t) => t.id !== id));

Trinn 3: Legg til stater og behandlere til leverandøren

Nå du har opprettet tilstandene og skrevet kode for å administrere dem, må du gjøre disse tilstandene og behandlerfunksjonene tilgjengelige for Forsørger. Du kan levere dem i form av et objekt ved å bruke verdi eiendommen til Forsørger komponent.

komme tilbake (
 verdi={{
 oppgave,
 oppgaver,
 handleTodoInput,
 oppretteTask,
 updateTask,
 slettTask,
 }}
 >
 {barn}
 </TodoContext.Provider>
);

Trinn 4: Omfang konteksten

De Forsørger du har opprettet, må pakke inn toppnivåkomponenten for å gjøre konteksten tilgjengelig for hele applikasjonen. For å gjøre dette, rediger src/app/page.jsx og pakk inn Todos komponent med TodoContextProvider komponent:


;
</TodoContextProvider>;

Trinn 5: Bruk konteksten i komponenter

Rediger din src/app/components/Todos.jsx fil og destrukturer oppgaver, oppgave, handleTodoInput, og oppretteTask via en samtale til bruk TodoContext funksjon.

konst { oppgave, oppgaver, handleTodoInput, createTask } = useTodoContext();

Oppdater nå skjemaelementet for å håndtere innsendingshendelsen og endringer i hovedinndatafeltet:

 createTask (e)}>
"todo-input" type="tekst" plassholder="Skriv inn en oppgave" påkrevd verdi={task} onChange={(e) => handleTodoInput (e.target.value)} />
"send inn oppgave" type="sende inn" verdi="Legg til oppgave" />
</form>

Trinn 6: Gjengi oppgaver i brukergrensesnittet

Du kan nå bruke appen til å opprette og legge til en oppgave i oppgaver liste. For å oppdatere skjermen må du kartlegge eksisterende oppgaver og gjengi dem i brukergrensesnittet. Lag først en src/app/components/Todo.jsx komponent for å holde et enkelt gjøremål.

Innen src/app/components/Todo.jsx komponent, rediger eller slett en oppgave ved å påkalle oppdaterTask og slettTask funksjoner vi opprettet i src/app/context/todo.context.jsx fil.

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


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


komme tilbake (

"todo-wrapper">


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



"handlinger">






eksportmisligholde Å gjøre;

Å gjengi src/app/components/Todo.jsx komponent for hver oppgave, gå inn i src/app/components/Todos.jsx fil og betinget kart gjennom oppgaver rett etter Overskrift avsluttende tag.

{oppgaver && (

 {tasks.map((oppgave, dvs) => ( <Å gjørenøkkel={Jeg}oppgave={oppgave} /> ))}
</main>
)}

Test applikasjonen din i en nettleser og bekreft at den gir det forventede resultatet.

Lagre oppgaver i lokal lagring

For øyeblikket vil oppdatering av siden tilbakestille oppgavene, og forkaste alle du har opprettet. En måte å løse dette problemet på er ved å lagre oppgavene i nettleserens lokale lagring.

Nettlagrings-APIet er en forbedring av lagring av informasjonskapsler, med funksjoner som forbedrer opplevelsen for både brukere og utviklere.