UseReducer Hook: React stāvokļa pārvaldības vienkāršošana

React izstrādē izšķiroša nozīme ir valsts pārvaldībai, kas kalpo kā stūrakmens datu apstrādei un atjaunināšanai lietotāja saskarnēs. Reaģēt useState Hook nodrošina vienkāršu pieeju stāvokļa pārvaldībai, taču sarežģītā stāvoklī tas kļūst apgrūtinoši. Tieši tur ir useReducer Āķis ienāk.

The useReducer Hook piedāvā strukturētu metodoloģiju sarežģītu stāvokļu un pāreju pārvaldībai. Aptverot useReducer Āķis nodrošina elastību un efektivitāti, tādējādi nodrošinot tīrāku kodu.

Reducer Hook lietošanas izpratne

The useReducer Hook ir React nodrošināta iebūvēta funkcija, kas racionalizē stāvokļa pārvaldību, ievērojot reduktora modeļa principus. Tas piedāvā organizētu un mērogojamu alternatīvu useState Āķis, īpaši piemērots sarežģītu stāvokļu apstrādei.

Izmantojot sviras useReducer Āķis, jūs varat konsolidēt gan stāvokli, gan tā pārejas vienā reduktora funkcijā.

Šī funkcija izmanto pašreizējo stāvokli un darbību kā ievadi, pēc tam izveidojot jauno stāvokli. Tā darbojas pēc tādiem pašiem principiem kā reducētāja funkcija, ko izmanto JavaScript Array.prototype.reduce() metodi.

UseReducer Hook sintakse un lietošanas piemērs

Sintakse izmantošanai useReducer Āķis ir šāds:

konst [state, dispatch] = useReducer (reducer, originState);

The useReducer funkcija pieņem divus argumentus:

• reduktors (funkcija): nosaka veidu, kādā statuss ir jāatjaunina, pamatojoties uz pašreizējo stāvokli un nosūtīto darbību.
• iniciālais stāvoklis (jebkurš): atspoguļo komponenta sākotnējā stāvokļa vērtību.

Pēc piesaukšanas, useReducer Hook atgriež masīvu, kas sastāv no diviem elementiem:

• stāvoklis (jebkurš): Apzīmē pašreizējā stāvokļa vērtību.
• nosūtīšana (funkcija): Šī funkcija ļauj nosūtīt darbības, lai atjauninātu stāvokli.

Apsveriet tālāk sniegto piemēru, kas ilustrē izmantošanu useReducer Āķis vienkārša skaitītāja pārvaldībā:

imports Reaģējiet, { useReducer } no'reaģēt';
konst sākotnējāState = 0;
konst reduktors = (stāvoklis, darbība) => {
slēdzis (darbība.veids) {
lietu'pieaugums':
atgriezties stāvoklis + 1;
lietu'samazināt':
atgriezties Valsts - 1;
noklusējuma:
atgriezties Valsts;
 }
};
konst Skaitītājs = () => {
konst [count, dispatch] = useReducer (reducer, originState);
konst rokturisPieaugums = () => {
 nosūtīšana({ veids: 'pieaugums' });
 };
konst handDecrement = () => {
 nosūtīšana({ veids: 'samazināt' });
 };
atgriezties (



Pieaugums</button>
{count}</span>
Samazinājums</button>
 </div>
 );
};

No iepriekš redzamās ilustrācijas, sākotnējais stāvoklis 0 ir definēts kopā ar reduktora funkciju, kas ir atbildīga par divu veidu darbību veikšanu: pieaugums un samazinājums. Reduktora funkcija atbilstoši pārveido stāvokli atbilstoši norādītajām darbībām.

Izmantojot sviras useReducer Āķis, stāvoklis tiek inicializēts, un tiek iegūta gan pašreizējā stāvokļa vērtība, gan nosūtīšanas funkcija. Pēc tam tiek izmantota nosūtīšanas funkcija, lai aktivizētu stāvokļa atjauninājumus, noklikšķinot uz attiecīgajām pogām.

Reduktoru funkcijas konstruēšana

