Kun hallitset monimutkaisia ​​tiloja Next-sovelluksessa, asiat voivat muuttua hankalaksi nopeasti. Perinteiset koukut kuten useState tukea valtion hallinnolle, mutta kyse on potkuriporauksesta. Prop-poraus tarkoittaa tietojen tai toimintojen siirtämistä useiden komponenttien läpi.

Parempi lähestymistapa olisi erottaa tilanhallintalogiikka komponenteista ja päivittää nämä tilat missä tahansa sovelluksessasi. Opastamme sinut Context API: n käyttämiseen, kun rakennamme yksinkertaista tehtävälistasovellusta.

Ennen kuin aloitat tehtäväluettelon

Ennen kuin voit rakentaa tehtävälistasovelluksen, tarvitset:

  • Perustiedot aiheesta nykyaikaiset JavaScript-operaattorit ja Reactin useState-koukku.
  • Ymmärrys siitä, miten tuhoaa taulukoita ja objekteja JavaScriptissä.
  • Solmu v16.8 tai uudempi asennettuna paikalliselle koneelle ja tuttu pakettien ylläpitäjät, kuten npm tai lankaa.

Valmiin projektin löydät osoitteesta GitHub viitteeksi ja lisätutkimukseksi.

Sovelluksen tilan ja hallinnan ymmärtäminen

Sovelluksen tila viittaa sovelluksen nykyiseen tilaan tiettynä ajankohtana. Tämä sisältää sovelluksen tuntemat ja hallitsemat tiedot, kuten käyttäjän syötteet ja tietokannasta tai API: sta (Application Programming Interface) haetut tiedot.

instagram viewer

Ymmärtääksesi sovelluksen tilan, harkitse yksinkertaisen laskurisovelluksen mahdollisia tiloja. Ne sisältävät:

  • Oletustila kun laskuri on nollassa.
  • Lisääntynyt tila kun laskuri kasvaa yhdellä.
  • Vähentynyt tila kun laskuri pienenee yhdellä.
  • Nollaustila kun laskuri palaa oletustilaansa.

React-komponentti voi tilata tilan muutoksia. Kun käyttäjä on vuorovaikutuksessa tällaisen komponentin kanssa, hänen toiminnonsa, kuten painikkeen napsautukset, voivat hallita tilan päivityksiä.

Tämä katkelma näyttää yksinkertaisen laskurisovelluksen oletustilassaan, joka hallitsee tilaa napsautustoimintojen perusteella:

konst [laskuri, setCounter] = useState(0);
palata (

{laskuri}</h1>

Asennus ja asennus

Projektin arkisto sisältää kaksi haaraa: käynnistin ja yhteydessä. Voit käyttää aloitushaaraa pohjana rakentaaksesi projektin tai kontekstihaaraa esikatsellaksesi lopullista esittelyä.

Starter App -sovelluksen kloonaus

Aloitussovellus tarjoaa käyttöliittymän, jota tarvitset lopulliseen sovellukseen, joten voit keskittyä ydinlogiikan toteuttamiseen. Avaa pääte ja suorita seuraava komento kloonataksesi arkiston aloitushaaran paikalliseen koneeseen:

git klooni -b käynnistin https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Suorita seuraava komento projektihakemistossa asentaaksesi riippuvuudet ja käynnistääksesi kehityspalvelimen:

lanka && lanka dev

Tai:

npm i && npm ajaa dev

Jos kaikki meni hyvin, käyttöliittymän pitäisi näkyä selaimessasi:

Logiikan toteuttaminen

Context API tarjoaa tavan hallita ja jakaa tilatietoja komponenttien välillä ilman manuaalista potkuriporausta.

Vaihe 1: Luo ja vie konteksti

Luo src/app/context kansio kontekstitiedoston tallentamiseen ja projektihakemiston pitämiseen hyvin järjestyksessä. Luo tähän kansioon a todo.context.jsx tiedosto, joka sisältää kaiken sovelluksen kontekstilogiikan.

Tuo luodaContext toiminto alkaen reagoida kirjasto ja kutsu se tallentamalla tulos muuttujaan:

tuonti { CreateContext} alkaen"reagoi";
konst TodoContext = createContext();

Luo seuraavaksi mukautettu useTodoContext koukku joka palaa TodoContext käyttökelpoisessa muodossaan.

viedäkonst useTodoContext = () => useContext (TodoContext);

Vaihe 2: Luo ja hallitse tiloja

Suorittaaksesi sovelluksen CRUD-toiminnot (Create, Read, Update, Delete) sinun on luotava tilat ja hallittava niitä Palveluntarjoaja komponentti.

konst TodoContextProvider = ({lapset }) => {
konst [tehtävä, setTask] = useState("");
konst [tehtävät, setTasks] = useState([]);
palata<TodoContext. Palveluntarjoajaarvo={{}}>{lapset}TodoContext. Palveluntarjoaja>;
};
viedäoletuksena TodoContextProvider;

Juuri ennen palata lausunto, luo a HandTodoInput toiminto, joka suoritetaan, kun käyttäjä kirjoittaa tehtävän. Tämä toiminto päivittää sitten tehtävä osavaltio.

konst handleTodoInput = (syöttö) => setTask (syöttö);

Lisää luo Tehtävä toiminto, joka suoritetaan, kun käyttäjä lähettää tehtävän. Tämä toiminto päivittää tehtäviä tilaan ja määrittää uudelle tehtävälle satunnaisen tunnuksen.

konst CreateTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 id: Matematiikka.trunc(Matematiikka.random() * 1000 + 1),
 tehtävä,
 },
 ...tehtävät,
 ]);
 };

