Pri správe zložitých stavov v aplikácii Next sa veci môžu rýchlo stať komplikovanými. Tradičné háčiky ako useState štátnemu manažmentu, ale predstavujú problém vrtných vrtov. Podperné vŕtanie znamená odovzdávanie údajov alebo funkcií cez niekoľko komponentov.

Lepším prístupom by bolo oddelenie logiky riadenia stavu od komponentov a aktualizácia týchto stavov odkiaľkoľvek vo vašej aplikácii. Prevedieme vás, ako používať kontextové rozhranie API, keď vytvoríme jednoduchú aplikáciu so zoznamom úloh.

Skôr ako začnete so zoznamom úloh

Pred vytvorením aplikácie zoznamu úloh budete potrebovať:

  • Základná znalosť moderné operátory JavaScriptu a React's useState hook.
  • Pochopenie toho, ako na to deštruktúrovať polia a objekty v JavaScripte.
  • Uzol v16.8 alebo novší nainštalovaný na vašom lokálnom počítači a oboznámený s správcovia balíkov ako npm alebo priadze.

Hotový projekt nájdete na GitHub pre referenciu a ďalšie skúmanie.

Pochopenie stavu aplikácie a manažmentu

Stav aplikácie sa vzťahuje na aktuálny stav aplikácie v danom časovom bode. Patria sem informácie, ktoré aplikácia pozná a spravuje, ako napríklad vstup používateľa a údaje získané z databázy alebo rozhrania API (Application Programming Interface).

instagram viewer

Aby ste pochopili stav aplikácie, zvážte možné stavy jednoduchej aplikácie počítadla. Zahŕňajú:

  • Predvolený stav keď je počítadlo na nule.
  • Zvýšený stav keď sa počítadlo zvýši o jeden.
  • Znížený stav keď sa počítadlo zníži o jednu.
  • Stav resetovania keď sa počítadlo vráti do pôvodného stavu.

Komponent React sa môže prihlásiť k zmenám stavu. Keď používateľ interaguje s takýmto komponentom, jeho akcie – napríklad kliknutia na tlačidlá – môžu spravovať aktualizácie stavu.

Tento úryvok zobrazuje jednoduchú aplikáciu počítadla vo svojom predvolenom stave, ktorá spravuje stav na základe akcií kliknutí:

konšt [counter, setCounter] = useState(0);
vrátiť (

{counter}</h1>

Nastavenie a inštalácia

Úložisko projektu obsahuje dve vetvy: štartér a kontext. Môžete použiť úvodnú vetvu ako základ na zostavenie projektu alebo kontextovú vetvu na ukážku finálnej ukážky.

Klonovanie aplikácie Starter App

Štartovacia aplikácia poskytuje používateľské rozhranie, ktoré budete potrebovať pre konečnú aplikáciu, takže sa môžete sústrediť na implementáciu základnej logiky. Otvorte terminál a spustite nasledujúci príkaz na klonovanie štartovacej vetvy úložiska do vášho lokálneho počítača:

git klonovať -b štartér https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Spustite nasledujúci príkaz v adresári projektu, aby ste nainštalovali závislosti a spustili váš vývojový server:

priadza && priadza dev

alebo:

npm i && npm spustiť dev

Ak všetko prebehlo dobre, používateľské rozhranie by sa malo zobraziť vo vašom prehliadači:

Implementácia logiky

Kontextové API poskytuje spôsob, ako spravovať a zdieľať stavové údaje medzi komponentmi, bez potreby manuálneho vŕtania.

Krok 1: Vytvorte a exportujte kontext

Vytvor src/aplikácia/kontext priečinok na ukladanie kontextového súboru a udržiavanie adresára projektu dobre organizovaného. V tomto priečinku vytvorte a todo.context.jsx súbor, ktorý bude obsahovať všetky kontextové logiky pre aplikáciu.

Importovať vytvoriť kontext funkcia z reagovať knižnicu a zavolajte ju, pričom výsledok uložíte do premennej:

importovať { createContext} od"reagovať";
konšt TodoContext = createContext();

Ďalej vytvorte vlastný použiteTodoContext hák, ktorý sa vracia TodoContext vo svojej použiteľnej forme.

exportkonšt useTodoContext = () => useContext (TodoContext);

Krok 2: Vytvorte a spravujte štáty

Ak chcete vykonať akcie CRUD (vytvoriť, prečítať, aktualizovať, odstrániť) aplikácie, budete musieť vytvoriť stavy a spravovať ich pomocou Poskytovateľ komponent.

konšt TodoContextProvider = ({ deti }) => {
konšt [task, setTask] = useState("");
konšt [tasks, setTasks] = useState([]);
vrátiť<TodoContext. Poskytovateľhodnotu={{}}>{children}TodoContext. Poskytovateľ>;
};
exportpredvolená TodoContextProvider;

Tesne pred vrátiť vyhlásenie, vytvorte a zvládnuťTodoInput funkcia, ktorá sa spustí, keď používateľ zadá úlohu. Táto funkcia potom aktualizuje úloha štát.

konšt handleTodoInput = (vstup) => setTask (vstup);

Pridaj createTask funkcia, ktorá sa spustí, keď používateľ odošle úlohu. Táto funkcia aktualizuje úlohy stavu a priradí novej úlohe náhodné ID.

konšt createTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 id: Matematika.trunc(Matematika.random() * 1000 + 1),
 úloha,
 },
 ...úlohy,
 ]);
 };

