Pri upravljanju kompleksnih stanj v aplikaciji Next lahko stvari hitro postanejo zapletene. Tradicionalne kljuke kot useState pomoč pri državnem upravljanju, vendar predstavljajo vprašanje propelernega vrtanja. Prop vrtanje pomeni prenos podatkov ali funkcij skozi več komponent.

Boljši pristop bi bil ločitev vaše logike upravljanja stanja od komponent in posodabljanje teh stanj od koder koli v vaši aplikaciji. Vodili vas bomo skozi uporabo Context API, medtem ko gradimo preprosto aplikacijo seznama opravil.

Preden začnete s seznamom opravil

Preden lahko sestavite aplikacijo seznama opravil, boste potrebovali:

  • Osnovno znanje o sodobnih operaterjev JavaScript in Reactova kavelj useState.
  • Razumevanje, kako uničenje nizov in objektov v JavaScriptu.
  • Vozlišče v16.8 ali novejša nameščena na vaš lokalni računalnik in poznavanje upravitelji paketov, kot je npm ali preje.

Končan projekt najdete na GitHub za referenco in nadaljnje raziskovanje.

Razumevanje stanja in upravljanja aplikacije

Stanje aplikacije se nanaša na trenutno stanje aplikacije v danem trenutku. To vključuje informacije, ki jih aplikacija pozna in upravlja, kot so uporabniški vnos in podatki, pridobljeni iz baze podatkov ali API-ja (Application Programming Interface).

instagram viewer

Da bi razumeli stanje aplikacije, razmislite o možnih stanjih preproste nasprotne aplikacije. Vključujejo:

  • Privzeto stanje ko je števec na ničli.
  • Povečano stanje ko se števec poveča za eno.
  • Zmanjšano stanje ko se števec zmanjša za ena.
  • Ponastavljeno stanje ko se števec vrne v privzeto stanje.

Komponenta React se lahko naroči na spremembe stanja. Ko uporabnik komunicira s takšno komponento, lahko njegova dejanja – na primer kliki gumbov – upravljajo posodobitve stanja.

Ta izrezek prikazuje preprosto aplikacijo števca v privzetem stanju, ki upravlja stanje na podlagi klika:

konst [števec, setCounter] = useState(0);
vrnitev (

{števec}</h1>

Nastavitev in namestitev

Repozitorij projekta vsebuje dve veji: zaganjalnik in kontekstu. Začetno vejo lahko uporabite kot osnovo za izdelavo projekta ali kontekstno vejo za predogled končne predstavitve.

Kloniranje začetne aplikacije

Začetna aplikacija zagotavlja uporabniški vmesnik, ki ga boste potrebovali za končno aplikacijo, tako da se lahko osredotočite na implementacijo osnovne logike. Odprite terminal in zaženite naslednji ukaz za kloniranje začetne veje repozitorija na vaš lokalni računalnik:

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

Zaženite naslednji ukaz v imeniku projekta, da namestite odvisnosti in zaženete svoj razvojni strežnik:

preja && preja dev

ali:

npm i && npm zaženi dev

Če je šlo vse v redu, bi se moral uporabniški vmesnik prikazati v vašem brskalniku:

Izvajanje logike

Context API ponuja način za upravljanje in skupno rabo podatkov o stanju med komponentami, brez potrebe po ročnem vrtanju.

1. korak: Ustvarite in izvozite kontekst

Ustvariti src/aplikacija/kontekst mapo za shranjevanje kontekstne datoteke in ohranjanje dobro organiziranega imenika projekta. V tej mapi ustvarite a todo.context.jsx datoteka, ki bo vsebovala vso kontekstno logiko za aplikacijo.

Uvozite createContext funkcijo od reagirati knjižnico in jo pokličite, rezultat pa shranite v spremenljivko:

uvoz { createContext} od"reagirati";
konst TodoContext = createContext();

Nato ustvarite po meri useTodoContext kavelj, ki se vrača TodoContext v uporabni obliki.

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

2. korak: Ustvarite in upravljajte stanja

Če želite izvesti dejanja aplikacije CRUD (ustvari, preberi, posodobi, izbriši), boste morali ustvariti stanja in jih upravljati z Ponudnik komponento.

konst TodoContextProvider = ({ otroci }) => {
konst [opravilo, setTask] = useState("");
konst [opravila, setTasks] = useState([]);
vrnitev<TodoContext. Ponudnikvrednost={{}}>{otroci}TodoContext. Ponudnik>;
};
izvozprivzeto TodoContextProvider;

Tik pred vrnitev izjava, ustvarite a handleTodoInput funkcija, ki se zažene, ko uporabnik vnese opravilo. Ta funkcija nato posodobi naloga država.

konst handleTodoInput = (vnos) => setTask (vnos);

Dodaj a createTask funkcija, ki se bo zagnala, ko uporabnik odda opravilo. Ta funkcija posodablja naloge in novi nalogi dodeli naključni ID.

konst createTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 id: matematika.trunc(matematika.naključen() * 1000 + 1),
 naloga,
 },
 ...naloge,
 ]);
 };

