UseReducer Hook je jednou z nejlepších možností pro správu stavu v Reactu. Nastartujte svou cestu s useReducer Hook pomocí tohoto průvodce.

Správa stavu je při vývoji Reactu zásadní a slouží jako základní kámen pro manipulaci a aktualizaci dat v uživatelských rozhraních. Reagovat's useState Hook poskytuje přímý přístup ke správě stavu, ale se složitým stavem se stává těžkopádným. To je místo useReducer Hook přichází.

The useReducer Hook nabízí strukturovanou metodologii pro správu složitých stavů a ​​přechodů. Objímání useReducer Hook odemyká flexibilitu a efektivitu, což vede k čistšímu kódu.

Pochopení funkce useReducer Hook

The useReducer Hook je vestavěná funkce poskytovaná Reactem, která zjednodušuje správu stavu dodržováním principů vzoru redukce. Nabízí vám organizovanou a škálovatelnou alternativu k useState Hák, zvláště vhodný pro manipulaci se složitými stavy.

Využitím useReducer Hooku, můžete konsolidovat jak stav, tak jeho přechody v rámci jediné redukční funkce.

Tato funkce přijímá aktuální stav a akci jako vstupy a následně vytváří nový stav. Funguje na stejných principech jako funkce redukce používaná v JavaScriptu

Array.prototype.reduce() metoda.

Syntaxe a příklad Použití useReducer Hook

Syntaxe pro použití useReducer Háček je následující:

konst [stav, odeslání] = useReducer (reduktor, initialState);

The useReducer funkce přijímá dva argumenty:

  • reduktor (funkce): Určuje způsob, jakým by se měl stav aktualizovat na základě aktuálního stavu a odeslané akce.
  • počáteční stav (jakýkoli): Představuje hodnotu počátečního stavu komponenty.

Při vyvolání se useReducer Hook vrací pole sestávající ze dvou prvků:

  • stát (jakýkoli): Označuje hodnotu aktuálního stavu.
  • odeslání (funkce): Tato funkce umožňuje odeslání akcí k aktualizaci stavu.

Zvažte níže uvedený příklad ilustrující použití useReducer Háček ve správě jednoduchého počítadla:

import Reagovat, { useReducer } z'reagovat';
konst initialState = 0;
konst reduktor = (stav, akce) => {
přepínač (action.type) {
pouzdro'přírůstek':
vrátit se stát + 1;
pouzdro'dekrementovat':
vrátit se Stát - 1;
výchozí:
vrátit se Stát;
 }
};


