Rakenduses Next keerukate olekute haldamisel võivad asjad kiiresti keeruliseks muutuda. Traditsioonilised konksud nagu useState abi riigi juhtkonnale, kuid tõstatada probleem rekvisiitide puurimise kohta. Prop puurimine tähendab andmete või funktsioonide edastamist läbi mitme komponendi.

Parem lähenemine oleks eraldada oma olekuhaldusloogika komponentidest ja värskendada neid olekuid kõikjal oma rakenduses. Juhendame teid, kuidas kasutada konteksti API-t, kui koostame lihtsat ülesannete loendi rakendust.

Enne ülesannete loendi alustamist

Enne ülesannete loendi rakenduse koostamist vajate:

• Põhiteadmised kaasaegsed JavaScripti operaatorid ja Reageeri kasutusoleku konks.
• Arusaam, kuidas massiivide ja objektide hävitamine JavaScriptis.
• Sõlm v16.8 või uuem installitud teie kohalikku arvutisse ja tuttav paketihaldurid nagu npm või lõngast.

Valmis projekti leiate aadressilt GitHub viitamiseks ja edasiseks uurimiseks.

Rakenduse olekust ja haldamisest arusaamine

Rakenduse olek viitab rakenduse hetkeseisule antud ajahetkel. See hõlmab teavet, mida rakendus teab ja haldab, nagu kasutaja sisend ja andmebaasist või API-st (rakenduse programmeerimisliides) hangitud andmed.

Rakenduse oleku mõistmiseks kaaluge lihtsa loendusrakenduse võimalikke olekuid. Nad sisaldavad:

• Vaikimisi olek kui loendur on nullis.
• Suurenenud seisund kui loendur suureneb ühe võrra.
• Vähenenud seisund kui loendur väheneb ühe võrra.
• Lähtestatud olek kui loendur naaseb vaikeolekusse.

Reacti komponent saab tellida olekumuutusi. Kui kasutaja sellise komponendiga suhtleb, saavad tema toimingud (nt nupuklõpsud) hallata oleku värskendusi.

See koodilõik näitab vaikeolekus lihtsat loendurirakendust, mis haldab olekut klikkimistoimingute põhjal:

konst [loendur, setCounter] = useState(0);
tagasi (

{loendur}</h1>
 setCounter (loendur + 1)}>suurendada</button>
 setCounter (loendur - 1)}>vähendada</button>
 setCounter(0)}>lähtestada</button>
 </main>
);

Seadistamine ja installimine

Projekti repositoorium sisaldab kahte haru: starter ja Sisu. Saate kasutada lähteharu alusena projekti koostamiseks või kontekstiharu lõpliku demo eelvaate vaatamiseks.

Starter Appi kloonimine

Käivitusrakendus pakub kasutajaliidest, mida vajate lõpliku rakenduse jaoks, et saaksite keskenduda põhiloogika rakendamisele. Avage terminal ja käivitage järgmine käsk, et kloonida hoidla käivitusharu kohalikku masinasse:

git kloon -b starter https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Sõltuvuste installimiseks ja arendusserveri käivitamiseks käivitage projekti kataloogis järgmine käsk:

lõng && lõng dev

Või:

npm i && npm käivita dev

Kui kõik läks hästi, peaks kasutajaliides teie brauseris kuvama:

Loogika rakendamine

Konteksti API pakub võimalust hallata ja jagada komponentide vahel olekuandmeid, ilma et oleks vaja käsitsi tugipuurimist.

1. samm: looge ja eksportige kontekst

Loo src/app/context kausta kontekstifaili salvestamiseks ja projekti kataloogi hästi organiseeritud hoidmiseks. Looge selles kaustas a todo.context.jsx faili, mis sisaldab kogu rakenduse kontekstiloogikat.

Importige luuaKonteksti funktsioonist reageerida raamatukogu ja kutsuge see, salvestades tulemuse muutujasse:

importida { createContext} alates"reageeri";
konst TodoContext = createContext();

Järgmisena looge kohandatud useTodoContext konks, mis tagasi tuleb TodoContext selle kasutataval kujul.

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

2. samm: olekute loomine ja haldamine

Rakenduse CRUD (Create, Read, Update, Delete) toimingute tegemiseks peate looma olekud ja neid haldama Pakkuja komponent.

konst TodoContextProvider = ({lapsed }) => {
konst [task, setTask] = useState("");
konst [ülesanded, setTasks] = useState([]);
tagasi<TodoContext. Pakkujaväärtus={{}}>{lapsed}TodoContext. Pakkuja>;
};
eksportidavaikimisi TodoContextProvider;

Vahetult enne tagasi avaldus, loo a handTodoInput funktsioon, mis käivitub, kui kasutaja sisestab ülesande. See funktsioon värskendab seejärel ülesanne olek.

