Kada upravljate složenim stanjima u aplikaciji Next, stvari mogu brzo postati nezgodne. Tradicionalne udice poput useState pomoći u upravljanju državom, ali predstavljaju problem propelernog bušenja. Prop bušenje znači prosljeđivanje podataka ili funkcija kroz nekoliko komponenti.

Bolji pristup bio bi odvajanje vaše logike upravljanja stanjem od komponenti i ažuriranje tih stanja s bilo kojeg mjesta u vašoj aplikaciji. Provest ćemo vas kroz korištenje Context API-ja dok izrađujemo jednostavnu aplikaciju popisa obveza.

Prije nego započnete svoj popis obaveza

Prije nego što možete izraditi aplikaciju popisa obaveza, trebat će vam:

  • Osnovno znanje o moderni JavaScript operatori i Reactova useState kuka.
  • Razumijevanje kako destrukturirati nizove i objekte u JavaScriptu.
  • Čvor v16.8 ili noviji instaliran na vašem lokalnom računalu i poznavanje upravitelji paketa poput npm-a odnosno pređe.

Gotov projekt možete pronaći na GitHub za referencu i daljnje istraživanje.

Razumijevanje stanja aplikacije i upravljanja

instagram viewer

Stanje aplikacije odnosi se na trenutno stanje aplikacije u određenom trenutku. To uključuje informacije koje aplikacija zna i kojima upravlja, kao što su korisnički unos i podaci dohvaćeni iz baze podataka ili API-ja (Application Programming Interface).

Da biste razumjeli stanje aplikacije, razmotrite moguća stanja jednostavne aplikacije brojača. Oni uključuju:

  • Zadano stanje kada je brojač na nuli.
  • Povećano stanje kada se brojač poveća za jedan.
  • Smanjeno stanje kada se brojač smanji za jedan.
  • Stanje resetiranja kada se brojač vrati u zadano stanje.

React komponenta se može pretplatiti na promjene stanja. Kada korisnik stupi u interakciju s takvom komponentom, njegove radnje—kao što su klikovi gumba—mogu upravljati ažuriranjem stanja.

Ovaj isječak prikazuje jednostavnu aplikaciju brojača, u zadanom stanju, koja upravlja stanjem na temelju klikova:

konst [brojač, setBrojač] = useState(0);
povratak (

{counter}</h1>

Postavljanje i instalacija

Repozitorij projekta sadrži dvije grane: starter i kontekst. Možete koristiti početnu granu kao bazu za izgradnju projekta ili kontekstualnu granu za pregled konačnog demo-a.

Kloniranje početne aplikacije

Početna aplikacija pruža korisničko sučelje koje će vam trebati za konačnu aplikaciju, tako da se možete usredotočiti na implementaciju osnovne logike. Otvorite terminal i pokrenite sljedeću naredbu za kloniranje početne grane repozitorija na vaš lokalni stroj:

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

Izvedite sljedeću naredbu unutar direktorija projekta da biste instalirali ovisnosti i pokrenuli svoj razvojni poslužitelj:

pređa && pređa dev

Ili:

npm i && npm pokreni dev

Ako je sve prošlo dobro, korisničko sučelje bi se trebalo prikazati u vašem pregledniku:

Provedba logike

Context API pruža način za upravljanje i dijeljenje podataka o stanju među komponentama, bez potrebe za ručnim bušenjem.

Korak 1: Stvorite i izvezite kontekst

Stvoriti src/aplikacija/kontekst mapu za pohranu datoteke konteksta i održavanje direktorija projekta dobro organiziranim. Unutar ove mape stvorite a todo.context.jsx datoteku koja će sadržavati svu kontekstnu logiku za aplikaciju.

Uvezi stvoriti Kontekst funkcija iz reagirati biblioteku i pozvati je, pohranjujući rezultat u varijablu:

uvoz {stvori kontekst} iz"reagirati";
konst TodoContext = createContext();

Zatim stvorite prilagođeni useTodoContext udica koja se vraća TodoContext u upotrebljivom obliku.

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

Korak 2: Stvaranje i upravljanje državama

Da biste izvršili radnje aplikacije CRUD (Create, Read, Update, Delete), morat ćete stvoriti stanja i njima upravljati pomoću Davatelj komponenta.

konst TodoContextProvider = ({ djeca }) => {
konst [zadatak, setTask] = useState("");
konst [zadaci, setTasks] = useState([]);
povratak<TodoContext. Davateljvrijednost={{}}>{djeca}TodoContext. Davatelj>;
};
izvozzadano TodoContextProvider;

Neposredno prije povratak izjava, stvoriti a handleTodoInput funkcija koja će se pokrenuti kada korisnik upiše zadatak. Ova funkcija zatim ažurira zadatak država.

konst handleTodoInput = (ulazni) => setTask (ulaz);

Dodati createTask funkcija koja će se pokrenuti kada korisnik pošalje zadatak. Ova funkcija ažurira zadaci stanje i novom zadatku dodjeljuje nasumični ID.

konst createTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 iskaznica: matematika.trunc(matematika.random() * 1000 + 1),
 zadatak,
 },
 ...zadaci,
 ]);
 };

