Menggunakan Data dari Slice Berulang Kali dalam Redux

Dalam pelajaran lepas, kami menambahkan satu lagi medan kepada borang untuk menambah produk iaitu senarai juntai bawah untuk memilih penjual yang menyenaraikannya. Mari kita andaikan sekarang kami perlu memaparkan maklumat ini di beberapa tempat lain dalam aplikasi. Untuk tujuan ini, kami tidak akan menduakan kod setiap kali, sebaliknya hanya mencipta komponen berasingan, di mana kami akan mengambil data dari slice dan mempamerkannya di bahagian aplikasi yang kami perlukan.

Buka aplikasi produk kami. Sekarang, mari dalam folder products kami buat satu fail lagi SellerOfProd.jsx. Untuk permulaan import hook useSelector, yang akan kami gunakan untuk mendapatkan slice dengan produk yang dikehendaki:

import { useSelector } from 'react-redux'

Kemudian, ambil dari store produk yang dikehendaki berdasarkan id penjual, yang akan kami hantar kepada komponen baru kami melalui props:

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

Dan sekiranya penjual tersebut wujud, kami akan memulangkan namanya, dan jika tidak, kami akan memulangkan 'unknown':

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

Sekarang, mari import komponen baru kami ke dalam ProductsList.jsx dan masukkan ia dalam fungsi ProductsList sejurus selepas tajuk dengan nama produk. Seperti yang anda lihat, kami telah menghantar id kepadanya melalui props:

<SellerOfProd sellerId={product.seller} />

Sekarang, jika kami menjalankan aplikasi kami, menambah produk baru dan mencarinya dalam senarai, kami akan lihat bahawa penjual telah muncul untuknya, manakala untuk produk yang ditambah secara automatik semasa permulaan aplikasi, ia akan menunjukkan 'unknown'.

Satu catatan kecil: jika eslint anda dalam editor VS Code menunjukkan ralat untuk sellerId, tetapi aplikasi berfungsi, anda boleh abaikannya buat sementara waktu atau buka fail .eslintrc.cjs aplikasi anda dan dalam rules tambahkan "react/prop-types": "off".

Sudah tentu, kami ingin menambah maklumat tentang penjual juga pada halaman produk. Untuk melakukan ini, masukkan semula baris ini dalam ProductPage selepas tajuk dengan nama produk dan pastikan semuanya berfungsi:

<SellerOfProd sellerId={product.seller} />

Buka aplikasi pelajar anda. Setelah mempelajari bahan pelajaran, dalam folder students buat fail untuk komponen TeacherForStudent. Hasilnya, komponen tersebut hendaklah memulangkan nama guru, dan di sebelahnya dalam kurungan subjek yang diajar olehnya. Cari guru yang diperlukan menggunakan hook useSelector. Jika guru untuk pelajar ini tiada, paparkan 'anonym'.

Menggunakan komponen yang diperoleh dari tugasan sebelumnya, paparkan data guru untuk setiap pelajar pada halaman senarai pelajar.

Lakukan perkara yang sama seperti dalam tugasan sebelumnya, tetapi untuk halaman profil pelajar individu.