konst Počítadlo = () => {
konst [počet, odeslání] = useReducer (reduktor, initialState);
konst handleIncrement = () => {
 odeslání({ typ: 'přírůstek' });
 };


konst handleDecrement = () => {
 odeslání({ typ: 'dekrementovat' });
 };


vrátit se (






};

Z výše uvedeného obrázku je počáteční stav 0 je definována spolu s funkcí reduktoru zodpovědnou za zpracování dvou typů akcí: přírůstek a dekrementovat. Redukční funkce náležitě upravuje stav v souladu se zadanými akcemi.

Využitím useReducer Hook, stav se inicializuje a získá se jak hodnota aktuálního stavu, tak funkce odeslání. Funkce odeslání je následně využita ke spuštění aktualizace stavu po kliknutí na příslušná tlačítka.

Konstrukce funkce reduktoru

Pro optimální využití useReducer Hooku, můžete vytvořit funkci redukce, která popisuje, jak by se měl stav aktualizovat na základě odeslaných akcí. Tato redukční funkce přijímá aktuální stav a akci jako argumenty a vrací nový stav.

Obvykle funkce redukce používá podmíněný příkaz switch zpracovávat různé typy akcí a podle toho provádět změny stavu.

Zvažte níže uvedený příklad funkce redukce používané pro správu seznamu úkolů:

konst initialState = [];
konst reduktor = (stav, akce) => {
přepínač (action.type) {
pouzdro'přidat':
vrátit se [...state, action.payload];
pouzdro'přepnout':
vrátit se state.map((dělat) =>
 todo.id action.payload? { ...dělat, dokončeno: !todo.completed }: todo
 );
pouzdro'vymazat':
vrátit se state.filter((dělat) => todo.id !== action.payload);
výchozí:
vrátit se Stát;
 }
};

Ve výše uvedeném případě funkce redukce zpracovává tři různé typy akcí: přidat, přepnout, a vymazat. Po obdržení přidat akce, připojí užitečné zatížení (nová položka úkolu) k Stát pole.

V případě přepnout akce, střídá se dokončeno vlastnost položky úkolu spojené se zadaným ID. The vymazat action na druhé straně eliminuje položku úkolu propojenou s poskytnutým ID z pole stavu.

Pokud žádný z typů akcí neodpovídá, funkce redukce vrátí aktuální stav beze změny.

Dispečerské akce

Chcete-li provést aktualizace stavu usnadněné pomocí useReducer Hooku, odesílání akcí se stává nepostradatelným. Akce představují prosté objekty JavaScriptu, které objasňují požadovaný typ modifikace stavu.

Odpovědnost za zpracování těchto akcí a generování následného stavu spočívá na funkci reduktoru.

Expediční funkce, zařízená firmou useReducer Hook, je zaměstnán k odesílání akcí. Přijímá akční objekt jako argument, čímž podněcuje aktualizaci příslušného stavu.

V předchozích příkladech byly akce odesílány pomocí syntaxe odeslání ({type: 'actionType'}). Je však možné, aby akce zahrnovaly doplňková data, známá jako užitečné zatížení, který poskytuje další informace týkající se aktualizace. Například:

odeslání({ typ: 'přidat', užitečné zatížení: { id: 1, text: 'Dokončit domácí úkol', dokončeno: Nepravdivé } });

V tomto scénáři, přidat akce zahrnuje objekt užitečného zatížení zapouzdřující podrobnosti o novém úkolu, který má být začleněn do stavu.

Správa komplexního stavu pomocí useReducer

Skutečná síla useReducer Hook spočívá v jeho schopnosti řídit složité stavové struktury, zahrnující četné vzájemně propojené hodnoty a složité stavové přechody.

Centralizací logiky stavu v rámci funkce redukce se řízení různých typů akcí a systematická aktualizace stavu stává proveditelným úsilím.

Zvažte scénář, kde a Formulář reakce se skládá z více vstupních polí. Spíše než řídit stav každého vstupu jednotlivě useState, useReducer Hook lze použít k celkové správě stavu formuláře.

Funkce redukce dokáže obratně zvládnout akce související s úpravou konkrétních polí a komplexní validaci celého formuláře.

konst initialState = {
 název: '',
 e-mailem: '',
 Heslo: '',
 isFormValid: Nepravdivé,
};
konst reduktor = (stav, akce) => {
přepínač (action.type) {
pouzdro'updateField':
vrátit se { ...state, [action.payload.field]: action.payload.value };
pouzdro'validateForm':
vrátit se { ...Stát, isFormValid: action.payload };
výchozí:
vrátit se Stát;
 }
};

V tomto příkladu funkce redukce zajišťuje dva různé typy akcí: aktualizovat pole a validateForm. The aktualizovat pole akce usnadňuje úpravu konkrétního pole v rámci státu využitím poskytnuté hodnoty.

Naopak, validateForm akce aktualizuje isFormValid vlastnost na základě poskytnutého výsledku ověření.

Zaměstnáním useReducer Hook pro správu stavu formuláře, všechny související stavy a akce jsou konsolidovány v rámci jediné entity, což usnadňuje pochopení a údržbu.

Porovnání useReducer s jinými řešeními správy stavu

Ačkoliv useReducer Hook je účinným nástrojem pro státní správu, je nezbytné uznat jeho odlišnosti a kompromisy ve srovnání s alternativními řešeními státní správy v rámci ekosystému React.

useState

The useState Hook postačuje pro správu jednoduchých izolovaných stavů v rámci komponenty. Jeho syntaxe je ve srovnání s stručnější a přímočařejší useReducer. Nicméně pro složité stavy nebo stavové přechody, useReducer umožňuje organizovanější přístup.

Redux

Redux představuje významnou knihovnu státní správy pro aplikace React. Drží se podobného vzoru redukce jako useReducer, přesto poskytuje další funkce, jako je centralizovaný obchod, podpora middlewaru a ladění v čase.

Redux se ukazuje jako ideální pro rozsáhlé aplikace vyžadující komplexní požadavky na správu stavu. U menších projektů nebo jednodušších potřeb státní správy však useReducer může sloužit jako lehká a jednodušší alternativa.

Kontextové API

Kontextové API Reactu umožňuje sdílení stavu napříč více součástmi bez nutnosti vrtání podpěr. Ve spojení s useReducermůže přinést řešení centralizovaného řízení státu.

Zatímco kombinace kontextového API a useReducer se může pochlubit značnou silou, může představovat další složitost, pokud je postavena vedle sebe s využitím useReducer v izolaci.

Kontextové API je nejlepší použít, když je potřeba sdílet stav uprostřed hluboce vnořených komponent nebo když je konfrontován se složitou hierarchií komponent. Výběr vhodného řešení řízení stavu závisí na konkrétních požadavcích dané aplikace.

Pro projekty střední velikosti, useReducer se může ukázat jako efektivní a jednodušší alternativa k Redux nebo kontextovému API.

Uvolnění jednoduchosti řízení státu

UseReducer Hook představuje účinný nástroj pro zjednodušení správy stavu v aplikacích React. Dodržováním principů vzoru reduktoru nabízí strukturovaný a škálovatelný přístup ke zpracování složitých stavových a stavových přechodů.

Při použití v tandemu s useState Hook může useReducer sloužit jako lehká alternativa knihovny jako Redux nebo Context API, zejména v kontextu menších až středně velkých projekty.