Optimālai izmantošanai useReducer Āķis, varat izveidot reduktora funkciju, kas apraksta, kā stāvoklis ir jāatjaunina, pamatojoties uz nosūtītajām darbībām. Šī reduktora funkcija pieņem pašreizējo stāvokli un darbību kā argumentus un atgriež jauno stāvokli.

Parasti reduktora funkcija izmanto pārslēgšanas nosacījumu paziņojumu lai apstrādātu dažādus darbību veidus un attiecīgi veiktu stāvokļa izmaiņas.

Apsveriet tālāk redzamo reduktora funkcijas piemēru, ko izmanto uzdevumu saraksta pārvaldīšanai:

konst iniciālaisState = [];
konst reduktors = (stāvoklis, darbība) => {
slēdzis (darbība.veids) {
lietu'pievienot':
atgriezties [...state, action.payload];
lietu'pārslēgt':
atgriezties state.map((darīt) =>
 todo.id action.payload? { ...darīt, pabeigts: !todo.completed }: todo
 );
lietu'dzēst':
atgriezties state.filter((darīt) => todo.id !== action.payload);
noklusējuma:
atgriezties Valsts;
 }
};

Iepriekš minētajā gadījumā reduktora funkcija apstrādā trīs dažādus darbību veidus: pievienot, pārslēgt, un dzēst. Saņemot pievienot darbību, tā pievieno lietderīgo slodzi (jaunu uzdevuma vienumu). Valsts masīvs.

Gadījumā, pārslēgt darbību, tas aizstāj pabeigts ar norādīto ID saistītā uzdevuma vienuma rekvizīts. The dzēst no otras puses, darbība no stāvokļa masīva izslēdz uzdevumu vienumu, kas ir saistīts ar norādīto ID.

Ja neviens no darbības veidiem neatbilst, reduktora funkcija atgriež pašreizējo stāvokli nemainīgu.

Nosūtīšanas darbības

Lai veiktu stāvokļa atjauninājumus, ko veicina useReducer Āķis, darbību nosūtīšana kļūst neaizstājama. Darbības ir vienkārši JavaScript objekti, kas izskaidro vēlamo stāvokļa modifikācijas veidu.

Atbildība par šo darbību veikšanu un turpmākā stāvokļa ģenerēšanu gulstas uz reduktora funkciju.

Nosūtīšanas funkcija, ko nodrošina useReducer Āķis, tiek izmantots darbību nosūtīšanai. Tas pieņem darbības objektu kā argumentu, tādējādi rosinot attiecīgā stāvokļa atjaunināšanu.

Iepriekšējos piemēros darbības tika nosūtītas, izmantojot sintaksi nosūtīšana ({type: 'actionType'}). Tomēr ir iespējams, ka darbības ietver papildu datus, kas pazīstami kā kravnesība, kas sniedz papildu ieskatus saistībā ar atjauninājumu. Piemēram:

nosūtīšana({ veids: 'pievienot', kravnesība: { id: 1, tekstu: "Pabeigt mājasdarbu", pabeigts: viltus } });

Šajā scenārijā pievienot darbība ietver lietderīgās slodzes objektu, kas iekapsulē informāciju par jauno uzdevumu, kas jāiekļauj stāvoklī.

Sarežģītā stāvokļa pārvaldība, izmantojot useReducer

Patiesais spēks useReducer Āķis slēpjas tā spējā pārvaldīt sarežģītas stāvokļa struktūras, kas ietver daudzas savstarpēji saistītas vērtības un sarežģītas stāvokļa pārejas.

Centralizējot stāvokļa loģiku reduktora funkcijā, dažādu darbību veidu vadība un sistemātiska stāvokļa aktualizēšana kļūst par īstenojamu pasākumu.

Apsveriet scenāriju, kurā a React forma sastāv no vairākiem ievades laukiem. Tā vietā, lai pārvaldītu katras ievades stāvokli atsevišķi, izmantojot useState, useReducer Āķi var izmantot, lai holistiski pārvaldītu veidlapas stāvokli.

