ReactJS - Verwendung von useReducer

Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt der React-Hooks, dabei konzentrieren wir uns insbesondere auf den mächtigen useReducer Hook. Keine Sorge, wenn du neu im Programmieren bist – ich werde dich schrittweise durchführen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lassen wir uns hineintauchen!

Was ist useReducer?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, worum es bei useReducer geht. Stellen Sie sich vor, Sie spielen ein Videospiel, bei dem Ihr Charakter verschiedene Zustände hat – Gesundheit, Kraft und Geschwindigkeit. Während Sie spielen, ändern sich diese Zustände basierend auf Ihren Aktionen. useReducer ist wie die Spiel-Engine, die diese Zustandsänderungen basierend auf spezifischen Regeln verwaltet.

In React-Begriffen ist useReducer ein Hook, der uns hilft, komplexe Zustandslogik in unseren Anwendungen zu verwalten. Er ist besonders nützlich, wenn Sie mehrere Unterwerte in Ihrem Zustand haben oder wenn der nächste Zustand vom vorherigen abhängt.

Signatur des useReducer-Hooks

Nun schauen wir uns an, wie wir useReducer in unserem Code tatsächlich verwenden. Hier ist seine grundlegende Struktur:

const [state, dispatch] = useReducer(reducer, initialState);

Lassen Sie uns das aufschlüsseln:

• state: Dies ist unser aktueller Zustand, wie die aktuelle Gesundheit Ihres Charakters im Spielbeispiel.
• dispatch: Dies ist eine Funktion, die wir verwenden, um Aktionen zum Aktualisieren unseres Zustands zu senden.
• reducer: Dies ist eine Funktion, die festlegt, wie unser Zustand auf Aktionen reagieren soll.
• initialState: Dies ist der Anfangszustand unserer Anwendung.

Es mag jetzt etwas verwirrend aussehen, aber keine Sorge! Wir werden das很快 in die Praxis umsetzen und dann wird alles klar.

Anwendung des Reducer-Hooks

Lassen Sie uns eine einfache.Counter-Anwendung erstellen, um zu verstehen, wie useReducer funktioniert. Wir beginnen mit einer grundlegenden Einrichtung und bauen dann darauf auf.

import React, { useReducer } from 'react';

// Schritt 1: Definieren des Anfangszustands
const initialState = { count: 0 };

// Schritt 2: Erstellen der Reducer-Funktion
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}

// Schritt 3: Erstellen des Counter-Komponenten
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}

export default Counter;

Lassen Sie uns das schrittweise durchgehen:

1. Wir importieren useReducer von React.
2. Wir definieren unseren initialState mit einem Zählerstand von 0.
3. Wir erstellen eine reducer-Funktion, die den aktuellen state und eine action annimmt und den neuen Zustand basierend auf der Aktionsart zurückgibt.
4. In unserer Counter-Komponente verwenden wir useReducer, um unseren aktuellen state und die dispatch-Funktion zu erhalten.
5. Wir rendern den aktuellen Zählerstand und zwei Buttons, die die 'increment' und 'decrement' Aktionen auslösen, wenn sie geklickt werden.

Wenn Sie den '+' Button klicken, wird eine 'increment' Aktion ausgelöst, die unser Reducer durch die Erhöhung des Zählerstandes verarbeitet. Der '-' Button funktioniert ähnlich für die Verringerung.

Verwendung von useReducer

Nun, da wir ein einfaches Beispiel gesehen haben, lassen uns ein komplexeres Szenario erkunden. Stellen wir uns vor, wir bauen eine einfache Aufgabenverwaltungs-App. Wir verwenden useReducer, um das Hinzufügen und Entfernen von Aufgaben zu verwalten.

import React, { useReducer, useState } from 'react';

// Schritt 1: Definieren des Anfangszustands
const initialState = { tasks: [] };

// Schritt 2: Erstellen der Reducer-Funktion
function reducer(state, action) {
switch (action.type) {
case 'ADD_TASK':
return { tasks: [...state.tasks, action.payload] };
case 'REMOVE_TASK':
return { tasks: state.tasks.filter((task, index) => index !== action.payload) };
default:
return state;
}
}

// Schritt 3: Erstellen des TaskManager-Komponenten
function TaskManager() {
const [state, dispatch] = useReducer(reducer, initialState);
const [newTask, setNewTask] = useState('');

const handleAddTask = () => {
if (newTask.trim()) {
dispatch({ type: 'ADD_TASK', payload: newTask });
setNewTask('');
}
};

const handleRemoveTask = (index) => {
dispatch({ type: 'REMOVE_TASK', payload: index });
};

return (
<div>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Geben Sie eine neue Aufgabe ein"
/>
<button onClick={handleAddTask}>Aufgabe hinzufügen</button>
<ul>
{state.tasks.map((task, index) => (
<li key={index}>
{task}
<button onClick={() => handleRemoveTask(index)}>Entfernen</button>
</li>
))}
</ul>
</div>
);
}

export default TaskManager;

In diesem komplexeren Beispiel:

1. Unser initialState enthält jetzt ein Array von Aufgaben.
2. Die reducer-Funktion verarbeitet zwei Arten von Aktionen: 'ADD_TASK' und 'REMOVE_TASK'.
3. In der TaskManager-Komponente verwenden wir sowohl useReducer zur Verwaltung von Aufgaben als auch useState zur Verwaltung des Eingabefelds.
4. Wir haben Funktionen zum Hinzufügen und Entfernen von Aufgaben, die die entsprechenden Aktionen auslösen.
5. Wir rendern ein Eingabefeld für neue Aufgaben, einen Button zum Hinzufügen von Aufgaben und eine Liste der bestehenden Aufgaben mit Entfernungs-Buttons.

Dieses Beispiel zeigt, wie useReducer dazu beitragen kann, komplexe Zustandslogik auf eine saubere und organisierte Weise zu verwalten.

Methoden-Tabelle

Hier ist eine Tabelle, die die wichtigsten Methoden und Konzepte zusammenfasst, die wir behandelt haben:

Methode/Konzept	Beschreibung	Beispiel
useReducer	Ein React-Hook zur Verwaltung komplexer Zustandslogik	const [state, dispatch] = useReducer(reducer, initialState);
reducer	Eine Funktion, die festlegt, wie der Zustand auf Aktionen reagieren soll	function reducer(state, action) { ... }
dispatch	Eine Funktion, die verwendet wird, um Aktionen zum Aktualisieren des Zustands zu senden	dispatch({ type: 'ADD_TASK', payload: newTask })
action	Ein Objekt, das beschreibt, welche Änderung am Zustand vorgenommen werden soll	{ type: 'INCREMENT' }
initialState	Der Anfangszustand der Anwendung	const initialState = { count: 0 };

Denken Sie daran, dass das effektive Lernen der Verwendung von useReducer Übung erfordert. Lassen Sie sich nicht entmutigen, wenn es nicht sofort klappt – selbst erfahrene Entwickler benötigen manchmal Zeit, um neue Konzepte zu durchdringen. Weiter codieren, weiter experimentieren und vor allem: haben Sie Spaß dabei! Bevor Sie es wissen, werden Sie komplexen Zustand wie ein Profi verwalten. Frohes Coden!

Credits: Image by storyset