Při správě složitých stavů v aplikaci Next se věci mohou rychle zvrtnout. Tradiční háčky jako useState pomoci státní správě, ale představují problém vrtání podpěr. Prop drilling znamená předávání dat nebo funkcí dolů přes několik komponent.

Lepším přístupem by bylo oddělení vaší logiky správy stavu od komponent a aktualizace těchto stavů odkudkoli ve vaší aplikaci. Provedeme vás, jak používat kontextové rozhraní API, když vytváříme jednoduchou aplikaci se seznamem úkolů.

Než začnete svůj seznam úkolů

Než budete moci vytvořit aplikaci seznamu úkolů, budete potřebovat:

  • Základní znalost moderní JavaScriptové operátory a React's useState hook.
  • Pochopení toho, jak na to destruovat pole a objekty v JavaScriptu.
  • Uzel v16.8 nebo novější nainstalovaný na vašem místním počítači a obeznámený s správci balíčků jako npm nebo příze.

Hotový projekt najdete na GitHub pro referenci a další zkoumání.

Pochopení stavu aplikace a správy

Stav aplikace odkazuje na aktuální stav aplikace v daném okamžiku. To zahrnuje informace, které aplikace zná a spravuje, jako je uživatelský vstup a data získaná z databáze nebo API (Application Programming Interface).

instagram viewer

Chcete-li porozumět stavu aplikace, zvažte možné stavy jednoduché aplikace čítače. Obsahují:

  • Výchozí stav když je počítadlo na nule.
  • Zvýšený stav když se počítadlo zvýší o jedničku.
  • Snížený stav když se počítadlo sníží o jedničku.
  • Stav resetování když se počítadlo vrátí do výchozího stavu.

Komponenta React se může přihlásit ke změnám stavu. Když uživatel interaguje s takovou komponentou, jeho akce – například kliknutí na tlačítka – mohou spravovat aktualizace stavu.

Tento úryvek ukazuje jednoduchou aplikaci čítače ve výchozím stavu, která spravuje stav na základě akcí kliknutí:

konst [counter, setCounter] = useState(0);
vrátit se (

{counter}</h1>

Nastavení a instalace

Úložiště projektu obsahuje dvě větve: startér a kontext. Počáteční větev můžete použít jako základ pro sestavení projektu nebo kontextovou větev pro náhled finálního dema.

Klonování aplikace Starter

Startovací aplikace poskytuje uživatelské rozhraní, které budete potřebovat pro konečnou aplikaci, takže se můžete soustředit na implementaci základní logiky. Otevřete terminál a spusťte následující příkaz pro klonování počáteční větve úložiště do místního počítače:

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

Spuštěním následujícího příkazu v adresáři projektu nainstalujte závislosti a spusťte vývojový server:

příze && příze voj

Nebo:

npm i && npm spustit dev

Pokud vše proběhlo v pořádku, uživatelské rozhraní by se mělo zobrazit ve vašem prohlížeči:

Implementace logiky

Kontextové API poskytuje způsob, jak spravovat a sdílet stavová data napříč komponentami, bez nutnosti ručního vrtání.

Krok 1: Vytvořte a exportujte kontext

Vytvořit src/aplikace/kontext složku pro uložení kontextového souboru a udržení adresáře projektu dobře organizovaného. V této složce vytvořte a todo.context.jsx soubor, který bude obsahovat veškerou kontextovou logiku pro aplikaci.

Importujte vytvořit kontext funkce z reagovat knihovnu a zavolejte ji a uložte výsledek do proměnné:

import { createContext} z"reagovat";
konst TodoContext = createContext();

Dále vytvořte vlastní použijteTodoContext háček, který se vrací TodoContext ve své použitelné podobě.

vývozníkonst useTodoContext = () => useContext (TodoContext);

Krok 2: Vytvořte a spravujte stavy

Chcete-li provést akce CRUD (Vytvořit, Číst, Aktualizovat, Smazat) aplikace, budete muset vytvořit stavy a spravovat je pomocí Poskytovatel komponent.

konst TodoContextProvider = ({děti}) => {
konst [task, setTask] = useState("");
konst [tasks, setTasks] = useState([]);
vrátit se<TodoContext. Poskytovatelhodnota={{}}>{děti}TodoContext. Poskytovatel>;
};
vývoznívýchozí TodoContextProvider;

Těsně před vrátit se prohlášení, vytvořit a handleTodoInput funkce, která se spustí, když uživatel zadá úkol. Tato funkce pak aktualizuje úkol Stát.

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

Přidat createTask funkce, která se spustí, když uživatel odešle úkol. Tato funkce aktualizuje úkoly stavu a přiřadí nové úloze náhodné ID.

konst createTask = (E) => {
 e.preventDefault();
 setTasks([
 {
 id: Matematika.trunc(Matematika.random() * 1000 + 1),
 úkol,
 },
 ...úkoly,
 ]);
 };

Vytvořit updateTask funkce, která mapuje přes úkoly vypíše a aktualizuje úlohu, jejíž ID se shoduje s ID úlohy, na kterou jste klikli.

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

Vytvořit deleteTask funkce, která aktualizuje úkoly seznam tak, aby obsahoval všechny úlohy, jejichž ID neodpovídá danému parametru.

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

Krok 3: Přidejte stavy a obslužné rutiny k poskytovateli

Nyní, když jste vytvořili stavy a napsaný kód pro jejich správu, musíte tyto stavy a funkce obsluhy zpřístupnit Poskytovatel. Můžete je dodat ve formě objektu pomocí hodnota vlastnictvím Poskytovatel komponent.

vrátit se (
 hodnota={{
 úkol,
 úkoly,
 handleTodoInput,
 createTask,
 updateTask,
 deleteTask,
 }}
 >
 {děti}
 </TodoContext.Provider>
);

Krok 4: Rozsah kontextu

The Poskytovatel jste vytvořili, musí zabalit komponentu nejvyšší úrovně, aby byl kontext dostupný pro celou aplikaci. Chcete-li to provést, upravte src/app/page.jsx a zabalit Todos komponenta s TodoContextProvider komponent:


;
</TodoContextProvider>;

Krok 5: Použijte kontext v komponentách

Upravte svůj src/app/components/Todos.jsx soubor a destrukci úkoly, úkol, handleTodoInput, a createTask prostřednictvím hovoru na použijteTodoContext funkce.

konst { task, tasks, handleTodoInput, createTask } = useTodoContext();

Nyní aktualizujte prvek formuláře, aby zpracoval událost odeslání a změny hlavního vstupního pole:

 createTask (e)}>
