Pārvaldot sarežģītus stāvokļus lietojumprogrammā Next, lietas var ātri kļūt sarežģītas. Tradicionālie āķi kā useState palīdzība ar valsts pārvaldību, bet ir jautājums par rekvizītu urbšanu. Balstu urbšana nozīmē datu vai funkciju nodošanu cauri vairākiem komponentiem.

Labāka pieeja būtu jūsu stāvokļa pārvaldības loģikas atdalīšana no komponentiem un šo stāvokļu atjaunināšana no jebkuras vietas jūsu lietojumprogrammā. Mēs jums pastāstīsim, kā izmantot Context API, veidojot vienkāršu uzdevumu saraksta lietojumprogrammu.

Pirms sākat savu uzdevumu sarakstu

Lai varētu izveidot uzdevumu saraksta lietojumprogrammu, jums būs nepieciešams:

  • Pamatzināšanas par mūsdienu JavaScript operatori un Reaģēt's useState āķis.
  • Izpratne par to, kā iznīciniet masīvus un objektus JavaScript.
  • Mezgls v16.8 vai jaunāka versija, kas instalēta jūsu vietējā datorā, un zināšanas par pakešu pārvaldnieki, piemēram, npm vai dzija.

Jūs varat atrast gatavo projektu GitHub uzziņai un turpmākai izpētei.

Izpratne par lietojumprogrammu stāvokli un pārvaldību

instagram viewer

Lietojumprogrammas stāvoklis attiecas uz pašreizējo lietojumprogrammas stāvokli noteiktā brīdī. Tas ietver informāciju, ko lietotne zina un pārvalda, piemēram, lietotāja ievadi un datus, kas iegūti no datu bāzes vai API (lietojumprogrammu saskarnes).

Lai saprastu lietojumprogrammas stāvokli, apsveriet vienkāršas skaitītāja lietojumprogrammas iespējamos stāvokļus. Tajos ietilpst:

  • Noklusējuma stāvoklis kad skaitītājs ir uz nulles.
  • Paaugstināts stāvoklis kad skaitītājs palielinās par vienu.
  • Samazināts stāvoklis kad skaitītājs samazinās par vienu.
  • Atiestatīšanas stāvoklis kad skaitītājs atgriežas noklusējuma stāvoklī.

React komponents var abonēt stāvokļa izmaiņas. Kad lietotājs mijiedarbojas ar šādu komponentu, viņa darbības, piemēram, pogu klikšķi, var pārvaldīt stāvokļa atjauninājumus.

Šis fragments parāda vienkāršu skaitītāja lietojumprogrammu tās noklusējuma stāvoklī, kas pārvalda stāvokli, pamatojoties uz klikšķu darbībām:

konst [skaitītājs, setCounter] = useState(0);

