Tvarkant sudėtingas būsenas programoje Next, viskas gali greitai pasidaryti sudėtinga. Tradiciniai kabliukai kaip useState pagalba su valstybės valdymu, bet keliamas atramos gręžimo klausimas. Atramos gręžimas reiškia duomenų arba funkcijų perdavimą per kelis komponentus.

Geresnis būdas būtų atskirti būsenos valdymo logiką nuo komponentų ir atnaujinti šias būsenas iš bet kurios programos vietos. Sukurdami paprastą užduočių sąrašo programą, paaiškinsime, kaip naudoti Context API.

Prieš pradėdami sudaryti darbų sąrašą

Prieš kurdami užduočių sąrašo programą, jums reikės:

  • Pagrindinės žinios apie Šiuolaikiniai JavaScript operatoriai ir Reakcijos naudojimasState kabliukas.
  • Supratimas, kaip sunaikinti masyvus ir objektus JavaScript.
  • Mazgas 16.8 ar naujesnė versija įdiegta jūsų vietiniame kompiuteryje ir susipažinę su paketų tvarkytojai kaip npm arba verpalų.

Baigtą projektą galite rasti adresu GitHub nuorodai ir tolesniam tyrinėjimui.

Programos būsenos ir valdymo supratimas

Programos būsena nurodo esamą programos būklę tam tikru momentu. Tai apima informaciją, kurią programa žino ir tvarko, pvz., vartotojo įvestį ir duomenis, paimtus iš duomenų bazės arba API (programų programavimo sąsajos).

instagram viewer

Norėdami suprasti programos būseną, apsvarstykite galimas paprastos skaitiklio programos būsenas. Jie įtraukia:

  • Numatytoji būsena kai skaitiklis yra ties nuliu.
  • Padidėjusi būsena kai skaitiklis padidėja vienu.
  • Sumažėjusi būsena kai skaitiklis sumažėja vienu.
  • Iš naujo nustatyta būsena kai skaitiklis grįš į numatytąją būseną.

„React“ komponentas gali užsisakyti būsenos pokyčius. Kai vartotojas sąveikauja su tokiu komponentu, jo veiksmai, pvz., mygtukų paspaudimai, gali valdyti būsenos naujinimus.

Šiame fragmente rodoma paprasta skaitiklio programa (numatytoji būsena), kuri valdo būseną pagal paspaudimo veiksmus:

konst [skaitiklis, setCounter] = useState(0);
grąžinti (

{skaitiklis}</h1>

Sąranka ir diegimas

Projekto saugyklą sudaro dvi šakos: starteris ir kontekste. Galite naudoti pradinę šaką kaip pagrindą projektui kurti arba kontekstinę šaką, kad galėtumėte peržiūrėti galutinę demonstracinę versiją.

Programėlės Starter klonavimas

Pradinėje programoje pateikiama vartotojo sąsaja, kurios jums prireiks galutinei programai, kad galėtumėte sutelkti dėmesį į pagrindinės logikos įgyvendinimą. Atidarykite terminalą ir paleiskite šią komandą, norėdami klonuoti pradinę saugyklos šaką į vietinį kompiuterį:

git klonas -b starteris https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Vykdykite šią komandą projekto kataloge, kad įdiegtumėte priklausomybes ir paleistumėte kūrimo serverį:

yarn & & yarn dev

Arba:

npm i && npm paleisti dev

Jei viskas buvo gerai, jūsų naršyklėje turėtų būti rodoma vartotojo sąsaja:

Logikos įgyvendinimas

„Context API“ suteikia galimybę valdyti ir dalytis būsenos duomenimis tarp komponentų, nereikia gręžti rankiniu būdu.

1 veiksmas: sukurkite ir eksportuokite kontekstą

Sukurti src/app/context aplanką, kad išsaugotumėte kontekstinį failą ir gerai sutvarkytumėte projekto katalogą. Šiame aplanke sukurkite a todo.context.jsx failą, kuriame bus visa programos konteksto logika.

Importuoti sukurti kontekstą funkcija iš reaguoti biblioteką ir iškvieskite ją, išsaugodami rezultatą kintamajame:

importuoti { CreateContext} iš"reaguoti";
konst TodoContext = CreateContext();

Tada sukurkite tinkintą useTodoContext kabliukas, kuris grįžta TodoContext jo tinkama forma.

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

2 veiksmas: kurkite ir tvarkykite būsenas

Norėdami atlikti programos CRUD (Kurti, skaityti, atnaujinti, ištrinti) veiksmus, turėsite sukurti būsenas ir jas valdyti naudodami Teikėjas komponentas.

konst TodoContextProvider = ({vaikai}) => {
konst [užduotis, setTask] = useState("");
konst [užduotys, setTasks] = useState([]);
grąžinti<TodoContext. Teikėjasvertė={{}}>{vaikai}TodoContext. Teikėjas>;
};
eksportuotinumatytas TodoContextProvider;

Prieš pat grąžinti pareiškimą, sukurkite a rankenaTodoInput funkcija, kuri veiks, kai vartotojas įves užduotį. Tada ši funkcija atnaujina užduotis valstybė.

konst handTodoInput = (įvestis) => setTask (įvestis);

Pridėti sukurti užduotį funkcija, kuri veiks, kai vartotojas pateiks užduotį. Ši funkcija atnaujina užduotys būseną ir naujai užduočiai priskiria atsitiktinį ID.

konst CreateTask = (e) => {
 e.preventDefault();
 setTasks([
 {
 ID: Matematika.trunc(Matematika.random() * 1000 + 1),
 užduotis,
 },
 ...užduotys,
 ]);
 };

Sukurti an UpdateTask funkcija, kuri nurodo per užduotys sąrašą ir atnaujina užduotį, kurios ID sutampa su spustelėtos užduoties ID.

konst updateTask = (id, updateText) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, užduotis: updateText }: t)));

