Der useReducer-Hook: Vereinfachte Zustandsverwaltung in React

Die Zustandsverwaltung ist bei der React-Entwicklung von entscheidender Bedeutung und dient als Eckpfeiler für die Verarbeitung und Aktualisierung von Daten in Benutzeroberflächen. Reagieren useState Hook bietet einen unkomplizierten Ansatz zur Zustandsverwaltung, wird jedoch bei komplexen Zuständen umständlich. Da ist das useReducer Hook kommt herein.

Der useReducer Hook bietet eine strukturierte Methodik zur Verwaltung komplexer Zustände und Übergänge. Umarmen useReducer Hook ermöglicht Flexibilität und Effizienz und führt zu saubererem Code.

Den useReducer-Hook verstehen

Der useReducer Hook ist eine integrierte Funktion von React, die die Zustandsverwaltung durch Einhaltung der Prinzipien des Reducer-Musters rationalisiert. Es bietet Ihnen eine organisierte und skalierbare Alternative zum useState Hook, besonders geeignet für die Handhabung komplexer Zustände.

Durch die Nutzung der useReducer Hook können Sie sowohl den Zustand als auch seine Übergänge in einer einzigen Reduzierfunktion konsolidieren.

Diese Funktion verwendet den aktuellen Status und eine Aktion als Eingaben und erzeugt anschließend den neuen Status. Es funktioniert nach den gleichen Prinzipien wie die in JavaScript verwendete Reduzierfunktion Array.prototype.reduce() Methode.

Syntax und Beispielverwendung des useReducer-Hooks

Die Syntax für die Verwendung von useReducer Der Haken ist wie folgt:

const [State, Dispatch] = useReducer (Reducer, InitialState);

Der useReducer Die Funktion akzeptiert zwei Argumente:

• Reduzierer (Funktion): Bestimmt die Art und Weise, wie der Status basierend auf dem aktuellen Status und der ausgelösten Aktion aktualisiert werden soll.
• initialState (beliebig): Stellt den Anfangszustandswert für die Komponente dar.

Beim Aufruf wird die useReducer Hook gibt ein Array zurück, das aus zwei Elementen besteht:

• Staat (beliebig): Bezeichnet den aktuellen Statuswert.
• Versand (Funktion): Diese Funktion ermöglicht das Auslösen von Aktionen zur Statusaktualisierung.

Betrachten Sie das folgende Beispiel, das die Verwendung von veranschaulicht useReducer Haken Sie bei der Verwaltung eines einfachen Zählers ein:

importieren Reagieren, { useReducer } aus'reagieren';
const initialState = 0;
const Reduzierer = (Zustand, Aktion) => {
schalten (action.type) {
Fall'Zuwachs':
zurückkehren Zustand + 1;
Fall'dekrementieren':
zurückkehren Zustand - 1;
Standard:
zurückkehren Zustand;
 }
};
const Zähler = () => {
const [Count, Dispatch] = useReducer (Reducer, InitialState);
const handleInkrement = () => {
 versenden({ Typ: 'Zuwachs' });
 };
const handleDecrement = () => {
 versenden({ Typ: 'dekrementieren' });
 };
zurückkehren (



Inkrementieren</button>
{Anzahl}/span>
Dekrementieren</button>
 </div>
 );
};

Aus der obigen Abbildung geht hervor, dass ein Anfangszustand vorliegt 0 wird zusammen mit einer Reduzierfunktion definiert, die für die Verarbeitung von zwei Arten von Aktionen verantwortlich ist: Zuwachs Und dekrementieren. Die Reduzierfunktion ändert den Zustand entsprechend den angegebenen Aktionen.

Durch die Nutzung der useReducer Hook, der Status wird initialisiert und sowohl der aktuelle Statuswert als auch die Dispatch-Funktion werden erfasst. Die Versandfunktion wird anschließend verwendet, um Statusaktualisierungen auszulösen, wenn auf die entsprechenden Schaltflächen geklickt wird.

Konstruieren einer Reduzierfunktion

