Hinzufügen zusätzlicher Logik zur Redux-Anwendung

In dieser Lektion werden wir die letzte Komponente zu unserer Anwendung hinzufügen. Um genauer zu sein, werden wir dem Produkt die Reaktion der Benutzer hinzufügen, die es entweder bestellt oder Informationen daruber gelesen haben.

Lassen Sie uns unsere Produktanwendung öffnen. Wie beim Namen des Verkäufers müssen wir die Benutzerreaktionen an mehreren Stellen der Anwendung anzeigen. Das bedeutet, dass wir eine separate Komponente benötigen. Daher beginnen wir damit, im Ordner products eine Datei UserReactions.jsx zu erstellen. Lassen Sie uns zunächst ein Objekt darin definieren, das unsere Reaktionen enthält:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Und darunter beginnen wir mit der Funktion selbst, der wir den Slice product übergeben:

export const UserReactions = ({ product }) => {}

Schreiben wir nun in die geschweiften Klammern den Rumpf der Funktion UserReactions. Dazu durchlaufen wir mit map die Schlüssel-Wert-Paare unseres reactionObj, holen für jedes die Bezeichnung für die Schaltfläche ('+', '+/-' oder '-') und den numerischen Wert der jeweiligen Reaktion (diesen werden wir aus product im Store anhand des Reaktionsnamens holen):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Und danach geben wir am Ende des Funktionscodes das Markup mit den Schaltflächen userReactions zurück:

return <div>{userReactions}</div>

Außerdem fügen wir noch ein paar Styles in index.css hinzu:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Falls das etwas verwirrend aussieht, machen Sie sich keine Sorgen, es wird im Folgenden viel klarer für Sie werden.

Öffnen Sie Ihre Studentenanwendung. In Ihrer Anwendung wird es die Möglichkeit geben, dass Benutzer unter den Studenten den Gruppenleiter und den Kapitän des Sportteams wählen können. Daher, nachdem Sie die Unterrichtsmaterialien studiert haben, erstellen Sie im Ordner students die Datei UserVotes.jsx. Erstellen Sie am Anfang der Datei ein Objekt votesObj, in dem Sie zwei Eigenschaften haben werden - leader und captain, mit den Werten GL und TC, als Bezeichnung für die Schaltflächen.

Darunter in der Datei, nach der Definition des Objekts votesObj, schreiben Sie den Code der Funktion UserVotes, analog zum Material aus dieser Lektion.