Daftar Penjual di Redux

Pada pertemuan sebelumnya kita telah menyelesaikan materi utama. Sekarang dengan menggunakan thunk kita mendapatkan daftar produk dari server dan dapat menyimpan produk baru di server. Mari kita bahas tentang penjual. Bagaimanapun kita mendapatkan data untuk mereka juga. Mari buat halaman terpisah untuk daftar penjual.

Buka aplikasi kita dengan produk, dan di dalamnya folder sellers. Buatlah di folder ini file SellersList.jsx. Di sini kita akan menggunakan useSelector, Link dan selectAllSellers, kodenya akan kita tulis di sellersSlice.js nanti:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Selanjutnya buatlah SellersList itu sendiri. Di dalamnya kita akan mendapatkan semua penjual dengan menggunakan hook useSelector, kemudian dapatkan markup untuk daftar penjual dalam loop map, dimana setiap nama penjual akan mengarah ke halamannya. Dan di akhir kembalikan markup dengan judul dan daftar yang telah diperoleh:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Sellers:</h2>

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

Kemudian buka file sellersSlice.js dan dengan analogi selector di productsSlice.js buatlah di akhir file dua selector setelah ekspor reducer:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Sekarang kita perlu menuliskan rute untuk halaman dengan daftar, untuk ini buka file App.jsx dan dalam array rute anak children tambahkan satu objek lagi (jangan lupa untuk mengimpor komponen SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Agar tautan kita 'Sellers' di menu bekerja, mari buka file root.jsx (sudah lama sekali ... ) dan ganti tag a dengan elemen NavLink:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

Dan yang terakhir. Agar di menu kita tautan aktif tersorot, dan jelas di halaman mana kita berada, kita akan tambahkan gaya di index.css:

nav a.active {
	color: purple;
}

Jalankan aplikasi kita. Sekarang kita bisa masuk ke halaman dengan penjual, dengan mengklik 'Sellers' di menu. Tentu saja sebelumnya, perlu mengklik 'Products' di menu, jika tidak produk kita tidak akan terload. Pada pelajaran berikutnya kita akan buat halaman untuk setiap penjual dan dengan ini menyelesaikan pembelajaran tutorial Redux ini.

Buka aplikasi Anda dengan siswa. Setelah mempelajari materi pelajaran, di folder teachers buat file TeachersList.jsx. Dengan menggunakan komponen ini Anda akan menampilkan daftar pengajar. Impor ke dalamnya komponen dan hook yang diperlukan.

Tulis kode untuk komponen TeachersList, dapatkan semua pengajar di dalamnya dan buat daftar pengajar teachersToRender, biarkan di setiap baris daftar ini ditampilkan nama belakang dan inisial mereka, dan dalam kurung mata pelajaran yang mereka ajarkan. Biarkan setiap Nama Lengkap menjadi tautan, yang mengarah ke halaman terpisah untuk setiap pengajar. Kemudian di akhir kode komponen kembalikan markup dengan judul dan daftar yang dibuat.

Di akhir file teachersSlice.js buat sepasang fungsi selector selectAllTeachers dan selectTeacherById, seperti yang ditunjukkan dalam pelajaran.

Di App.jsx sambungkan satu rute anak lagi untuk halaman dengan pengajar.

Di file root.jsx di menu untuk 'Teachers' ganti tag a dengan NavLink, seperti yang ditunjukkan dalam pelajaran. Buat agar tautan aktif di menu tersorot dengan cara tertentu, dengan menambahkan gaya untuk ini di index.css.