„UseReducer Hook“: „React“ būsenos valdymo supaprastinimas

Būsenos valdymas yra labai svarbus kuriant React, kuris yra kertinis akmuo tvarkant ir atnaujinant duomenis vartotojo sąsajose. Reaguoti useState „Hook“ suteikia paprastą būdą valdyti būseną, tačiau sudėtinga būsena tampa sudėtinga. Štai kur useReducer Įeina kabliukas.

The useReducer Hook siūlo struktūrizuotą sudėtingų būsenų ir perėjimų valdymo metodiką. Apkabindamas useReducer Kabliukas atrakina lankstumą ir efektyvumą, todėl kodas yra švaresnis.

Reducer Hook naudojimo supratimas

The useReducer Kabliukas yra integruota React funkcija, kuri supaprastina būsenos valdymą laikantis reduktoriaus modelio principų. Ji siūlo jums organizuotą ir keičiamo dydžio alternatyvą useState Kablys, ypač tinkamas sudėtingoms būsenoms valdyti.

Naudojant svertą useReducer Kablys, galite konsoliduoti ir būseną, ir jos perėjimus vienoje reduktoriaus funkcijoje.

Ši funkcija naudoja dabartinę būseną ir veiksmą kaip įvestį, vėliau sukuria naują būseną. Jis veikia pagal tuos pačius principus, kaip ir reduktoriaus funkcija, naudojama JavaScript

Masyvas.prototype.reduce() metodas.

Sintaksė ir „useReducer Hook“ naudojimo pavyzdys

Sintaksė, skirta naudoti useReducer Kabliukas yra toks:

konst [būsena, išsiuntimas] = useReducer (reduktorius, pradinė būsena);

The useReducer funkcija priima du argumentus:

• reduktorius (funkcija): nustato, kaip būsena turi būti atnaujinta, atsižvelgiant į dabartinę būseną ir išsiųstą veiksmą.
• pradinė būsena (bet kuri): nurodo pradinę komponento būsenos reikšmę.

Gavus iškvietimą, useReducer Hook grąžina masyvą, sudarytą iš dviejų elementų:

• būsena (bet kuri): Žymi dabartinės būsenos reikšmę.
• išsiuntimas (funkcija): Ši funkcija leidžia siųsti veiksmus, kad būtų atnaujinta būsena.

Apsvarstykite toliau pateiktą pavyzdį, iliustruojantį naudojimą useReducer Kabliukas valdant paprastą skaitiklį:

importuoti Reaguokite, { useReducer } iš'reaguoti';
konst pradinė būsena = 0;
konst reduktorius = (būsena, veiksmas) => {
jungiklis (action.type) {
atveju"padidėjimas":
grąžinti būsena + 1;
atveju'sumažinti':
grąžinti valstybė - 1;
numatytas:
grąžinti valstybė;
 }
};
konst Skaitiklis = () => {
konst [count, dispatch] = useReducer (reduktorius, pradinė būsena);
konst rankenaPriaugimas = () => {
 išsiuntimas({ tipo: "padidėjimas" });
 };
konst rankenaDecrement = () => {
 išsiuntimas({ tipo: 'sumažinti' });
 };
grąžinti (



Prieaugis </button>
{count}</span>
Sumažinti </button>
 </div>
 );
};

Iš aukščiau pateiktos iliustracijos pradinė būsena 0 yra apibrėžta kartu su reduktoriaus funkcija, atsakinga už dviejų tipų veiksmus: prieaugis ir mažėjimas. Reduktoriaus funkcija tinkamai modifikuoja būseną pagal nurodytus veiksmus.

Naudojant svertą useReducer Kabliukas, būsena inicijuojama ir įgyjama tiek esamos būsenos reikšmė, tiek išsiuntimo funkcija. Vėliau išsiuntimo funkcija naudojama būsenos atnaujinimams paspaudus atitinkamus mygtukus.

Reduktoriaus funkcijos konstravimas

