Ha összetett állapotokat kezel egy Next alkalmazásban, a dolgok gyorsan bonyolulttá válhatnak. A hagyományos horgok, mint pl useState támogatást nyújtanak az állami irányításnak, de felvetik a támasztékfúrás problémáját. A támaszfúrás az adatok vagy funkciók több komponensen keresztül történő továbbítását jelenti.

Jobb megközelítés az állapotkezelési logikának az összetevőktől való elkülönítése, és az állapotok frissítése az alkalmazás bárhonnan. Végigvezetjük a Context API használatán, miközben egy egyszerű feladatlista-alkalmazást készítünk.

Mielőtt elkezdené a teendők listáját

Mielőtt létrehozná a teendőlista alkalmazást, szüksége lesz:

• Alapvető ismeretek modern JavaScript operátorok és React's useState hook.
• Annak megértése, hogyan kell tömbök és objektumok megsemmisítése JavaScriptben.
• Csomópont 16.8-as vagy újabb verziója telepítve van a helyi gépre, és ismeri csomagkezelők, mint az npm vagy fonal.

Az elkészült projektet megtalálod itt GitHub referencia és további feltárás céljából.

Az alkalmazás állapotának és kezelésének megértése

Az alkalmazás állapota az alkalmazás aktuális állapotára vonatkozik egy adott időpontban. Ez magában foglalja az alkalmazás által ismert és kezelt információkat, például a felhasználói bevitelt és az adatbázisból vagy API-ból (Application Programming Interface) lekért adatokat.

Az alkalmazás állapotának megértéséhez vegye figyelembe egy egyszerű számlálóalkalmazás lehetséges állapotait. Tartalmazzák:

• Az alapértelmezett állapot amikor a számláló nullán áll.
• Fokozott állapot amikor a számláló eggyel nő.
• Csökkent állapot amikor a számláló eggyel csökken.
• Visszaállított állapot amikor a számláló visszatér az alapértelmezett állapotba.

A React komponens feliratkozhat az állapotváltozásokra. Amikor a felhasználó interakcióba lép egy ilyen összetevővel, műveletei – például a gombkattintások – kezelhetik az állapotfrissítéseket.

Ez a részlet egy egyszerű számlálóalkalmazást mutat be alapértelmezett állapotában, amely kattintási műveletek alapján kezeli az állapotot:

const [számláló, setCounter] = useState(0);
Visszatérés (

{számláló}</h1>
 setCounter (számláló + 1)}>növekedés</button>
 setCounter (számláló - 1)}>csökkenteni</button>
 setCounter(0)}>reset</button>
 </main>
);

Beállítás és telepítés

A projekt tárháza két ágból áll: indító és kontextus. A kezdő ágat használhatja alapként a projekt felépítéséhez, vagy a környezeti ágat a végső bemutató előnézetéhez.

A Starter App klónozása

A kezdő alkalmazás biztosítja a végső alkalmazáshoz szükséges felhasználói felületet, így az alapvető logika megvalósítására összpontosíthat. Nyisson meg egy terminált, és futtassa a következő parancsot a lerakat indító ágának a helyi gépre klónozásához:

git klón -b indító https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Futtassa a következő parancsot a projektkönyvtárban a függőségek telepítéséhez és a fejlesztői kiszolgáló elindításához:

fonal && fonal dev

Vagy:

npm i && npm futtatás dev

Ha minden jól ment, a felhasználói felületnek meg kell jelennie a böngészőben:

A logika megvalósítása

A Context API lehetőséget biztosít az állapotadatok kezelésére és megosztására az összetevők között, anélkül, hogy manuális támaszfúrásra lenne szükség.

1. lépés: Kontextus létrehozása és exportálása

Hozzon létre egy src/app/context mappát a kontextusfájl tárolására és a projektkönyvtár megfelelő rendszerezésére. Ebben a mappában hozzon létre egy todo.context.jsx fájl, amely tartalmazza az alkalmazás összes környezeti logikáját.

Importálja a CreateContext funkció a reagál könyvtárat, és hívja meg, az eredményt egy változóban tárolva:

import { CreateContext} tól től"reagál";
const TodoContext = createContext();

Ezután hozzon létre egyénit useTodoContext horog, ami visszatér TodoContext használható formájában.

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

2. lépés: Állapotok létrehozása és kezelése

Az alkalmazás CRUD (Létrehozás, Olvasás, Frissítés, Törlés) műveletek végrehajtásához létre kell hozni az állapotokat, és kezelni kell azokat a Szolgáltató összetevő.

const TodoContextProvider = ({gyerekek }) => {
const [task, setTask] = useState("");
const [tasks, setTasks] = useState([]);
Visszatérés<TodoContext. Szolgáltatóérték={{}}>{gyermekek}TodoContext. Szolgáltató>;
};
exportalapértelmezett TodoContextProvider;

Közvetlenül a Visszatérés nyilatkozatot, hozzon létre a handleTodoInput függvény, amely akkor fut le, amikor a felhasználó beír egy teendőt. Ez a funkció ezután frissíti a feladat állapot.