"todo-input" typ="text" zástupný symbol="Zadejte úkol" požadovaná hodnota={task} onChange={(e) => handleTodoInput (e.target.value)} />
"předložit úkol" typ="Předložit" hodnota="Přidat úkol" />
</form>

Krok 6: Vykreslení úloh v uživatelském rozhraní

Nyní můžete pomocí aplikace vytvořit a přidat úkol do úkoly seznam. Chcete-li aktualizovat zobrazení, musíte mapovat stávající úkoly a vykreslit je v uživatelském rozhraní. Nejprve vytvořte a src/app/components/Todo.jsx komponentu pro uložení jedné položky úkolu.

V rámci src/app/components/Todo.jsx komponentu, upravit nebo odstranit úlohu vyvoláním updateTask a deleteTask funkce, které jsme vytvořili src/app/context/todo.context.jsx soubor.

import Reagovat, { useState } z"reagovat";
import { useTodoContext } z"../context/todo.context";
konst Todo = ({ úkol }) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit stav sleduje, když je úloha v režimu úprav
konst [isEdit, setIsEdit] = useState(Nepravdivé);


vrátit se (

"todo-wrapper">


 {isEdit? ( <vstuptyp="text"hodnota={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<čtjméno třídy="úkol">{task.task}čt> )}



"akce">






vývoznívýchozí Dělat;

Chcete-li vykreslit src/app/components/Todo.jsx komponenta pro každého úkol, jděte do src/app/components/Todos.jsx soubor a podmíněně mapovat přes úkoly hned po záhlaví uzavírací značka.

{úkoly && (

 {tasks.map((úkol, I) => ( <Dělatklíč={i}úkol={úkol} /> ))}
</main>
)}

Otestujte svou aplikaci v prohlížeči a potvrďte, že poskytuje očekávaný výsledek.

Ukládání úkolů do místního úložiště

Aktuálně obnovení stránky resetuje úkoly a zahodí všechny, které jste vytvořili. Jedním ze způsobů, jak tento problém vyřešit, je uložení úloh do místního úložiště prohlížeče.

Rozhraní API pro webové úložiště je vylepšením ukládání souborů cookie s funkcemi, které zlepšují uživatelské prostředí i vývojáře.