atgriezties (


{skaitītājs}</h1>

Uzstādīšana un uzstādīšana

Projekta repozitorijā ir divas filiāles: starteris un kontekstā. Varat izmantot sākuma zaru kā pamatu, lai izveidotu projektu, vai konteksta zaru, lai priekšskatītu galīgo demonstrāciju.

Programmas Starter klonēšana

Sākuma lietotne nodrošina lietotāja saskarni, kas jums būs nepieciešama galīgajai lietotnei, lai jūs varētu koncentrēties uz galvenās loģikas ieviešanu. Atveriet termināli un palaidiet šo komandu, lai klonētu repozitorija startera zaru vietējai mašīnai:

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

Projekta direktorijā palaidiet šo komandu, lai instalētu atkarības un palaistu izstrādes serveri:

dzija && dzija dev

Vai:

npm i && npm palaist dev

Ja viss noritēja labi, lietotāja interfeisam vajadzētu parādīties jūsu pārlūkprogrammā:

Loģikas ieviešana

Context API nodrošina veidu, kā pārvaldīt un koplietot stāvokļa datus starp komponentiem, neizmantojot manuālu balstu urbšanu.

1. darbība. Izveidojiet un eksportējiet kontekstu

Izveidot a src/app/context mapi, lai saglabātu konteksta failu un labi sakārtotu projekta direktoriju. Šajā mapē izveidojiet a todo.context.jsx failu, kurā būs visa lietojumprogrammas konteksta loģika.

Importēt izveidotKontekstu funkcija no reaģēt bibliotēku un izsauciet to, saglabājot rezultātu mainīgajā:

imports { CreateContext} no"reaģēt";
konst TodoContext = izveidotContext();

Pēc tam izveidojiet pielāgotu useTodoContext āķis, kas atgriežas TodoContext tā lietojamā formā.

eksportētkonst useTodoContext = () => useContext (TodoContext);

2. darbība. Izveidojiet un pārvaldiet valstis

Lai veiktu lietojumprogrammas CRUD (izveidot, lasīt, atjaunināt, dzēst) darbības, jums ir jāizveido stāvokļi un jāpārvalda tie, izmantojot Pakalpojumu sniedzējs komponents.

konst TodoContextProvider = ({bērni}) => {
konst [task, setTask] = useState("");
konst [uzdevumi, setTasks] = useState([]);
atgriezties<TodoContext. Pakalpojumu sniedzējsvērtību={{}}>{bērni}TodoContext. Pakalpojumu sniedzējs>;
};

eksportētnoklusējuma TodoContextProvider;

Tieši pirms atgriezties paziņojumu, izveidojiet a handTodoInput funkcija, kas darbosies, kad lietotājs ierakstīs uzdevumu. Pēc tam šī funkcija atjaunina uzdevums Valsts.

konst handTodoInput = (ievade) => setTask (ievade);

Pievienojiet a izveidotUzdevumu funkcija, kas darbosies, kad lietotājs iesniedz uzdevumu. Šī funkcija atjaunina uzdevumus stāvokli un piešķir jaunajam uzdevumam nejaušu ID.

konst CreateTask = (e) => {
e.preventDefault();

setTasks([
{
id: Matemātika.trunc(Matemātika.random() * 1000 + 1),
uzdevums,
},
...uzdevumi,
]);
};

Izveidojiet an updateTask funkcija, kas kartē caur uzdevumus sarakstu un atjaunina uzdevumu, kura ID atbilst uzdevuma ID, uz kura noklikšķināts.

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

Izveidot a dzēstUzdevumu funkcija, kas atjaunina uzdevumus sarakstu, lai tajā būtu iekļauti visi uzdevumi, kuru ID neatbilst norādītajam parametram.

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

3. darbība. Pievienojiet pakalpojumu sniedzējam stāvokļus un apdarinātājus

Tagad esat izveidojis stāvokļus un uzrakstījis kodu, lai tos pārvaldītu. Jums ir jāpadara šie stāvokļi un apstrādātāja funkcijas pieejami Pakalpojumu sniedzējs. Jūs varat tos piegādāt objekta veidā, izmantojot vērtību īpašums Pakalpojumu sniedzējs komponents.

atgriezties (
vērtība={{
uzdevums,
uzdevumi,
handTodoInput,
izveidot uzdevumu,
updateTask,
dzēstTask,
}}
>
{bērni}
</TodoContext.Provider>
);

4. darbība. Izpētiet kontekstu

The Pakalpojumu sniedzējs jūsu izveidotajam ir jāietver augstākā līmeņa komponents, lai konteksts būtu pieejams visai lietojumprogrammai. Lai to izdarītu, rediģējiet src/app/page.jsx un aptiniet Todos komponents ar TodoContextProvider komponents:


;
</TodoContextProvider>;

5. darbība. Izmantojiet kontekstu sadaļā Komponenti

Rediģējiet savu src/app/components/Todos.jsx fails un iznīcināšana uzdevumi, uzdevums, handTodoInput, un izveidotUzdevumu izmantojot zvanu uz useTodoContext funkciju.

konst { uzdevums, uzdevumi, rokturisTodoInput, createTask } = useTodoContext();

Tagad atjauniniet veidlapas elementu, lai apstrādātu iesniegšanas notikumu un izmaiņas galvenajā ievades laukā:

CreateTask (e)}>
"todo-input" tips="teksts" vietturis="Ievadiet uzdevumu" obligātā vērtība={uzdevums} onChange={(e) => handleTodoInput (e.target.value)} />
"iesniegt-todo" tips="Iesniegt" vērtība="Pievienot uzdevumu" />
</form>

6. darbība. Renderējiet uzdevumus lietotāja saskarnē

Tagad varat izmantot lietotni, lai izveidotu un pievienotu uzdevumu uzdevumus sarakstu. Lai atjauninātu displeju, jums būs jākartē esošie uzdevumus un renderēt tos lietotāja saskarnē. Vispirms izveidojiet a src/app/components/Todo.jsx komponents, lai turētu vienu uzdevumu.

Ietvaros src/app/components/Todo.jsx komponentu, rediģēt vai dzēst uzdevumu, izsaucot updateTask un dzēstUzdevumu funkcijas, kuras mēs izveidojām src/app/context/todo.context.jsx failu.

imports Reaģēt, { useState } no"reaģēt";
imports { useTodoContext } no"../context/todo.context";

konst Todo = ({ uzdevums }) => {
konst { updateTask, deleteTask } = useTodoContext();

// isEdit stāvoklis izseko, kad uzdevums ir rediģēšanas režīmā
konst [isEdit, setIsEdit] = useState(viltus);

atgriezties (

"todo-wrapper">


{isEdit? ( <ievadeveids="teksts"vērtību={task.task}
onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
(<thklasesNosaukums="uzdevums">{task.task}th> )}
"darbības">

eksportētnoklusējuma Darīt;

Lai atveidotu src/app/components/Todo.jsx komponents katram uzdevums, dodieties uz src/app/components/Todos.jsx failu un nosacīti kartēt caur uzdevumus uzreiz pēc galvene noslēdzošais tags.

{uzdevumi && (

{tasks.map((uzdevums, t.i) => ( <Darīttaustiņu={i}uzdevums={task} /> ))}
</main>
)}

Pārbaudiet savu lietojumprogrammu pārlūkprogrammā un apstipriniet, ka tā sniedz gaidīto rezultātu.

Uzdevumu saglabāšana vietējā krātuvē

Pašlaik, atsvaidzinot lapu, tiks atiestatīti uzdevumi, atmetot visus izveidotos. Viens veids, kā novērst šo problēmu, ir uzdevumu glabāšana pārlūkprogrammas lokālajā krātuvē.

Web krātuves API ir sīkfailu uzglabāšanas uzlabojums ar funkcijām, kas uzlabo gan lietotāju, gan izstrādātāju pieredzi.