const handleTodoInput = (bemenet) => setTask (bemenet);

Add hozzá a CreateTask függvény, amely akkor fut le, amikor a felhasználó elküld egy teendőt. Ez a funkció frissíti a feladatokat állapotot, és véletlenszerű azonosítót rendel az új feladathoz.

const createTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 azonosító: Math.trunc(Math.random() * 1000 + 1),
 feladat,
 },
 ...feladatok,
 ]);
 };

Hozzon létre egy updateTask függvény, amely leképezi a feladatokat listázza és frissíti azt a feladatot, amelynek azonosítója megegyezik a kattintott feladat azonosítójával.

const updateTask = (azonosító, updateText) =>
 setTasks (tasks.map((t) => (t.id azonosító? { ...t, feladat: updateText }: t)));

Hozzon létre egy deleteTask funkció, amely frissíti a feladatokat listát úgy, hogy benne legyen minden olyan feladat, amelynek azonosítója nem egyezik az adott paraméterrel.

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

3. lépés: Adjon hozzá állapotokat és kezelőket a szolgáltatóhoz

Most már létrehozta az állapotokat és írt kódot a kezelésükhöz, ezeket az állapotokat és a kezelő függvényeket elérhetővé kell tennie a Szolgáltató. Megadhatja őket objektum formájában, a érték tulajdona a Szolgáltató összetevő.

Visszatérés (
 érték={{
 feladat,
 feladatok,
 handleTodoInput,
 CreateTask,
 updateTask,
 deleteTask,
 }}
 >
 {gyermekek}
 </TodoContext.Provider>
);

4. lépés: Határozza meg a kontextust

A Szolgáltató A létrehozott legfelső szintű összetevőt be kell csomagolni, hogy a kontextus elérhető legyen a teljes alkalmazás számára. Ehhez szerkessze src/app/page.jsx és becsomagoljuk a Todos komponens a TodoContextProvider összetevő:

;
</TodoContextProvider>;

5. lépés: Használja az Összetevők kontextusát

Szerkessze a sajátját src/app/components/Todos.jsx fájl és megsemmisítés feladatok, feladat, handleTodoInput, és CreateTask címre küldött hívás útján useTodoContext funkció.

const { feladat, feladatok, handleTodoInput, createTask } = useTodoContext();

Most frissítse az űrlapelemet a küldési esemény és a fő beviteli mező módosításainak kezelésére:

 createTask (e)}>
"todo-bemenet" típus="szöveg" helyőrző="Adjon meg egy feladatot" kötelező érték={feladat} onChange={(e) => handleTodoInput (e.target.value)} />
"beküld-teendő" típus="Beküldés" érték="Feladat hozzáadása" />
</form>

6. lépés: Rendereljen feladatokat a felhasználói felületen

Most már használhatja az alkalmazást feladat létrehozásához és hozzáadásához feladatokat lista. A kijelző frissítéséhez át kell térképeznie a meglévőket feladatokat és megjeleníti őket a felhasználói felületen. Először hozzon létre a src/app/components/Todo.jsx összetevő egyetlen teendő tárolására.

Belül src/app/components/Todo.jsx komponenst, szerkesszen vagy töröljön egy feladatot a updateTask és deleteTask az általunk létrehozott funkciók src/app/context/todo.context.jsx fájlt.

import React, { useState } tól től"reagál";
import { useTodoContext } tól től"../context/todo.context";
const Todo = ({ feladat }) => {
const { updateTask, deleteTask } = useTodoContext();
// isEdit állapot követi, amikor egy feladat szerkesztési módban van
const [isEdit, setIsEdit] = useState(hamis);
Visszatérés (

"teendő-csomagoló">


 {isEdit? ( <bemenettípus="szöveg"érték={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thosztály név="feladat">{task.task}th> )}


"akciók">
"szerkesztés"
 onClick={() => setIsEdit(!isEdit)}> {isEdit? "Megment": "Szerkesztés"} </button> 
 deleteTask (task.id)}>Del</button>
 </td>
 </tr>
 </tbody>
 </table>
 );
};



exportalapértelmezett Csinálni;

Renderelni a src/app/components/Todo.jsx komponens mindegyikhez feladat, menj be a src/app/components/Todos.jsx fájlt és feltételesen leképezve a feladatokat közvetlenül azután fejléc záró címke.

{feladatok && (

 {tasks.map((feladat, i) => ( <Csinálnikulcs={én}feladat={feladat} /> ))}
</main>
)}

Tesztelje az alkalmazást egy böngészőben, és ellenőrizze, hogy a várt eredményt adja.

Feladatok mentése a helyi tárhelyre

Jelenleg az oldal frissítése visszaállítja a feladatokat, és elveti a létrehozottakat. A probléma megoldásának egyik módja a feladatok tárolása a böngésző helyi tárhelyén.

A Web Storage API a cookie-tárolás továbbfejlesztése, olyan funkciókkal, amelyek javítják a felhasználók és a fejlesztők élményét.