Luo an PäivitäTask toiminto, joka kartoittaa tehtäviä luettelo ja päivittää tehtävän, jonka tunnus vastaa napsautetun tehtävän tunnusta.

konst updateTask = (id, päivitysteksti) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, tehtävä: updateText }: t)));

Luo poistaTask toiminto, joka päivittää tehtäviä lista niin, että se sisältää kaikki tehtävät, joiden tunnus ei vastaa annettua parametria.

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

Vaihe 3: Lisää tilat ja käsittelijät palveluntarjoajaan

Nyt olet luonut tilat ja kirjoittanut koodin niiden hallintaa varten, sinun on saatettava nämä tilat ja käsittelijän toiminnot saataville Palveluntarjoaja. Voit toimittaa ne objektin muodossa käyttämällä arvo omaisuutta Palveluntarjoaja komponentti.

palata (
 arvo={{
 tehtävä,
 tehtäviä,
 HandTodoInput,
 luodaTask,
 updateTask,
 deleteTask,
 }}
 >
 {lapset}
 </TodoContext.Provider>
);

Vaihe 4: Selvitä konteksti

The Palveluntarjoaja luomasi ylätason komponentti on käärittävä, jotta konteksti on koko sovelluksen käytettävissä. Tee tämä muokkaamalla src/app/page.jsx ja kääri Todos komponentin kanssa TodoContextProvider komponentti:


;
</TodoContextProvider>;

Vaihe 5: Käytä Komponenttien kontekstia

Muokkaa omaa src/app/components/Todos.jsx tiedosto ja tuhoaminen tehtävät, tehtävät, HandTodoInput, ja luo Tehtävä soittamalla numeroon useTodoContext toiminto.

konst { tehtävä, tehtävät, käsitteleTodoInput, createTask } = useTodoContext();

Päivitä nyt lomakeelementti käsittelemään lähetystapahtumaa ja muutoksia pääsyöttökenttään:

 luoTask (e)}>
"tehtävä-syöttö" tyyppi="teksti" paikkamerkki="Syötä tehtävä" vaadittu arvo={tehtävä} onChange={(e) => handleTodoInput (e.target.value)} />
"lähetä-tehtävä" tyyppi="Lähetä" arvo ="Lisää tehtävä" />
</form>

Vaihe 6: Renderöi tehtävät käyttöliittymässä

Voit nyt käyttää sovellusta tehtävän luomiseen ja lisäämiseen tehtäviä lista. Päivittääksesi näytön, sinun on kartoitettava olemassa olevat tehtäviä ja renderöi ne käyttöliittymässä. Luo ensin a src/app/components/Todo.jsx komponentti yksittäisen tehtävän säilyttämiseen.

Sisällä src/app/components/Todo.jsx komponenttia, muokkaa tai poista tehtävää kutsumalla PäivitäTask ja poistaTask toiminnot, joissa loimme src/app/context/todo.context.jsx tiedosto.

tuonti Reagoi, { useState } alkaen"reagoi";
tuonti { useTodoContext } alkaen"../context/todo.context";
konst Tehtävä = ({ tehtävä }) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit-tila seuraa, kun tehtävä on muokkaustilassa
konst [isEdit, setIsEdit] = useState(väärä);


palata (

"tehtävä-kääre">


 {isEdit? ( <syöttötyyppi="teksti"arvo={tehtävä.tehtävä}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<thluokan nimi="tehtävä">{tehtävä.tehtävä}th> )}



"Toiminnot">






viedäoletuksena Tehdä;

Muodostaaksesi src/app/components/Todo.jsx komponentti jokaiselle tehtävä, mene sisään src/app/components/Todos.jsx tiedosto ja ehdollisesti kartoittaa sen läpi tehtäviä heti sen jälkeen otsikko sulkeva tagi.

{tehtävät && (

 {tasks.map((tehtävä, i) => ( <Tehdäavain={i}tehtävä={tehtävä} /> ))}
</main>
)}

Testaa sovelluksesi selaimessa ja varmista, että se antaa odotetun tuloksen.

Tehtävien tallentaminen paikalliseen tallennustilaan

Tällä hetkellä sivun päivittäminen nollaa tehtävät ja hylkää kaikki luomasi. Yksi tapa korjata tämä ongelma on tallentaa tehtävät selaimen paikalliseen tallennustilaan.

Verkkotallennussovellusliittymä on parannus evästeen tallennukseen, ja sen ominaisuudet parantavat sekä käyttäjien että kehittäjien käyttökokemusta.