Bladsy vir produk in Redux

In hierdie les gaan ons 'n aparte bladsy skep om inligting oor 'n spesifieke produk te vertoon.

Laat ons ons toepassing met produkte oopmaak en in die vouer products die lêer ProductPage.jsx skep. Soos jy onthou, het elke produk van ons 'n unieke id. Dankie aan hierdie id sal ons 'n unieke URL vir elke produk se bladsy kan genereer. Tradisioneel sal dit so lyk: /products/id123. En die id sal in die dinamiese deel daarvan bevat wees (ons sal self met die roete 'n bietjie later besig hou).

So, laat ons in ProductPage.jsx 'n leë komponent ProductPage skep:

export const ProductPage = () => {}

Die eerste ding wat ons hier sal doen - is om die hook useParams te gebruik om die dinamiese deel van die URL vir die produkbladsy waarop ons is, uit te trek:

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

Vervolgens sal ons volgens die verkry id die nodige produk in die slice products in die store soek, met behulp van die reeds bekende hook useSelector:

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

Laat ons nie vergeet om albei hooks in die lêer in te voer nie:

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

As die produk wat ons soek nie daar is nie (bv. as die gebruiker 'n verkeerde adres ingetik het), dan sal ons inligting daaroor op die skerm vertoon. Op hierdie stadium moet die kode vir die komponent ProductPage so lyk:

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

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

	if (!product) {
		return <p>Geen so produk nie</p>
	}
}

En al wat oorbly is om die verkry produkdata in die opmaak te vertoon:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Beskrywing: {product.desc}</p>
		<p>Prys: {product.price}</p>
		<p>Hoeveelheid:{product.amount}</p>
	</div>
)

Maak jou toepassing met studente oop. Skep in die vouer students die lêer StudentPage.jsx, waarin jy inligting oor die geselekteerde student sal kry en vertoon.

Kry die nodige inligting oor die student met behulp van die react-redux hook useSelector, soos in die les gewys.

Vertoon die verkry inligting oor die student in die komponent op die skerm.