Sukurti ištrinti užduotį funkcija, kuri atnaujina užduotys sąrašą, kad jame būtų visos užduotys, kurių ID neatitinka nurodyto parametro.

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

3 veiksmas: pridėkite būsenas ir tvarkykles prie teikėjo

Dabar jūs sukūrėte būsenas ir parašėte kodą, kad galėtumėte jas valdyti. Turite padaryti šias būsenas ir tvarkyklės funkcijas prieinamas Teikėjas. Galite pateikti juos objekto pavidalu, naudodami vertė nuosavybė Teikėjas komponentas.

grąžinti (
 value={{
 užduotis,
 užduotys,
 handTodoInput,
 sukurti užduotį,
 updateTask,
 ištrinti užduotį,
 }}
 >
 {vaikai}
 </TodoContext.Provider>
);

4 veiksmas: apimkite kontekstą

The Teikėjas kurį sukūrėte, turite apvynioti aukščiausio lygio komponentą, kad kontekstas būtų pasiekiamas visai programai. Norėdami tai padaryti, redaguokite src/app/page.jsx ir apvyniokite Todos komponentas su „TodoContextProvider“. komponentas:


;
</TodoContextProvider>;

5 veiksmas: naudokite kontekstą komponentuose

Redaguokite savo src/app/components/Todos.jsx failą ir sunaikinimą užduotis, užduotis, rankenaTodoInput, ir sukurti užduotį per skambutį į useTodoContext funkcija.

konst { užduotis, užduotys, rankenaTodoInput, createTask } = useTodoContext();

Dabar atnaujinkite formos elementą, kad galėtumėte apdoroti pateikimo įvykį ir pagrindinio įvesties lauko pakeitimus:

 CreateTask (e)}>
„todo-input“ tipas ="tekstas" vietos rezervuaras=„Įveskite užduotį“ reikalinga vertė={užduotis} onChange={(e) => handleTodoInput (e.target.value)} />
"pateikti-padaryti" tipas ="Pateikti" vertė ="Pridėti užduotį" />
</form>

6 veiksmas. Pateikite užduotis vartotojo sąsajoje

Dabar galite naudoti programą norėdami sukurti ir pridėti užduotį užduotys sąrašą. Norėdami atnaujinti ekraną, turėsite susieti esamą užduotys ir pateikti juos vartotojo sąsajoje. Pirmiausia sukurkite a src/app/components/Todo.jsx komponentas, skirtas vienam darbui laikyti.

Per src/app/components/Todo.jsx komponentą, redaguoti arba ištrinti užduotį iškviesdami UpdateTask ir ištrinti užduotį funkcijas, kurias sukūrėme src/app/context/todo.context.jsx failą.

importuoti Reaguoti, { useState } iš"reaguoti";
importuoti { useTodoContext } iš"../context/todo.context";
konst Todo = ({ užduotis }) => {
konst { updateTask, deleteTask } = useTodoContext();


// isEdit būsena seka, kai užduotis veikia redagavimo režimu
konst [isEdit, setIsEdit] = useState(klaidinga);


grąžinti (

"todo-wrapper">


 {isEdit? ( <įvestistipo="tekstas"vertė={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<thklasės pavadinimas="užduotis">{task.task}th> )}



"veiksmai">






eksportuotinumatytas Daryti;

Norėdami pateikti src/app/components/Todo.jsx komponentas kiekvienam užduotis, eikite į src/app/components/Todos.jsx failą ir sąlygiškai susieti per užduotys iškart po antraštę uždarymo žyma.

{užduotys && (

 {tasks.map((užduotis, t) => ( <DarytiRaktas={i}užduotis={užduotis} /> ))}
</main>
)}

Išbandykite programą naršyklėje ir patvirtinkite, kad ji duoda laukiamą rezultatą.

Užduočių išsaugojimas vietinėje saugykloje

Šiuo metu atnaujinus puslapį bus iš naujo nustatytos užduotys ir bus atmestos visos jūsų sukurtos. Vienas iš būdų išspręsti šią problemą yra saugoti užduotis naršyklės vietinėje saugykloje.

Žiniatinklio saugyklos API yra slapukų saugojimo patobulinimas su funkcijomis, kurios pagerina naudotojų ir kūrėjų patirtį.