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
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:
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ā:
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.
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.
Pievienojiet a izveidotUzdevumu funkcija, kas darbosies, kad lietotājs iesniedz uzdevumu. Šī funkcija atjaunina uzdevumus stāvokli un piešķir jaunajam uzdevumam nejaušu 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.
Tagad atjauniniet veidlapas elementu, lai apstrādātu iesniegšanas notikumu un izmaiņas galvenajā ievades laukā:
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.
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.
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.