Hinzufügen eines Reducers zur Redux-Anwendung

In der letzten Lektion haben wir die Komponente UserReaction erstellt, damit jedes Produkt auch Benutzerreaktionen haben kann. Jetzt müssen wir einen Reducer schreiben, der den Zähler für Reaktionen verarbeitet, wenn ein Benutzer auf den Button einer bestimmten Reaktion klickt.

Öffnen wir unsere Produktanwendung und darin die Datei productsSlice.js mit allen Reducern. Jetzt erstellen wir in der Eigenschaft reducers einen weiteren Reducer reactionClicked (wir können ihn an erste Stelle setzen - vor productAdded, obwohl das egal ist). Wie üblich übergeben wir ihm die Parameter state und action:

reactionClicked(state, action) {},

Und jetzt schreiben wir innerhalb der geschweiften Klammern, die wir in vorherigen Schritt leer gelassen haben, den Code dafür. Zuerst extrahieren wir die Produkt-ID aus dem payload des action-Objekts und den Namen der Reaktion:

const { productId, reaction } = action.payload

Dann holen wir das benötigte Produkt aus dem übergebenen State:

const currentProduct = state.find(product => product.id === productId)

Und wenn ein solches Produkt vorhanden ist, erhöhen wir den Wert der übergebenen Reaktion um 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Das ist alles, unser Code für reactionClicked ist fertig:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Lasst uns am Ende der Datei den Export des erhaltenen Action Creators hinzufügen:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Hier sind zwei wichtige Punkte zu beachten. Wie Sie sich aus vorherigen Lektionen erinnern - das direkte Aktualisieren des Werts im Reducer-Code auf diese Weise ist nicht erlaubt (schauen Sie sich diese Zeile an: reactions[reaction]++), aber das wird uns durchgehen, weil wir es innerhalb von createSlice tun, welches die Bibliothek Immer verwendet. Sie kümmert sich darum, unseren Code in eine "sichere" Aktualisierung des Werts umzuwandeln. Dies erlaubt uns, komplexe Dinge auf einfachere Weise zu schreiben.

Als nächstes ist zu beachten - das action-Objekt sollte die minimal mögliche Menge an Informationen enthalten - nur genug, um anzugeben, was passiert ist. Es sollten keine Berechnungen darin durchgeführt werden. Alle Berechnungen für die Aktualisierung des States sollten im Reducer erfolgen, hier kann dafür so viel Logik geschrieben werden, wie benötigt wird.

Öffnen Sie Ihre Studentenanwendung und fügen Sie in der Datei studentsSlice.js einen weiteren Reducer voteClicked im Feld reducers hinzu, wie in der Lektion gezeigt. Schreiben Sie den Code dafür. Die Aufgabe Ihres Reducers ist es, bei einem Klick den Wert vote (oder die Stimme), auf die geklickt wurde, für diesen Studenten um 1 zu erhöhen.

Vergessen Sie am Ende der Datei nicht, den erhaltenen Action Creator voteClicked zu exportieren.