Senden von Actions in einer Redux-Anwendung

Jetzt haben wir einen Reducer zum Aktualisieren des Reaktionen-Slices. Als Nächstes müssen wir das Senden einer Action hinzufügen, die ausgelöst wird, wenn ein Benutzer auf einen Reaktionsbutton klickt. Aber zuerst, damit alles vollständig funktioniert, müssen wir ein paar Änderungen vornehmen.

Lassen Sie uns unsere Produktanwendung öffnen, und darin die Datei productsSlice.js. Schauen Sie sich die Definition von initialState an. Sehen Sie? In den Objekten gibt es keine Eigenschaft für Reaktionen. Lassen Sie uns das beheben, indem wir die Zähler für jede der Reaktionen auf 0 setzen:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Fügen Sie dem zweiten Initialisierungsobjekt die Eigenschaft reactions selbst hinzu. Diese Eigenschaft müssen wir auch weiter unten im Code für den Reducer productAdded hinzufügen, damit auch neue Produkte diese Funktionalität haben. Lassen Sie uns das für seine Methode prepare tun:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Kommen wir nun zum Senden der Action. Öffnen wir die Datei UserReactions.jsx, importieren dann den Hook useDispatch und reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Am Anfang des Codes im Funktionskörper von UserReactions als erste Zeile (vor const userReactions ... ) schreiben wir:

const dispatch = useDispatch()

Und wir hängen an den Reaktionsbutton das Senden von reactionClicked beim Klick, wobei die Produkt-ID und der Name der Reaktion, auf die geklickt wurde, übergeben werden:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Jetzt müssen wir nur noch die Komponente mit den Reaktionen im Markup unserer Seiten anzeigen. Machen wir das in der Datei ProductsList.jsx vor dem Link-Element:

<UserReactions product={product} />

Und genauso vor dem Link-Element auf der Produktseite in der Datei ProductPage.jsx:

<UserReactions product={product} />

Jetzt, wo alles an seinem Platz ist, können wir unsere Anwendung starten. Versuchen wir, auf die Reaktionsbuttons zu klicken. Wir können ein neues Produkt hinzufügen und auch darauf die Buttons drücken. Jetzt, egal wo wir auf die Reaktionsbuttons klicken, werden die geänderten Werte für dieses Produkt auf allen Seiten angezeigt. Sehen Sie sich die Seite des einzelnen Produkts (auf der Sie auf Reaktionen geklickt haben) und die Seite mit deren Liste an und umgekehrt, für alle Seiten ist die Anzahl der Reaktionen für ein bestimmtes Produkt gleich.

Diese Lektion war die abschließende in dem Kapitel über die Arbeit mit Daten in Redux. Wir haben intensiver mit Daten im Redux Store gearbeitet und wissen nun, wie wir die benötigte Funktionalität in die Anwendung hinzufügen und die Daten in React Komponenten verwenden können.

Öffnen Sie Ihre Studentenanwendung. Fügen Sie in der Datei studensSlice.js den Initialisierungsobjekten die Eigenschaft votes mit den entsprechenden Feldern hinzu. Machen Sie das auch für den Reducer studentAdded.

Innerhalb der Funktion UserVotes in der Datei UserVotes.jsx definieren Sie dispatch für den Hook useDispatch und führen Sie das Senden der Action voteClicked beim Klick auf die Abstimmungsbuttons aus, übergeben Sie ihm die Studenten-ID und den Namen des vote, ähnlich wie in der Lektion gezeigt.

Zeigen Sie die Buttons für die Abstimmung im Markup für die Komponenten StudentsList und StudentPage an.