Menggunakan Data dari Slice Berulang Kali di Redux

Pada pelajaran sebelumnya, kita menambahkan ke formulir untuk menambah produk satu bidang lagi dengan daftar dropdown untuk memilih penjual, yang mempublikasikannya. Mari kita asumsikan, sekarang kita juga perlu menampilkan informasi ini di beberapa tempat lain di aplikasi. Untuk hal ini, kita tidak akan menduplikasi kode setiap kali, tetapi cukup membuat komponen terpisah, di mana kita akan mengambil data dari slice dan menampilkannya di bagian aplikasi yang kita butuhkan.

Mari buka aplikasi produk kita. Sekarang di folder products, mari kita buat file lain SellerOfProd.jsx. Pertama-tama impor hook useSelector, dengan bantuan yang akan kita dapatkan slice dengan produk yang dibutuhkan:

import { useSelector } from 'react-redux'

Kemudian ekstrak dari store produk yang dibutuhkan berdasarkan id penjual, yang akan kita teruskan ke komponen baru kita di props:

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

Dan jika penjual tersebut ada, kita akan mengembalikan namanya, jika tidak, kita akan mengembalikan 'unknown':

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

Sekarang mari impor komponen baru kita ke ProductsList.jsx dan sisipkan di dalam fungsi ProductsList tepat setelah judul dengan nama produk. Seperti yang Anda lihat, kita telah memberikannya id di props:

<SellerOfProd sellerId={product.seller} />

Sekarang, jika kita menjalankan aplikasi kita, menambah produk baru dan mencarinya di daftar, maka kita akan melihat bahwa penjual telah muncul padanya, sedangkan untuk produk yang ditambahkan secara otomatis saat aplikasi dijalankan, akan tertulis 'unknown'.

Selingan kecil: jika eslint Anda di editor VS Code mengeluh tentang sellerId, tetapi aplikasi berjalan, Anda bisa untuk sementara mengabaikannya atau membuka file .eslintrc.cjs aplikasi Anda dan di rules tambahkan "react/prop-types": "off".

Sudah jelas, bahwa kita ingin menambahkan informasi tentang penjual juga di halaman produk. Untuk melakukan ini, sisipkan di dalam markup ProductPage setelah judul dengan nama produk baris ini lagi dan periksa bahwa semuanya bekerja:

<SellerOfProd sellerId={product.seller} />

Buka aplikasi Anda tentang mahasiswa. Setelah mempelajari materi pelajaran, di folder students buat file untuk komponen TeacherForStudent. Hasilnya, komponen harus mengembalikan Nama lengkap dosen, dan di sebelahnya dalam tanda kurung mata pelajaran yang dia ajarkan. Cari dosen yang dibutuhkan dengan bantuan hook useSelector. Jika dosen untuk mahasiswa ini tidak ada, tampilkan 'anonym'.

Dengan menggunakan komponen yang didapat dari tugas sebelumnya, tampilkan data dosen untuk setiap mahasiswa pada halaman dengan daftar mahasiswa.

Lakukan hal yang sama seperti pada tugas sebelumnya, tetapi untuk halaman mahasiswa secara terpisah.