Produktseite in Redux

In dieser Lektion erstellen wir eine separate Seite zur Anzeige von Informationen zu einem bestimmten Produkt.

Öffnen wir unsere Produktanwendung und erstellen im Ordner products die Datei ProductPage.jsx. Wie Sie sich erinnern, hat jedes unserer Produkte eine eindeutige id. Dank dieser id können wir eine eindeutige URL für jede Produktseite generieren. Traditionell sieht sie so aus: /products/id123. Und die id wird in ihrem dynamischen Teil enthalten sein (mit dem Routing selbst werden wir uns etwas später befassen).

Erstellen wir also in ProductPage.jsx eine leere Komponente ProductPage:

export const ProductPage = () => {}

Das erste, was wir hier tun werden, ist den Hook useParams zu verwenden, um den dynamischen Teil der URL für die Produktseite, auf der wir uns befinden, zu extrahieren:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Anschließend suchen wir anhand der erhaltenen id nach dem entsprechenden Produkt im Slice products im Store, indem wir den uns bereits bekannten Hook useSelector verwenden:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Vergessen wir nicht, beide Hooks in der Datei zu importieren:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Falls das gesuchte Produkt nicht vorhanden ist (zum Beispiel, wenn der Benutzer eine falsche Adresse eingegeben hat), werden wir eine entsprechende Information auf dem Bildschirm anzeigen. An dieser Stelle sollte der Code für die Komponente ProductPage so aussehen:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Kein solches Produkt</p>
	}
}

Und es bleibt uns nur noch, die erhaltenen Produktdaten im Markup auszugeben:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Beschreibung: {product.desc}</p>
		<p>Preis: {product.price}</p>
		<p>Menge:{product.amount}</p>
	</div>
)

Öffnen Sie Ihre Studentenanwendung. Erstellen Sie im Ordner students die Datei StudentPage.jsx, in der Sie Informationen zum ausgewählten Studenten abrufen und anzeigen werden.

Holen Sie sich mit dem react-redux Hook useSelector die erforderlichen Informationen über den Studenten, wie in der Lektion gezeigt.

Geben Sie in der Komponente die erhaltenen Informationen über den Studenten auf dem Bildschirm aus.