Für eine optimale Ausnutzung der useReducer Hook: Sie können eine Reduzierungsfunktion erstellen, die beschreibt, wie der Status basierend auf den gesendeten Aktionen aktualisiert werden soll. Diese Reduzierfunktion akzeptiert den aktuellen Status und die Aktion als Argumente und gibt den neuen Status zurück.

Typischerweise eine Reduzierfunktion verwendet eine switch-bedingte Anweisung um verschiedene Aktionstypen zu handhaben und entsprechende Zustandsänderungen durchzuführen.

Betrachten Sie das folgende Beispiel einer Reduzierfunktion, die zum Verwalten einer Aufgabenliste verwendet wird:

const initialState = [];
const Reduzierer = (Zustand, Aktion) => {
schalten (action.type) {
Fall'hinzufügen':
zurückkehren [...state, action.payload];
Fall'Umschalten':
zurückkehren state.map((machen) =>
 todo.id action.payload? { ...machen, vollendet: !todo.completed }: todo
 );
Fall'löschen':
zurückkehren state.filter((machen) => todo.id !== action.payload);
Standard:
zurückkehren Zustand;
 }
};

Im obigen Beispiel verarbeitet die Reduzierfunktion drei verschiedene Aktionstypen: hinzufügen, Umschalten, Und löschen. Nach Erhalt der hinzufügen Bei dieser Aktion wird die Nutzlast (ein neues Aufgabenelement) an die angehängt Zustand Array.

Im Fall der Umschalten Aktion, es wechselt die vollendet Eigenschaft des Aufgabenelements, das der angegebenen ID zugeordnet ist. Der löschen Die Aktion hingegen entfernt das mit der angegebenen ID verknüpfte Aufgabenelement aus dem Statusarray.

Sollte keiner der Aktionstypen übereinstimmen, gibt die Reduzierfunktion den aktuellen Zustand unverändert zurück.

Dispatching-Aktionen

Um Zustandsaktualisierungen durchzuführen, die durch die erleichtert werden useReducer Hook, das Disponieren von Aktionen wird unverzichtbar. Aktionen stellen einfache JavaScript-Objekte dar, die die gewünschte Art der Zustandsänderung verdeutlichen.

Die Verantwortung für die Bearbeitung dieser Aktionen und die Generierung des Folgezustands liegt bei der Reduzierfunktion.

Die Versandfunktion, bereitgestellt von der useReducer Hook wird zum Versenden von Aktionen verwendet. Es akzeptiert ein Aktionsobjekt als Argument und leitet dadurch die entsprechende Statusaktualisierung ein.

In den vorherigen Beispielen wurden Aktionen mithilfe der Syntax ausgelöst Versand({Typ: 'actionType'}). Es ist jedoch denkbar, dass Maßnahmen ergänzende Daten umfassen, die sogenannten Nutzlast, das weitere Erkenntnisse zum Update liefert. Zum Beispiel:

versenden({ Typ: 'hinzufügen', Nutzlast: { Ausweis: 1, Text: 'Hausaufgaben erledigen', vollendet: FALSCH } });

In diesem Szenario ist die hinzufügen Die Aktion enthält ein Nutzlastobjekt, das die Einzelheiten des neuen Aufgabenelements kapselt, das in den Status aufgenommen werden soll.

Komplexen Zustand mit useReducer verwalten

Die wahre Stärke des useReducer Hook liegt in seiner Fähigkeit, komplizierte Staatsstrukturen zu verwalten, die zahlreiche miteinander verbundene Werte und komplizierte Staatsübergänge umfassen.

Durch die Zentralisierung der Zustandslogik innerhalb einer Reduktionsfunktion wird die Verwaltung verschiedener Aktionstypen und die systematische Aktualisierung des Zustands zu einem machbaren Unterfangen.

Stellen Sie sich ein Szenario vor, in dem a Das Reaktionsformular besteht aus mehreren Eingabefeldern. Anstatt den Status jedes Einganges einzeln zu verwalten useState, Die useReducer Hook kann zur ganzheitlichen Verwaltung des Formularstatus eingesetzt werden.

Die Reduzierfunktion kann Aktionen, die für die Änderung bestimmter Felder und die umfassende Validierung des gesamten Formulars relevant sind, geschickt verarbeiten.

