Lấy dữ liệu từ store trong component Redux

Trong bài học này, chúng ta sẽ hiển thị dữ liệu từ store trong component React.

Hãy mở ứng dụng sản phẩm của chúng ta, vào thư mục parts/products và tạo trong đó tệp ProductsList.jsx. Đầu tiên hãy import hook useSelector vào, dùng nó để lấy dữ liệu từ store:

import { useSelector } from 'react-redux'

Bây giờ hãy lấy các sản phẩm từ store. Chúng ta sẽ không tạo hàm selector riêng biệt, mà sẽ viết code của nó trực tiếp trong tham số cho useSelector:

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

Sau đó chúng ta sẽ hiển thị các sản phẩm bằng cách thông thường trong thân hàm ProductsList sau dòng lấy sản phẩm, sử dụng 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>
))

Và bên dưới chúng ta sẽ hiển thị dispProducts trong phần markup sau:

return (
	<div>
		<h2>Sản phẩm</h2>
		{dispProducts}
	</div>
)

Bây giờ chỉ cần hiển thị danh sách sản phẩm của chúng ta trên trang chủ. Hãy mở tệp root.jsx và sửa tiêu đề:

<h2>Đây là ứng dụng Redux đầu tiên của tôi!</h2>

Thành:

<h2>Ứng dụng Sản phẩm của Tôi</h2>

Sau đó import vào tệp component ProductsList:

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

Và chèn nó vào div có id main-page ngay sau thẻ đóng hr:

<ProductsList />

Hãy chạy ứng dụng của chúng ta. Danh sách hai sản phẩm của chúng ta đã được hiển thị thành công trên trang chủ.

Mở ứng dụng sinh viên của bạn. Tạo tệp StudentsList.jsx trong thư mục students.

Lấy dữ liệu sinh viên từ store bằng hook useSelector, như mô tả trong bài học. Hiển thị tất cả các trường thông tin về sinh viên từ state, sử dụng map.

Import component đã tạo StudentsList vào root.jsx và hiển thị nó trên trang chủ. Đảm bảo rằng tất cả thông tin về sinh viên được hiển thị trên màn hình.