Stvorite updateTask funkcija koja se preslikava kroz zadaci popis i ažurira zadatak čiji ID odgovara ID-u kliknutog zadatka.

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

Stvoriti deleteTask funkcija koja ažurira zadaci popis tako da uključuje sve zadatke čiji ID ne odgovara zadanom parametru.

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

Korak 3: Dodajte stanja i rukovatelje pružatelju

Sada kada ste kreirali stanja i napisali kod za upravljanje njima, morate ta stanja i funkcije rukovatelja učiniti dostupnima Davatelj. Možete ih dostaviti u obliku predmeta, koristeći vrijednost vlasništvo od Davatelj komponenta.

povratak (
 vrijednost={{
 zadatak,
 zadaci,
 handleTodoInput,
 kreiraj zadatak,
 updateTask,
 izbrisati zadatak,
 }}
 >
 {djeca}
 </TodoContext.Provider>
);

Korak 4: Opseg konteksta

The Davatelj koju ste stvorili mora omotati komponentu najviše razine kako bi kontekst bio dostupan cijeloj aplikaciji. Da biste to učinili, uredite src/aplikacija/stranica.jsx i zamotajte Todos komponenta s TodoContextProvider komponenta:


;
</TodoContextProvider>;

Korak 5: Koristite kontekst u komponentama

Uredite svoje src/app/components/Todos.jsx datoteka i destruktura zadaci, zadatak, handleTodoInput, i createTask putem poziva na useTodoContext funkcija.

konst { zadatak, zadaci, handleTodoInput, createTask } = useTodoContext();

Sada ažurirajte element obrasca za rukovanje događajem podnošenja i promjenama u glavnom polju za unos:

 createTask (e)}>
"do-unos" vrsta="tekst" rezervirano mjesto="Unesite zadatak" potrebna vrijednost={task} onChange={(e) => handleTodoInput (e.target.value)} />
"pošalji-todo" vrsta="podnijeti" vrijednost="Dodaj zadatak" />
</form>

Korak 6: Renderirajte zadatke u korisničkom sučelju

Sada možete koristiti aplikaciju za izradu i dodavanje zadatka u zadaci popis. Da biste ažurirali prikaz, morat ćete mapirati postojeće zadaci i prikazati ih u korisničkom sučelju. Najprije stvorite a src/app/components/Todo.jsx komponenta za držanje jedne stavke obveze.

Unutar src/app/components/Todo.jsx komponentu, uredite ili izbrišite zadatak pozivanjem updateTask i deleteTask funkcije u kojima smo kreirali src/app/context/todo.context.jsx datoteka.

uvoz Reagiraj, {useState} iz"reagirati";
uvoz {useTodoContext} iz"../context/todo.context";
konst Todo = ({zadatak}) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit prati stanje kada je zadatak u modu za uređivanje
konst [isEdit, setIsEdit] = useState(lažno);


povratak (

"todo-wrapper">


 {isEdit? ( <ulaznitip="tekst"vrijednost={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thnaziv klase="zadatak">{task.task}th> )}



"radnje">






izvozzadano Napraviti;

Za prikaz src/app/components/Todo.jsx komponenta za svaku zadatak, idite u src/app/components/Todos.jsx datoteku i uvjetno kartu kroz zadaci odmah nakon Zaglavlje oznaka za zatvaranje.

{zadaci && (

 {tasks.map((zadatak, i) => ( <Napravitiključ={i}zadatak={zadatak} /> ))}
</main>
)}

Testirajte svoju aplikaciju u pregledniku i potvrdite da daje očekivani rezultat.

Spremanje zadataka u lokalnu pohranu

Trenutačno će osvježavanje stranice poništiti zadatke, odbacujući sve koje ste izradili. Jedan od načina za rješavanje ovog problema je pohranjivanje zadataka u lokalnu pohranu preglednika.

API za web pohranu je poboljšanje pohrane kolačića, sa značajkama koje poboljšavaju iskustvo za korisnike i programere.