Reducētāja funkcija var pienācīgi apstrādāt darbības, kas saistītas ar konkrētu lauku modificēšanu un visas veidlapas visaptverošu validāciju.

konst sākotnējāState = {
 nosaukums: '',
 e-pasts: '',
 parole: '',
 isFormValid: viltus,
};
konst reduktors = (stāvoklis, darbība) => {
slēdzis (darbība.veids) {
lietu'updateField':
atgriezties { ...state, [action.payload.field]: action.payload.value };
lietu'validateForm':
atgriezties { ...Valsts, isFormValid: action.payload };
noklusējuma:
atgriezties Valsts;
 }
};

Piemērā reduktora funkcija nodrošina divus atšķirīgus darbību veidus: atjaunināšanas lauks un validētForm. The atjaunināšanas lauks darbība atvieglo konkrēta lauka modifikāciju valstī, izmantojot sniegto vērtību.

Savukārt, validētForm darbība atjaunina isFormValid rekvizītu, pamatojoties uz sniegto validācijas rezultātu.

Izmantojot useReducer Āķis, lai pārvaldītu veidlapas stāvokli, visi saistītie stāvokļi un darbības tiek apvienoti atsevišķā vienībā, tādējādi uzlabojot izpratni un uzturēšanu.

Salīdzinot useReducer ar citiem valsts pārvaldības risinājumiem

Lai gan useReducer Hook ir spēcīgs valsts pārvaldības instruments, un ir ļoti svarīgi atzīt tā atšķirības un kompromisus, salīdzinot ar alternatīviem valsts pārvaldības risinājumiem React ekosistēmā.

useState

The useState Āķis ir pietiekams, lai pārvaldītu vienkāršus, izolētus stāvokļus komponentā. Tās sintakse ir kodolīgāka un vienkāršāka salīdzinājumā ar useReducer. Tomēr sarežģītu stāvokļu vai stāvokļa pāreju gadījumā useReducer nodrošina organizētāku pieeju.

Redux

Redux pārstāv ievērojamu valsts pārvaldības bibliotēku React lietojumprogrammām. Tas atbilst līdzīgam reduktora modelim kā useReducer, tomēr nodrošina papildu funkcijas, piemēram, centralizētu veikalu, starpprogrammatūras atbalstu un laika ceļojuma atkļūdošanu.

Redux ir ideāli piemērots liela mēroga lietojumprogrammām, kurām nepieciešamas sarežģītas valsts pārvaldības prasības. Taču mazākiem projektiem vai vienkāršākām valsts pārvaldības vajadzībām, useReducer var kalpot kā viegla un vienkāršāka alternatīva.

Konteksta API

React's Context API nodrošina stāvokļa kopīgošanu vairākos komponentos, neizmantojot balsta urbšanu. Saistībā ar useReducer, tas var nodrošināt centralizētu valsts pārvaldības risinājumu.

Kaut arī Context API kombinācija un useReducer lepojas ar ievērojamu jaudu, tas var radīt papildu sarežģītību, ja to salīdzina ar useReducer izmantošanu atsevišķi.

Konteksta API ir vislabāk izmantot, ja ir nepieciešams koplietot stāvokli dziļi ligzdotu komponentu vidū vai saskaroties ar sarežģītu komponentu hierarhiju. Piemērota valsts pārvaldības risinājuma izvēle ir atkarīga no konkrētā lietojumprogrammas prasībām.

Vidēja apjoma projektiem, useReducer var izrādīties efektīva un vienkāršāka alternatīva Redux vai Context API.

Valsts vadības vienkāršības atraisīšana

UseReducer Hook ir spēcīgs instruments stāvokļa pārvaldības vienkāršošanai React lietojumprogrammās. Ievērojot reduktora modeļa principus, tas piedāvā strukturētu un mērogojamu pieeju sarežģītu stāvokļu un stāvokļu pāreju apstrādei.

Lietojot kopā ar useState Hook, useReducer var kalpot kā viegla alternatīva bibliotēkām, piemēram, Redux vai Context API, jo īpaši mazāku un vidēju bibliotēku kontekstā projektus.