Trang dành cho sản phẩm trong Redux

Trong bài học này, chúng ta sẽ tạo một trang riêng để hiển thị thông tin về một sản phẩm cụ thể.

Hãy mở ứng dụng sản phẩm của chúng ta và trong thư mục products tạo tệp ProductPage.jsx. Như bạn nhớ, mỗi sản phẩm của chúng ta có một id duy nhất. Nhờ id này, chúng ta có thể tạo một URL trang duy nhất cho mỗi sản phẩm. Thông thường nó sẽ trông như: /products/id123. Và id sẽ được chứa trong phần động của nó (chúng ta sẽ giải quyết bản thân định tuyến muộn hơn một chút).

Vậy, hãy trong ProductPage.jsx tạo một thành phần trống ProductPage:

export const ProductPage = () => {}

Điều đầu tiên chúng ta sẽ làm ở đây - sử dụng hook useParams để lấy phần động của URL cho trang sản phẩm mà chúng ta đang ở:

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

Tiếp theo, theo id nhận được, chúng ta sẽ tìm kiếm sản phẩm cần thiết trong slice products trong store, sử dụng hook quen thuộc useSelector:

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

Đừng quên import cả hai hook vào tệp:

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

Nếu sản phẩm chúng ta cần không có (ví dụ: người dùng nhập địa chỉ không chính xác), thì chúng ta sẽ hiển thị thông tin về điều này trên màn hình. Ở bước này, mã cho thành phần ProductPage phải trông như thế này:

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

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

	if (!product) {
		return <p>Không có sản phẩm như vậy</p>
	}
}

Và chúng ta chỉ cần hiển thị dữ liệu sản phẩm nhận được trong phần giao diện:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Mô tả: {product.desc}</p>
		<p>Giá: {product.price}</p>
		<p>Số lượng:{product.amount}</p>
	</div>
)

Hãy mở ứng dụng sinh viên của bạn. Trong thư mục students tạo tệp StudentPage.jsx, trong đó bạn sẽ nhận và hiển thị thông tin về sinh viên được chọn.

Với hook useSelector của react-redux hãy lấy thông tin cần thiết về sinh viên, như được hiển thị trong bài học.

Hãy hiển thị trong thành phần thông tin nhận được về sinh viên trên màn hình.