หน้าสำหรับสินค้าใน Redux

ในบทเรียนนี้ เราจะสร้างหน้าแยกต่างหาก เพื่อแสดงข้อมูลเกี่ยวกับสินค้าเฉพาะ

เปิดแอปพลิเคชันสินค้าของเราและในโฟลเดอร์ products สร้างไฟล์ ProductPage.jsx ตามที่ คุณจำได้ สินค้าแต่ละรายการของเรามี id ที่ไม่ซ้ำกัน ขอบคุณ id นี้ เราจะสามารถสร้าง URL หน้าที่ไม่ซ้ำกันสำหรับแต่ละสินค้าได้ ตามธรรมเนียมจะหน้าตาเช่นนี้: /products/id123 และ id จะอยู่ใน ส่วนที่เปลี่ยนแปลงได้ (ส่วนเส้นทางเองเราจะจัดการ ในภายหลัง)

ดังนั้น มาเริ่มกันที่ ProductPage.jsx สร้าง คอมโพเนนต์เปล่า ProductPage:

export const ProductPage = () => {}

สิ่งแรกที่เราจะทำที่นี่ - ใช้ Hook useParams เพื่อดึงส่วนที่เปลี่ยนแปลงได้ ของ URL สำหรับหน้าสินค้าที่ เราอยู่:

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

จากนั้น ตาม id ที่ได้รับ เราจะค้นหา สินค้าที่ต้องการใน slice products ใน store โดยใช้ Hook ที่เราคุ้นเคยแล้ว useSelector:

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

อย่าลืมนำเข้า Hook ทั้งสองในไฟล์:

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

หากสินค้าที่เราต้องการไม่มี (เช่น ผู้ใช้ป้อนที่อยู่ ไม่ถูกต้อง) เราจะแสดงข้อมูลเกี่ยวกับเรื่องนี้ บนหน้าจอ ในขั้นตอนนี้โค้ดสำหรับคอมโพเนนต์ ProductPage ควรมีลักษณะดังนี้:

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

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

	if (!product) {
		return <p>ไม่มีสินค้าดังกล่าว</p>
	}
}

และสิ่งที่เหลือคือเพียงแสดง ข้อมูลสินค้าที่ได้รับในการออกแบบ:

return (
	<div>
		<h2>{product.name}</h2>
		<p>รายละเอียด: {product.desc}</p>
		<p>ราคา: {product.price}</p>
		<p>จำนวน: {product.amount}</p>
	</div>
)

เปิดแอปพลิเคชันนักเรียนของคุณ ในโฟลเดอร์ students สร้างไฟล์ StudentPage.jsx ซึ่งคุณจะ รับและแสดงข้อมูลตาม นักเรียนที่เลือก

ด้วย Hook useSelector ของ react-redux รับข้อมูลที่จำเป็นเกี่ยวกับนักเรียน ตามที่แสดงในบทเรียน

แสดงในคอมโพเนนต์ข้อมูลที่ได้รับ เกี่ยวกับนักเรียนบนหน้าจอ