Vytvorte updateTask funkcia, ktorá mapuje cez úlohy zoznam a aktualizuje úlohu, ktorej ID sa zhoduje s ID kliknutej úlohy.

konšt updateTask = (id, updateText) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, úloha: updateText }: t)));

Vytvor deleteTask funkcia, ktorá aktualizuje úlohy zoznam tak, aby obsahoval všetky úlohy, ktorých ID sa nezhoduje s daným parametrom.

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

Krok 3: Pridajte stavy a obslužné programy k poskytovateľovi

Teraz, keď ste vytvorili stavy a napísaný kód na ich správu, musíte tieto stavy a funkcie obsluhy sprístupniť Poskytovateľ. Môžete ich dodať vo forme objektu pomocou hodnotu majetok z Poskytovateľ komponent.

vrátiť (
 hodnota={{
 úloha,
 úlohy,
 handleTodoInput,
 createTask,
 updateTask,
 deleteTask,
 }}
 >
 {children}
 </TodoContext.Provider>
);

Krok 4: Rozsah kontextu

The Poskytovateľ ktorý ste vytvorili, musia zabaliť komponent najvyššej úrovne, aby bol kontext dostupný pre celú aplikáciu. Ak to chcete urobiť, upravte src/app/page.jsx a zabaliť Todos komponent s TodoContextProvider komponent:


;
</TodoContextProvider>;

Krok 5: Použite kontext v komponentoch

Upravte svoje src/app/components/Todos.jsx súbor a deštrukcia úlohy, úloha, zvládnuťTodoInput, a createTask prostredníctvom hovoru na použiteTodoContext funkciu.

konšt { task, tasky, handleTodoInput, createTask } = useTodoContext();

Teraz aktualizujte prvok formulára, aby spracoval udalosť odoslania a zmeny v hlavnom vstupnom poli:

 createTask (e)}>
"todo-input" typ="text" zástupný symbol ="Zadajte úlohu" požadovaná hodnota={task} onChange={(e) => handleTodoInput (e.target.value)} />
"submit-todo" typ="Predložiť" hodnota="Pridať úlohu" />
</form>

Krok 6: Vykreslenie úloh v používateľskom rozhraní

Teraz môžete pomocou aplikácie vytvoriť a pridať úlohu do úlohy zoznam. Ak chcete aktualizovať zobrazenie, musíte mapovať existujúce úlohy a vykresliť ich v používateľskom rozhraní. Najprv vytvorte a src/app/components/Todo.jsx komponent na uloženie jednej úlohy.

V rámci src/app/components/Todo.jsx komponent, upravte alebo odstráňte úlohu vyvolaním updateTask a deleteTask funkcie, ktoré sme vytvorili src/app/context/todo.context.jsx súbor.

importovať Reagovať, { useState } od"reagovať";
importovať { useTodoContext } od"../context/todo.context";
konšt Todo = ({ úloha }) => {
konšt { updateTask, deleteTask } = useTodoContext();


// isEdit stav sleduje, keď je úloha v režime úprav
konšt [isEdit, setIsEdit] = useState(falošný);


vrátiť (

"todo-wrapper">


 {isEdit? ( <vstuptypu="text"hodnotu={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<thclassName="úloha">{task.task}th> )}



"akcie">






exportpredvolená Robiť;

Na vykreslenie src/app/components/Todo.jsx komponent pre každého úloha, choďte do src/app/components/Todos.jsx súbor a podmienečne mapovať cez úlohy hneď po hlavička uzatváracia značka.

{úlohy && (

 {tasks.map((úloha, t.j) => ( <Robiťkľúč={i}úloha={úloha} /> ))}
</main>
)}

Otestujte svoju aplikáciu v prehliadači a potvrďte, že poskytuje očakávaný výsledok.

Ukladanie úloh v miestnom úložisku

V súčasnosti obnovovanie stránky obnoví úlohy a zahodí všetky, ktoré ste vytvorili. Jedným zo spôsobov, ako vyriešiť tento problém, je uloženie úloh do lokálneho úložiska prehliadača.

Rozhranie API webového úložiska predstavuje vylepšenie ukladania súborov cookie s funkciami, ktoré zlepšujú skúsenosti používateľov aj vývojárov.