Norint optimaliai išnaudoti useReducer Kablys, galite sukurti reduktoriaus funkciją, kuri aprašo, kaip būsena turi būti atnaujinta pagal išsiųstus veiksmus. Ši reduktoriaus funkcija priima dabartinę būseną ir veiksmą kaip argumentus ir grąžina naują būseną.

Paprastai reduktoriaus funkcija naudoja jungiklio sąlyginį sakinį valdyti įvairius veiksmų tipus ir atitinkamai atlikti būsenos modifikacijas.

Apsvarstykite toliau pateiktą reduktoriaus funkcijos, naudojamos darbų sąrašui tvarkyti, pavyzdį:

konst pradinė būsena = [];
konst reduktorius = (būsena, veiksmas) => {
jungiklis (action.type) {
atveju'papildyti':
grąžinti [...būsena, veiksmas.naudinga apkrova];
atveju'perjungti':
grąžinti state.map((daryti) =>
 todo.id action.payload? { ...daryti, baigtas: !todo.completed }: todo
 );
atveju'Ištrinti':
grąžinti state.filter((daryti) => todo.id !== action.payload);
numatytas:
grąžinti valstybė;
 }
};

Pirmiau nurodytu atveju reduktoriaus funkcija tvarko tris skirtingus veiksmų tipus: papildyti, perjungti, ir Ištrinti. Gavęs papildyti veiksmą, jis prideda naudingą apkrovą (naują užduoties elementą) prie valstybė masyvas.

Tuo atveju, kai perjungti veiksmas, jis pakeičia baigtas su nurodytu ID susieto todo elemento ypatybė. The Ištrinti Kita vertus, veiksmas pašalina todo elementą, susietą su pateiktu ID iš būsenos masyvo.

Jei nė vienas iš veiksmų tipų neatitinka, reduktoriaus funkcija grąžina esamą būseną nepakeistą.

Siuntimo veiksmai

Norėdami atlikti būsenos atnaujinimus, kuriuos palengvino useReducer Kablys, veiksmų išsiuntimas tampa nepakeičiamas. Veiksmai yra paprasti JavaScript objektai, kurie paaiškina norimą būsenos modifikavimo tipą.

Atsakomybė už šių veiksmų valdymą ir vėlesnės būsenos sukūrimą tenka reduktoriaus funkcijai.

Siuntimo funkcija, kurią teikia useReducer Kablys, naudojamas veiksmams siųsti. Jis priima veiksmo objektą kaip argumentą ir taip skatina atitinkamą būsenos atnaujinimą.

Ankstesniuose pavyzdžiuose veiksmai buvo išsiųsti naudojant sintaksę išsiuntimas ({type: 'actionType'}). Tačiau galima įsivaizduoti, kad veiksmai apimtų papildomus duomenis, žinomus kaip naudingoji apkrova, kuri suteikia papildomų įžvalgų, susijusių su atnaujinimu. Pavyzdžiui:

išsiuntimas({ tipo: 'papildyti', naudingoji apkrova: { id: 1, tekstą: „Baigti namų darbus“, baigtas: klaidinga } });

Pagal šį scenarijų papildyti veiksmas apima naudingos apkrovos objektą, apimantį duomenis apie naują darbo elementą, kuris turi būti įtrauktas į būseną.

Sudėtingos būsenos valdymas naudojant „useReducer“.

Tikroji stiprybė useReducer Kablys slypi gebėjime valdyti sudėtingas būsenos struktūras, apimančias daugybę tarpusavyje susijusių vertybių ir sudėtingų būsenų perėjimų.

Centralizavus valstybės logiką reduktoriaus funkcijoje, įvairių veiksmų tipų valdymas ir sistemingas būsenos atnaujinimas tampa įgyvendinama veikla.

Apsvarstykite scenarijų, kai a React forma susideda iš kelių įvesties laukų. Užuot valdę kiekvienos įvesties būseną atskirai useState, useReducer Kabliukas gali būti naudojamas holistiniam formos būsenos valdymui.

