การดึงข้อมูลจาก store ในคอมโพเนนต์ของ Redux

ในบทเรียนนี้ เราจะแสดงข้อมูลจาก store ใน React component

เปิดแอปพลิเคชันสินค้าของเรา เข้าไปที่ โฟลเดอร์ parts/products และสร้างไฟล์ ProductsList.jsx ในนั้น ขั้นแรกนำเข้า hook useSelector ซึ่งเราจะใช้ เพื่อดึงข้อมูลจาก store:

import { useSelector } from 'react-redux'

ทีนี้ลองดึงสินค้าจาก store กัน เราจะไม่สร้างฟังก์ชัน selector แยกต่างหาก แต่จะเขียนโค้ดของมันลงในพารามิเตอร์ของ useSelector โดยตรง:

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

จากนั้นเราจะแสดงสินค้าด้วยวิธีมาตรฐาน ในตัวฟังก์ชัน ProductsList หลังจาก บรรทัดที่ดึงสินค้า โดยใช้ map:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Price: {product.price}</p>
		<p>Amount: {product.amount}</p>
	</div>
))

และด้านล่างจะแสดง dispProducts ใน markup ต่อไปนี้:

return (
	<div>
		<h2>Products</h2>
		{dispProducts}
	</div>
)

ตอนนี้เหลือเพียงการแสดงรายการ สินค้าของเราบนหน้าหลัก เปิด ไฟล์ root.jsx และแก้ไขหัวเรื่อง:

<h2>This is my first Redux app!</h2>

เป็นดังนี้:

<h2>My Products App</h2>

จากนั้นนำเข้า component ProductsList เข้าไปในไฟล์:

import { ProductsList } from '../parts/products/ProductsList'

และแทรกมันเข้าไปใน div ที่มี id main-page ทันทีหลังจากแท็กปิด hr:

<ProductsList />

เริ่มต้นแอปพลิเคชันของเรา รายการ สินค้าทั้งสองชิ้นของเราแสดงผลสำเร็จบนหน้า หลัก

เปิดแอปพลิเคชันนักเรียนของคุณ สร้างไฟล์ StudentsList.jsx ในโฟลเดอร์ students

ดึงข้อมูลนักเรียนจาก store โดยใช้ hook useSelector ตามที่อธิบายในบทเรียน แสดงฟิลด์ข้อมูลทั้งหมดเกี่ยวกับ นักเรียนจาก state โดยใช้ map

นำเข้า component ที่ได้ StudentsList ไปยัง root.jsx และ แสดงผลบนหน้าหลัก ตรวจสอบให้แน่ใจว่า ข้อมูลทั้งหมดเกี่ยวกับนักเรียน แสดงบนหน้าจอ