Ustvarite updateTask funkcijo, ki preslika skozi naloge seznam in posodobi opravilo, katerega ID se ujema z ID-jem kliknjenega opravila.

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

Ustvariti deleteTask funkcijo, ki posodablja naloge tako da vključuje vsa opravila, katerih ID se ne ujema z danim parametrom.

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

3. korak: dodajte stanja in obdelovalce ponudniku

Zdaj, ko ste ustvarili stanja in napisali kodo za njihovo upravljanje, morate ta stanja in funkcije obdelovalca dati na voljo Ponudnik. Lahko jih predložite v obliki predmeta z uporabo vrednost lastnina Ponudnik komponento.

vrnitev (
 vrednost={{
 naloga,
 naloge,
 handleTodoInput,
 createTask,
 updateTask,
 deleteTask,
 }}
 >
 {otroci}
 </TodoContext.Provider>
);

4. korak: Obseg konteksta

The Ponudnik ki ste ga ustvarili, mora zaviti komponento najvišje ravni, da bo kontekst na voljo celotni aplikaciji. Če želite to narediti, uredite src/app/page.jsx in zavijte Todos komponento z TodoContextProvider komponenta:


;
</TodoContextProvider>;

5. korak: Uporabite kontekst v komponentah

Uredite svoje src/app/components/Todos.jsx datoteka in uničenje naloge, naloga, handleTodoInput, in createTask prek klica na useTodoContext funkcijo.

konst { opravilo, opravila, handleTodoInput, createTask } = useTodoContext();

Zdaj posodobite element obrazca za obravnavo dogodka oddaje in sprememb v glavnem vnosnem polju:

 createTask (e)}>
"todo-input" vrsta="besedilo" placeholder="Vnesite nalogo" zahtevana vrednost={task} onChange={(e) => handleTodoInput (e.target.value)} />
"submit-todo" vrsta="oddaj" vrednost="Dodaj opravilo" />
</form>

6. korak: upodabljanje nalog v uporabniškem vmesniku

Zdaj lahko uporabite aplikacijo za ustvarjanje in dodajanje nalog v naloge seznam. Če želite posodobiti prikaz, boste morali preslikati obstoječe naloge in jih upodobite v uporabniškem vmesniku. Najprej ustvarite a src/app/components/Todo.jsx komponenta za shranjevanje enega opravila.

Znotraj src/app/components/Todo.jsx komponento, uredite ali izbrišite nalogo tako, da prikličete updateTask in deleteTask funkcije, v katerih smo ustvarili src/app/context/todo.context.jsx mapa.

uvoz Odziv, {useState} od"reagirati";
uvoz {useTodoContext} od"../context/todo.context";
konst Todo = ({ naloga }) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit sledi stanju, ko je naloga v načinu urejanja
konst [isEdit, setIsEdit] = useState(lažno);


vrnitev (

"ovitek opravil">


 {isEdit? ( <vnosvrsta="besedilo"vrednost={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thclassName="naloga">{task.task}th> )}



"akcije">






izvozprivzeto Narediti;

Za upodabljanje src/app/components/Todo.jsx komponento za vsako naloga, pojdite v src/app/components/Todos.jsx datoteko in pogojno preslikavo skozi naloge takoj za glava zaključna oznaka.

{naloge && (

 {tasks.map((naloga, i) => ( <Nareditiključ={jaz}naloga={task} /> ))}
</main>
)}

Preizkusite svojo aplikacijo v brskalniku in se prepričajte, da daje pričakovane rezultate.

Shranjevanje opravil v lokalni shrambi

Trenutno bo osvežitev strani ponastavila opravila in zavrgla vsa, ki ste jih ustvarili. Eden od načinov za odpravo te težave je shranjevanje nalog v lokalni pomnilnik brskalnika.

API za spletno shranjevanje je izboljšava shranjevanja piškotkov s funkcijami, ki izboljšajo izkušnjo tako za uporabnike kot za razvijalce.