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:

products/ProductPage.jsxexport 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:

products/ProductPage.jsxexport 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:

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

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

products/ProductPage.jsximport { 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:

products/ProductPage.jsxexport 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:

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