Sử dụng lại dữ liệu từ slice nhiều lần trong Redux

Ở bài học trước, chúng ta đã thêm vào form thêm sản phẩm một trường nữa là danh sách thả xuống để chọn người bán, người sẽ đăng sản phẩm đó. Giả sử bây giờ chúng ta cũng cần hiển thị thông tin này ở nhiều nơi khác trong ứng dụng. Vì điều này, chúng ta sẽ không sao chép mã mỗi lần, mà chỉ cần tạo một component riêng biệt, trong đó chúng ta sẽ lấy dữ liệu từ slice và hiển thị chúng ở những phần của ứng dụng mà chúng ta cần.

Hãy mở ứng dụng sản phẩm của chúng ta. Bây giờ hãy trong thư mục products tạo thêm tệp SellerOfProd.jsx. Đầu tiên nhập hook useSelector, bằng cách sử dụng hook này chúng ta sẽ lấy slice với sản phẩm cần thiết:

import { useSelector } from 'react-redux'

Sau đó, trích xuất từ store sản phẩm cần thiết theo id người bán, mà chúng ta sẽ truyền cho component mới của chúng ta trong props:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Và trong trường hợp, nếu có người bán như vậy, chúng ta sẽ trả về tên của anh ta, còn nếu không, thì chúng ta sẽ trả về 'unknown':

return <span>by {seller ? seller.name : 'unknown'}</span>

Bây giờ hãy nhập component mới của chúng ta vào ProductsList.jsx và chèn nó vào hàm ProductsList ngay sau tiêu đề với tên sản phẩm. Như bạn thấy, chúng ta đã truyền cho nó id trong props:

<SellerOfProd sellerId={product.seller} />

Bây giờ, nếu chúng ta chạy ứng dụng của mình, thêm sản phẩm mới và tìm nó trong danh sách, thì chúng ta sẽ thấy rằng nó đã có người bán, còn với các sản phẩm, được tự động thêm khi khởi chạy ứng dụng, sẽ là 'unknown'.

Một lưu ý nhỏ: nếu eslint của bạn trong trình chỉnh sửa VS Code cảnh báo về sellerId, mà ứng dụng vẫn hoạt động, thì bạn có thể tạm thời bỏ qua điều này hoặc mở tệp .eslintrc.cjs của ứng dụng bạn và trong rules thêm "react/prop-types": "off".

Đương nhiên, chúng ta muốn thêm thông tin về người bán và trên trang sản phẩm. Để làm điều này, hãy chèn trong phần dựng trang của ProductPage sau tiêu đề với tên sản phẩm lại dòng này và kiểm tra xem mọi thứ có hoạt động không:

<SellerOfProd sellerId={product.seller} />

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 students tạo tệp cho component TeacherForStudent. Kết quả là component phải trả về Họ tên đầy đủ của giảng viên, và bên cạnh trong ngoặc đơn là môn học mà giảng viên đó dạy. Giảng viên cần thiết hãy tìm bằng hook useSelector. Nếu giảng viên cho sinh viên này không có, hãy hiển thị 'anonym'.

Bằng component nhận được từ bài tập trước, hãy hiển thị dữ liệu của giảng viên cho mỗi sinh viên trên trang với danh sách sinh viên.

Hãy làm điều tương tự như trong bài tập trước, nhưng cho trang riêng của sinh viên.