const initialState = {
 Name: '',
 Email: '',
 Passwort: '',
 isFormValid: FALSCH,
};
const Reduzierer = (Zustand, Aktion) => {
schalten (action.type) {
Fall'updateField':
zurückkehren { ...state, [action.payload.field]: action.payload.value };
Fall'validateForm':
zurückkehren { ...Zustand, isFormValid: action.payload };
Standard:
zurückkehren Zustand;
 }
};

Im Beispiel bedient die Reduzierfunktion zwei unterschiedliche Aktionstypen: updateField Und validierenForm. Der updateField Die Aktion erleichtert die Änderung eines bestimmten Felds innerhalb des Status durch Verwendung des bereitgestellten Werts.

Umgekehrt ist die validierenForm Aktion aktualisiert die isFormValid Eigenschaft basierend auf dem bereitgestellten Validierungsergebnis.

Durch den Einsatz der useReducer Mit einem Hook zur Verwaltung des Formularstatus werden alle zugehörigen Status und Aktionen in einer einzigen Einheit zusammengefasst, wodurch die Verständlichkeit und Wartung erleichtert wird.

Vergleich von useReducer mit anderen State-Management-Lösungen

Obwohl die useReducer Hook stellt ein wirksames Werkzeug für die Zustandsverwaltung dar. Es ist wichtig, seine Unterschiede und Kompromisse im Vergleich zu alternativen Zustandsverwaltungslösungen innerhalb des React-Ökosystems anzuerkennen.

useState

Der useState Hook reicht aus, um einfache, isolierte Zustände innerhalb einer Komponente zu verwalten. Die Syntax ist im Vergleich zu prägnanter und einfacher useReducer. Dennoch gilt für komplizierte Zustands- oder Zustandsübergänge: useReducer ermöglicht einen besser organisierten Ansatz.

Redux

Redux ist eine bekannte Bibliothek für Staatsverwaltung für React-Anwendungen. Es folgt einem ähnlichen Reduktionsmuster wie useReducer, bietet jedoch zusätzliche Funktionen wie einen zentralen Speicher, Middleware-Unterstützung und Zeitreise-Debugging.

Redux erweist sich als ideal für groß angelegte Anwendungen, die komplexe Anforderungen an die Zustandsverwaltung erfordern. Für kleinere Projekte oder einfachere staatliche Verwaltungsanforderungen useReducer kann als leichte und einfachere Alternative dienen.

Kontext-API

Die Kontext-API von React ermöglicht die gemeinsame Nutzung von Zuständen über mehrere Komponenten hinweg, ohne auf Stützbohren zurückgreifen zu müssen. In Verbindung mit useReducer, kann daraus eine zentralisierte Zustandsverwaltungslösung entstehen.

Während die Kombination von Kontext-API und useReducer verfügt über eine beträchtliche Leistungsfähigkeit, kann jedoch zu zusätzlicher Komplexität führen, wenn es mit der isolierten Verwendung von useReducer verglichen wird.

Die Kontext-API wird am besten eingesetzt, wenn die Notwendigkeit besteht, den Status inmitten tief verschachtelter Komponenten zu teilen, oder wenn es mit einer komplexen Komponentenhierarchie konfrontiert wird. Die Auswahl einer geeigneten State-Management-Lösung hängt von den spezifischen Anforderungen der jeweiligen Anwendung ab.

Für Projekte mittlerer Größe, useReducer kann sich als effektive und einfachere Alternative zu Redux oder der Context API erweisen.

Entfesseln Sie die Einfachheit des Staatsmanagements

Der useReducer Hook ist ein wirksames Instrument zur Vereinfachung der Statusverwaltung innerhalb von React-Anwendungen. Durch die Einhaltung der Prinzipien des Reduziermusters bietet es einen strukturierten und skalierbaren Ansatz für die Handhabung komplexer Zustände und Zustandsübergänge.

Bei Verwendung zusammen mit dem useState Hook kann useReducer als einfache Alternative zu dienen Bibliotheken wie Redux oder die Context API, insbesondere im Kontext kleinerer bis mittlerer Unternehmen Projekte.