konst HandTodoInput = (sisend) => setTask (sisend);

Lisa looTask funktsioon, mis käivitub, kui kasutaja esitab ülesande. See funktsioon värskendab ülesandeid olekut ja määrab uuele ülesandele juhusliku ID.

konst looTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 id: matemaatika.trunc(matemaatika.random() * 1000 + 1),
 ülesanne,
 },
 ...ülesanded,
 ]);
 };

Loo an updateTask funktsioon, mis kaardistab läbi ülesandeid nimekirja ja värskendab ülesannet, mille ID ühtib klõpsatud ülesande ID-ga.

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

Loo kustuta ülesanne funktsioon, mis värskendab ülesandeid nimekirja, et see hõlmaks kõiki ülesandeid, mille ID ei vasta antud parameetrile.

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

3. samm: lisage pakkujale olekud ja töötlejad

Nüüd olete loonud olekud ja kirjutanud nende haldamiseks koodi, peate need olekud ja töötleja funktsioonid kasutajale kättesaadavaks tegema. Pakkuja. Saate neid pakkuda objekti kujul, kasutades väärtus vara Pakkuja komponent.

tagasi (
 väärtus={{
 ülesanne,
 ülesanded,
 HandTodoInput,
 looTask,
 updateTask,
 KustutaTask,
 }}
 >
 {lapsed}
 </TodoContext.Provider>
);

4. samm: uurige konteksti

The Pakkuja mille olete loonud, peate ülataseme komponendi pakkima, et muuta kontekst kogu rakendusele kättesaadavaks. Selleks muutke src/app/page.jsx ja mähkida Todos komponent koos TodoContextProvider komponent:

;
</TodoContextProvider>;

5. samm: kasutage komponentides konteksti

Muutke oma src/app/components/Todos.jsx fail ja hävitamine ülesanded, ülesanne, handTodoInputja looTask numbrile helistades useTodoContext funktsiooni.

konst { ülesanne, ülesanded, käepideTodoInput, createTask } = useTodoContext();

Nüüd värskendage vormielementi, et käsitleda esitamise sündmust ja peamise sisestusvälja muudatusi:

 looTask (e)}>
"todo-input" tüüp="tekst" kohatäide="Sisesta ülesanne" vajalik väärtus={ülesanne} onChange={(e) => handleTodoInput (e.target.value)} />
"esita-teha" tüüp="Esita" väärtus="Lisa ülesanne" />
</form>

6. toiming: renderdage ülesanded kasutajaliideses

Nüüd saate rakendust kasutada ülesande loomiseks ja lisamiseks ülesandeid nimekirja. Kuva värskendamiseks peate kaardistama olemasoleva ülesandeid ja renderdage need kasutajaliideses. Esiteks looge a src/app/components/Todo.jsx komponent ühe ülesande hoidmiseks.

Piirkonnas src/app/components/Todo.jsx komponenti, redigeerige või kustutage ülesannet, kutsudes esile updateTask ja kustuta ülesanne funktsioonid, mille lõime src/app/context/todo.context.jsx faili.

importida Reageerige, { useState } alates"reageeri";
importida { useTodoContext } alates"../context/todo.context";
konst Todo = ({ülesanne }) => {
konst { updateTask, deleteTask } = useTodoContext();
// isEdit olek jälgib, kui ülesanne on redigeerimisrežiimis
konst [isEdit, setIsEdit] = useState(vale);
tagasi (

"todo-wrapper">


 {isEdit? ( <sisendtüüp="tekst"väärtus={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thklassi nimi="ülesanne">{task.task}th> )}


"toimingud">
"redigeeri"
 onClick={() => setIsEdit(!isEdit)}> {isEdit? "Salvesta": "Muuda"} </button> 
 deleteTask (task.id)}>Del</button>
 </td>
 </tr>
 </tbody>
 </table>
 );
};



eksportidavaikimisi Tegema;

Renderdada src/app/components/Todo.jsx komponent iga jaoks ülesanne, minge sisse src/app/components/Todos.jsx faili ja tinglikult kaardistada läbi ülesandeid kohe pärast päis sulgev silt.

{ülesanded && (

 {tasks.map((ülesanne, st) => ( <Tegemavõti={i}ülesanne={task} /> ))}
</main>
)}

Testige oma rakendust brauseris ja veenduge, et see annab oodatud tulemuse.

Ülesannete salvestamine kohalikku salvestusruumi

Praegu lähtestab lehe värskendamine ülesanded, tühistades kõik, mille olete loonud. Üks viis selle probleemi lahendamiseks on ülesannete salvestamine brauseri kohalikku salvestusruumi.

Veebisalvestuse API on küpsiste salvestamise täiustus koos funktsioonidega, mis parandavad nii kasutajate kui ka arendajate kasutuskogemust.