Trang Người Bán trong Redux

Công việc còn lại rất ít. Hãy cùng ở buổi học này thực hiện điều cuối cùng - thêm vào ứng dụng của chúng ta một trang riêng cho mỗi người bán. Ở đây sẽ chỉ có những thao tác đã quen thuộc với bạn. Hãy bắt đầu.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở thư mục sellers. Tạo trong thư mục này tệp SellerPage.jsx. Bây giờ hãy bắt đầu viết mã SellerPage cho component của chúng ta:

export const SellerPage = () => {}

Đầu tiên hãy lấy id người bán và theo nó tìm đối tượng người bán cần thiết trong slice:

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

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

Tiếp theo, ở phần mã dưới cho SellerPage sau khi lấy được người bán, chúng ta sẽ lấy tất cả sản phẩm, sau đó chọn từ chúng chỉ những sản phẩm được đăng bán bởi người bán này:

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

Và sau đó từ tên của các sản phẩm đã chọn tạo một danh sách bằng map. Hơn nữa, mỗi tên sản phẩm trong danh sách này sẽ là một liên kết đến trang của sản phẩm đó:

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

Và cuối cùng trong mã cho SellerPage, hãy trả về phần giao diện: tiêu đề với tên người bán và danh sách sản phẩm mà người bán này đã đăng:

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

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

Tất nhiên, chúng ta cũng cần một route cho trang người bán. Hãy mở tệp App.jsx và thêm nó cuối cùng vào các route con:

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

Đừng quên import các hook và component cần thiết vào SellersPage.jsx và App.jsx.

Hãy khởi chạy ứng dụng của chúng ta, tải sản phẩm, sau đó trong menu bên trái nhấp vào liên kết 'Sellers'. Bây giờ chúng ta có thể truy cập trang của bất kỳ người bán nào bằng cách nhấp vào tên của họ, sau đó trên trang của họ xem tất cả sản phẩm của họ. Và, bằng cách nhấp vào bất kỳ sản phẩm nào của họ, chúng ta sẽ vào trang của sản phẩm đó.

Đến đây tạm thời là hết. Chúng ta đã học những kiến thức cơ bản về Redux để tạo ứng dụng và thậm chí một chút sâu hơn. Làm quen với các công cụ hữu ích khác nhau. Chúc bạn may mắn trong việc tạo ra các ứng dụng Redux của mình!

Hãy mở ứng dụng sinh viên của bạn. Sau khi nghiên cứu tài liệu bài học, trong thư mục teachers hãy tạo tệp TeacherPage.jsx. Trong mã của component TeacherPage, hãy lấy đối tượng giáo viên cần thiết và tất cả sinh viên của giáo viên này. Sử dụng map để tạo từ họ một danh sách, hãy để họ tên của mỗi sinh viên là một liên kết đến trang của sinh viên đó.

Hãy để trong phần giao diện trả về có một tiêu đề với họ tên giáo viên, bên dưới là một tiêu đề nhỏ hơn - với môn học mà họ giảng dạy, và bên dưới nữa là danh sách sinh viên của họ.

Trong App.jsx, hãy kết nối thêm một route con cho trang giáo viên.

Hãy khởi chạy ứng dụng của bạn và đảm bảo rằng mọi thứ hoạt động.