A useReducer Hook: Az állapotkezelés egyszerűsítése a Reactban

Az állapotkezelés kulcsfontosságú a React fejlesztésében, sarokköveként szolgál a felhasználói felületeken lévő adatok kezeléséhez és frissítéséhez. Reagálj useState A Hook egyszerű megközelítést kínál az állapotkezeléshez, de bonyolult állapotok esetén ez nehézkessé válik. Ott van a useReducer Bejön Hook.

A useReducer A Hook strukturált módszertant kínál az összetett állapotok és átmenetek kezelésére. Ölelve a useReducer A Hook feloldja a rugalmasságot és a hatékonyságot, ami tisztább kódhoz vezet.

A reducer Hook használatának megértése

A useReducer A Hook a React által biztosított beépített szolgáltatás, amely a redukciós minta elveinek betartásával egyszerűsíti az állapotkezelést. Szervezett és méretezhető alternatívát kínál a useState Horog, különösen alkalmas összetett állapotok kezelésére.

Kihasználva a useReducer Hook, egyetlen redukciós funkción belül konszolidálhatja az állapotot és az átmeneteit is.

Ez a funkció az aktuális állapotot és egy műveletet veszi be bemenetként, majd létrehozza az új állapotot. Ugyanazon elven működik, mint a JavaScriptben alkalmazott redukciós funkció Array.prototype.reduce() módszer.

Szintaxis és példa a useReducer Hook használatára

A szintaxis a használatához useReducer A horog a következő:

const [állapot, feladás] = useReducer (reduktor, kezdeti állapot);

A useReducer függvény két argumentumot fogad el:

• szűkítő (funkció): Meghatározza az állapot frissítésének módját az aktuális állapot és az elküldött művelet alapján.
• kezdeti állapot (bármilyen): Az összetevő kezdeti állapotértékét jelöli.

Felhívásra a useReducer A Hook egy két elemből álló tömböt ad vissza:

• állapot (bármilyen): Az aktuális állapot értékét jelöli.
• kiszállítás (funkció): Ez a funkció lehetővé teszi az állapotfrissítéshez szükséges műveletek küldését.

Tekintsük az alábbi példát, amely bemutatja a useReducer Kapcsolódás egy egyszerű számláló kezeléséhez:

import Reagálj, { useReducer } tól től'reagál';
const kezdeti állapot = 0;
const szűkítő = (állapot, cselekvés) => {
kapcsoló (akció.típus) {
ügy'növekedés':
Visszatérés állapot + 1;
ügy'csökkentés':
Visszatérés állapot - 1;
alapértelmezett:
Visszatérés állapot;
 }
};
const Számláló = () => {
const [count, dispatch] = useReducer (reduktor, kezdeti állapot);
const handIncrement = () => {
 Elküldés({ típus: 'növekedés' });
 };
const handleDecrement = () => {
 Elküldés({ típus: 'csökkentés' });
 };
Visszatérés (



Növekedés</button>
{count}</span>
Csökkenés</button>
 </div>
 );
};

A fenti illusztrációból a kezdeti állapot 0 kétféle művelet kezeléséért felelős reduktor funkció mellett van meghatározva: növekedés és csökkenése. A reduktor funkció megfelelően módosítja az állapotot a megadott műveleteknek megfelelően.

Kihasználva a useReducer Hook, az állapot inicializálása megtörténik, és mind az aktuális állapotérték, mind a küldési függvény lekérésre kerül. A diszpécser funkciót ezt követően az állapotfrissítések indítására használják a megfelelő gombokra kattintva.

Szűkítő függvény felépítése

Az optimális kihasználás érdekében a useReducer Hook, létrehozhat egy redukáló függvényt, amely leírja, hogyan kell frissíteni az állapotot a kiküldött műveletek alapján. Ez a redukáló függvény elfogadja az aktuális állapotot és a műveletet argumentumként, és visszaadja az új állapotot.

Jellemzően reduktor funkció switch feltételes utasítást alkalmaz különböző akciótípusok kezelésére és ennek megfelelően állapotmódosítások végrehajtására.

Tekintsük az alábbi példát a teendőlista kezeléséhez használt redukciós funkcióra:

const kezdetiState = [];
const szűkítő = (állapot, cselekvés) => {
kapcsoló (akció.típus) {
ügy'hozzáadás':
Visszatérés [...állapot, akció.payload];
ügy'váltó':
Visszatérés state.map((csinálni) =>
 todo.id action.payload? { ...csinálni, elkészült: !todo.completed }: todo
 );
ügy'töröl':
Visszatérés state.filter((csinálni) => todo.id !== action.payload);
alapértelmezett:
Visszatérés állapot;
 }
};

A fenti esetben a reduktor funkció három különböző művelettípust kezel: add hozzá, kapcsolót, és töröl. Miután megkapta a add hozzá műveletet, hozzáfűzi a hasznos terhet (egy új teendőt) a állapot sor.

Abban az esetben, ha a kapcsolót akció, váltogatja a elkészült a megadott azonosítóhoz társított teendő elem tulajdonsága. A töröl művelet viszont kiküszöböli a megadott azonosítóhoz kapcsolt teendőelemet az állapottömbből.

Ha egyik művelettípus sem felel meg, a reduktor függvény változatlanul visszaadja az aktuális állapotot.

Feladási műveletek

Az állapotfrissítések végrehajtásához, amelyet a useReducer Hook, az akciók felosztása nélkülözhetetlenné válik. A műveletek egyszerű JavaScript objektumokat képviselnek, amelyek megvilágítják a kívánt típusú állapotmódosítást.