Reduktoriaus funkcija gali tinkamai atlikti veiksmus, susijusius su konkrečių laukų modifikavimu ir visapusišku visos formos patvirtinimu.

konst pradinė būsena = {
 vardas: '',
 paštas: '',
 Slaptažodis: '',
 isFormValid: klaidinga,
};
konst reduktorius = (būsena, veiksmas) => {
jungiklis (action.type) {
atveju'updateField':
grąžinti { ...būsena, [veiksmo.pakrovos.laukas]: action.payload.value };
atveju'validateForm':
grąžinti { ...valstybė, isFormValid: action.payload };
numatytas:
grąžinti valstybė;
 }
};

Pavyzdyje reduktoriaus funkcija atlieka du skirtingus veiksmų tipus: atnaujinimo laukas ir patvirtintiForm. The atnaujinimo laukas veiksmas palengvina konkretaus lauko modifikavimą valstybėje, panaudojant pateiktą vertę.

Ir atvirkščiai, patvirtintiForm veiksmas atnaujina isFormValid nuosavybė pagal pateiktą patvirtinimo rezultatą.

Įdarbindami useReducer Kabliukas, skirtas formos būsenai valdyti, visos susijusios būsenos ir veiksmai yra sujungti viename objekte, todėl lengviau suprasti ir prižiūrėti.

Reducer naudojimo palyginimas su kitais valstybės valdymo sprendimais

nors useReducer Hook yra galingas valstybės valdymo įrankis, todėl labai svarbu pripažinti jos skirtumus ir kompromisus, palyginti su alternatyviais valstybės valdymo sprendimais React ekosistemoje.

useState

The useState Kabliuko pakanka paprastoms, izoliuotoms būsenoms komponente valdyti. Jo sintaksė yra glaustesnė ir paprastesnė, palyginti su useReducer. Nepaisant to, sudėtingoms būsenoms ar būsenų perėjimams, useReducer suteikia labiau organizuotą požiūrį.

Redux

Redux atstovauja svarbiai valstybės valdymo bibliotekai „React“ programoms. Jis laikosi panašaus reduktoriaus modelio kaip useReducer, tačiau suteikia papildomų funkcijų, tokių kaip centralizuota parduotuvė, tarpinės programinės įrangos palaikymas ir kelionės laiku derinimas.

Redux puikiai tinka didelio masto programoms, kurioms reikalingi sudėtingi būsenos valdymo reikalavimai. Tačiau mažesniems projektams ar paprastesniems valstybės valdymo poreikiams, useReducer gali būti lengva ir paprastesnė alternatyva.

Kontekstinė API

„React“ konteksto API leidžia bendrinti būseną keliuose komponentuose, nenaudojant atraminio gręžimo. Kartu su useReducer, tai gali duoti centralizuoto valstybės valdymo sprendimą.

Nors Context API derinys ir useReducer gali pasigirti didele galia, tai gali sukelti papildomo sudėtingumo, kai kartu su useReducer naudojamas atskirai.

Konteksto API geriausia naudoti, kai reikia bendrinti būseną tarp giliai įdėtų komponentų arba kai susiduriama su sudėtinga komponentų hierarchija. Tinkamo valstybės valdymo sprendimo pasirinkimas priklauso nuo konkrečios programos reikalavimų.

Vidutinio dydžio projektams, useReducer gali pasirodyti efektyvi ir paprastesnė „Redux“ arba „Context API“ alternatyva.

Valstybės valdymo paprastumo išlaisvinimas

„useReducer Hook“ yra galinga priemonė, padedanti supaprastinti būsenos valdymą „React“ programose. Laikantis reduktoriaus modelio principų, jis siūlo struktūrizuotą ir keičiamą požiūrį į sudėtingų būsenų ir būsenų perėjimus.

Kai naudojamas kartu su useState Hook, useReducer gali būti lengva alternatyva bibliotekos, pvz., „Redux“ arba „Context API“, ypač mažesnės ir vidutinio dydžio projektus.