หน้าขายใน Redux

เหลือเพียงเรื่องเล็กน้อยแล้ว มาทำสิ่งสุดท้ายกันในบทเรียนนี้ — เพิ่มหน้าแยกสำหรับผู้ขายแต่ละคนในแอปพลิเคชันของเรา ที่นี่จะมีแต่การกระทำที่คุณคุ้นเคยแล้ว มาเริ่มกันเลย

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้น เปิดโฟลเดอร์ sellers มาสร้างไฟล์ SellerPage.jsx ในโฟลเดอร์นี้ ตอนนี้เริ่ม เขียนโค้ด SellerPage สำหรับคอมโพเนนต์ ของเรากัน:

export const SellerPage = () => {}

เริ่มต้นด้วยการรับ id ผู้ขาย และใช้มัน ค้นหาวัตถุผู้ขายที่ต้องการใน slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

ต่อมาในโค้ดสำหรับ SellerPage ด้านล่าง หลังจากได้ผู้ขายมาแล้ว เราจะดึงผลิตภัณฑ์ทั้งหมด แล้ว เลือกจากนั้นเฉพาะผลิตภัณฑ์ที่ถูกโพสต์ โดยผู้ขายรายนี้:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

จากนั้นจากชื่อผลิตภัณฑ์ที่เลือก เราจะสร้างรายการโดยใช้ map โดยที่ แต่ละชื่อผลิตภัณฑ์ในรายการนี้ จะเป็นลิงก์ไปยังหน้าของผลิตภัณฑ์นั้น:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

และในตอนท้ายของโค้ดสำหรับ SellerPage เราจะคืนค่า การตกแต่ง: หัวข้อพร้อมชื่อผู้ขาย และรายการผลิตภัณฑ์ที่ผู้ขายรายนี้ โพสต์:

return (
	<div>
	<h2>Seller: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

แน่นอนว่าเรายังต้องการเส้นทาง สำหรับหน้าผู้ขาย เปิด ไฟล์ App.jsx และเพิ่มมัน เป็นลำดับสุดท้ายในเส้นทางย่อย:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

อย่าลืมนำเข้า hook และคอมโพเนนต์ที่จำเป็น ใน SellersPage.jsx และ App.jsx

มาทำให้แอปพลิเคชันของเราทำงาน โหลดผลิตภัณฑ์ จากนั้นในเมนูด้านซ้ายคลิกที่ลิงก์ 'Sellers' ตอนนี้เราสามารถ เข้าไปที่หน้าของผู้ขายใดก็ได้โดยคลิก ที่ชื่อของเขา และบนหน้าของเขา ดูผลิตภัณฑ์ทั้งหมดของเขา และเมื่อคลิกที่ใดก็ได้ ของผลิตภัณฑ์ของเขา เราจะเข้าสู่หน้าของ ผลิตภัณฑ์นั้น

สำหรับตอนนี้เท่านี้ก่อน เราได้เรียนรู้พื้นฐานของ Redux สำหรับการสร้างแอปพลิเคชันและลึกขึ้นเล็กน้อย ทำความรู้จักกับเครื่องมือที่มีประโยชน์ต่างๆ ขอให้คุณโชคดีในการสร้าง แอปพลิเคชัน Redux ของคุณ!

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาบทเรียนแล้ว ในโฟลเดอร์ teachers สร้างไฟล์ TeacherPage.jsx ในโค้ด ของคอมโพเนนต์ TeacherPage ให้ได้วัตถุ ของครูที่ต้องการและนักเรียนทั้งหมดของ อาจารย์ท่านนี้ ใช้ map สร้างจาก พวกเขากลายเป็นรายการ ให้ชื่อเต็มของนักเรียนแต่ละคนเป็น ลิงก์ไปยังหน้าของนักเรียนคนนั้น

ในการตกแต่งที่คืนค่า ควรมี หัวข้อพร้อมชื่อเต็มของครู, ด้านล่างควรมีหัวข้อขนาดเล็กกว่า - พร้อมวิชา ที่เขาสอน และด้านล่างกว่านั้นเป็นรายชื่อ นักเรียนของเขา

ใน App.jsx เชื่อมต่อเส้นทางย่อยอีกหนึ่งเส้นทาง สำหรับหน้าของครู

เปิดแอปพลิเคชันของคุณและตรวจสอบว่า ทุกอย่างทำงานได้