Grundlegende Begriffe in Redux

In dieser Lektion werden wir kurz die grundlegenden Konzepte und Begriffe durchgehen, deren Kenntnis für das weitere Studium von Redux erforderlich ist.

Wir beginnen mit der Aktion (action). Dies ist ein Ereignis, das beschreibt, was in unserer Anwendung passiert ist. Technisch gesehen ist es ein gewöhnliches JavaScript-Objekt, das ein Feld type enthält, in das wir den Namen der Aktion schreiben.

Ein zweites wichtiges Feld des Aktionsobjekts ist das Feld payload. Es enthält die Nutzdaten der Aktion. Als Nutzdaten werden bestimmte Daten verstanden, die als Parameter an die Aktion übergeben werden.

In diesem Objekt können sich auch andere Felder mit zusätzlichen Informationen befinden.

Erstellen wir zum Beispiel eine Aktion und nennen sie addOrderAction. Sie soll für das Hinzufügen einer Bestellung verantwortlich sein. Daher geben wir in der Eigenschaft type an, dass die Bestellung (orderAdded) zu den Bestellungen (orders) hinzugefügt wurde. Und in payload geben wir genauer an, um welche Bestellung es sich handelt, zum Beispiel - eine Wand zu streichen:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

Um nicht jedes Mal das Objekt mit der Aktion von Hand schreiben zu müssen, können wir einen sogenannten Action Creator verwenden - eine Funktion, die das Aktionsobjekt für uns erstellt und zurückgibt. Nennen wir sie addOrder. Als Parameter übergeben wir ihr den gewünschten Text für die Eigenschaft payload:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

Das nächste wichtige Konzept in der Kette ist der Reducer - eine Funktion, die den aktuellen Zustand und das Aktionsobjekt entgegennimmt. Diese Funktion entscheidet, wie der Zustand aktualisiert werden soll, und gibt den aktualisierten State zurück, falls erforderlich.

Das nächste Konzept ist der Store (store) - ein Objekt, in dem der aktuelle globale Zustand der Redux-Anwendung gespeichert ist. Dieses Objekt hat eine Methode getState, mit der man den aktuellen Wert des States abrufen kann.

Der Store hat auch eine Methode dispatch. Diese aufzurufen und ihr ein Aktionsobjekt zu übergeben - das ist die einzige Möglichkeit, den State zu ändern. Als Ergebnis wird der Store die Reducer-Funktion aufrufen und den neuen State-Wert bei sich speichern.

Und der letzte Begriff, den wir in dieser Lektion betrachten, ist Selektoren. Selektoren sind spezielle Funktionen, die wissen, wie man Informationen aus dem im Store befindlichen State extrahiert. Diese Funktionen erweisen sich als besonders nützlich, wenn die Anwendung wächst, und helfen, Code-Wiederholungen zu vermeiden.

Mehr über all diese Konzepte und deren praktische Anwendung erfahren wir in den folgenden Abschnitten dieses Tutorials.