Ezen műveletek kezelésének és a későbbi állapot generálásának felelőssége a reduktor funkcióé.

A feladási funkciót a useReducer Hook, akciók küldésére szolgál. Elfogad egy cselekvési objektumot argumentumként, és ezzel elindítja a vonatkozó állapotfrissítést.

Az előző példákban a műveletek a szintaxis használatával lettek elküldve dispatch({type: 'actionType'}). Elképzelhető azonban, hogy a cselekvések kiegészítő adatokat is magukban foglalnak, az úgynevezett hasznos teher, amely további betekintést nyújt a frissítéshez. Például:

Elküldés({ típus: 'hozzáadás', hasznos teher: { id: 1, szöveg: 'Befejezni a házi feladatot', elkészült: hamis } });

Ebben a forgatókönyvben a add hozzá a művelet tartalmaz egy hasznos objektumot, amely az állapotba beépítendő új teendő elem adatait tartalmazza.

Összetett állapot kezelése useReducer segítségével

Az igazi ereje a useReducer A Hook abban rejlik, hogy képes kezelni a bonyolult állapotstruktúrákat, amelyek számos egymással összefüggő értéket és bonyolult állapotátmeneteket foglalnak magukban.

Az állapotlogika redukciós funkción belüli központosításával megvalósítható törekvéssé válik a különféle akciótípusok kezelése, az állapot szisztematikus aktualizálása.

Vegyünk egy forgatókönyvet, ahol a react form több beviteli mezőből áll. Ahelyett, hogy az egyes bemenetek állapotát külön-külön kezelné useState, a useReducer A Hook használható az űrlap állapotának holisztikus kezelésére.

A reduktor funkció megfelelően tudja kezelni az egyes mezők módosításával és a teljes űrlap átfogó érvényesítésével kapcsolatos műveleteket.

const kezdeti állapot = {
 név: '',
 email: '',
 Jelszó: '',
 isFormValid: hamis,
};
const szűkítő = (állapot, cselekvés) => {
kapcsoló (akció.típus) {
ügy'updateField':
Visszatérés { ...state, [action.payload.field]: action.payload.value };
ügy'validateForm':
Visszatérés { ...állapot, isFormValid: action.payload };
alapértelmezett:
Visszatérés állapot;
 }
};

A példában a reduktor funkció két különböző művelettípusra vonatkozik: updateField és validateForm. A updateField Az akció lehetővé teszi egy adott mező módosítását az állapoton belül a megadott érték felhasználásával.

Ezzel szemben a validateForm akció frissíti a isFormValid tulajdonság a megadott érvényesítési eredmény alapján.

Alkalmazásával a useReducer Hook az űrlap állapotának kezeléséhez, az összes társított állapot és művelet egyetlen entitáson belül van konszolidálva, így javítva a könnyebb megértést és karbantartást.

A useReducer összehasonlítása más államkezelési megoldásokkal

Habár a useReducer A Hook az államigazgatás hatékony eszköze, ezért létfontosságú, hogy elismerjük a különbözőségeket és kompromisszumokat a React ökoszisztémán belüli alternatív államirányítási megoldásokhoz képest.

useState

A useState A hook elegendő az összetevőn belüli egyszerű, elszigetelt állapotok kezelésére. A szintaxisa tömörebb és egyszerűbb, mint a useReducer. Mindazonáltal bonyolult állapotok vagy állapotátmenetek esetén useReducer szervezettebb megközelítést tesz lehetővé.

Redux

A Redux egy kiemelkedő államigazgatási könyvtár React alkalmazásokhoz. Hasonló szűkítő mintához tapad, mint useReducer, mégis olyan további funkciókat kínál, mint például a központosított áruház, a köztes szoftver támogatása és az időutazásos hibakeresés.

A Redux ideálisnak bizonyult a komplex állapotkezelési követelményeket igénylő nagyméretű alkalmazásokhoz. Kisebb projektek vagy egyszerűbb állami irányítási igények esetén azonban useReducer könnyű és egyszerűbb alternatívaként szolgálhat.

Context API

A React Context API lehetővé teszi az állapot megosztását több komponensen keresztül támasztékfúrás nélkül. Összefüggésben a useReducer, ez egy központosított államirányítási megoldást eredményezhet.

Míg a Context API és a kombináció useReducer jelentős erővel büszkélkedhet, további bonyolultságot okozhat, ha a useReducer elszigetelt használatával párhuzamba állítják.

A Context API akkor használható a legjobban, ha mélyen beágyazott összetevők között kell megosztani az állapotot, vagy ha összetett összetevő-hierarchiával kell szembenéznie. A megfelelő állapotkezelési megoldás kiválasztása az adott alkalmazás speciális követelményeitől függ.

Mérsékelt méretű projektek esetén useReducer a Redux vagy a Context API hatékony és egyszerűbb alternatívájának bizonyulhat.

Az államigazgatás egyszerűségének felszabadítása

A useReducer Hook hatékony eszköz az állapotkezelés egyszerűsítésére a React alkalmazásokon belül. A reduktorminta elveinek betartásával strukturált és skálázható megközelítést kínál az összetett állapot- és állapotátmenetek kezelésére.

Ha a useState Hook-kal együtt alkalmazzuk, a useReducer könnyű alternatívaként szolgálhat könyvtárak, mint a Redux vagy a Context API, különösen a kisebb és közepes méretű könyvtárak esetében projektek.