Senarai Penjual dalam Redux

Dalam pelajaran sebelumnya, kami telah menyelesaikan bahan utama. Sekarang dengan menggunakan thunk, kami mendapatkan senarai produk dari pelayan dan boleh menyimpan produk baru di pelayan. Mari kita uruskan penjual. Lagipun, kami mendapat data untuk mereka juga. Mari buat halaman berasingan dengan senarai penjual.

Buka aplikasi produk kami, dan dalamnya folder sellers. Mari buat fail SellersList.jsx dalam folder ini. Di sini kami akan menggunakan useSelector, Link dan selectAllSellers, yang kodnya akan kami tulis dalam sellersSlice.js nanti:

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

Seterusnya, mari buat SellersList itu sendiri. Di dalamnya, kami akan mendapatkan semua penjual menggunakan hook useSelector, kemudian dapatkan markup untuk senarai penjual dalam gelung map, di mana setiap nama penjual akan membawa kepada halaman mereka. Dan akhirnya, kembalikan markup dengan tajuk dan senarai yang 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, masuk ke fail sellersSlice.js dan seperti selector dalam productsSlice.js, buat dua selector di akhir fail selepas eksport reducer:

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

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

Sekarang kami perlu menetapkan laluan untuk halaman dengan senarai, untuk ini buka fail App.jsx dan dalam array laluan anak children tambah satu objek lagi (jangan lupa untuk import komponen SellersList):

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

Untuk pautan 'Sellers' dalam menu berfungsi, mari masuk ke fail root.jsx (lama nya... ) dan tukar tag a kepada elemen NavLink:

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

Dan akhir sekali. Untuk pautan aktif dalam menu kami diserlahkan, dan adalah jelas di halaman mana kami berada, kami akan menambah gaya dalam index.css:

nav a.active {
	color: purple;
}

Jalankan aplikasi kami. Sekarang kami boleh pergi ke halaman dengan penjual, dengan mengklik 'Sellers' dalam menu. Sudah tentu, sebelum itu, perlu klik 'Products' dalam menu, jika tidak, produk kami tidak akan dimuatkan. Dalam pelajaran seterusnya, kami akan buat halaman untuk setiap penjual dan dengan itu menamatkan pembelajaran tutorial Redux ini.

Buka aplikasi pelajar anda. Setelah mempelajari bahan pelajaran, dalam folder teachers buat fail TeachersList.jsx. Dengan menggunakan komponen ini, anda akan memaparkan senarai guru. Import ke dalamnya komponen dan hook yang diperlukan.

Tulis kod untuk komponen TeachersList, dapatkan semua guru di dalamnya dan buat senarai guru teachersToRender, biarkan setiap baris dalam senarai ini memaparkan nama keluarga dan inisial mereka, dan dalam kurungan subjek yang mereka ajar. Biarkan setiap Nama Penuh menjadi pautan yang membawa ke halaman berasingan untuk setiap guru. Kemudian pada akhir kod komponen, kembalikan markup dengan tajuk dan senarai yang dibuat.

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

Dalam App.jsx sambungkan satu lagi laluan anak untuk halaman guru.

Dalam fail root.jsx dalam menu untuk 'Teachers' tukar tag a kepada NavLink, seperti yang ditunjukkan dalam pelajaran. Pastikan pautan aktif dalam menu diserlahkan, dengan menambah gaya untuk ini dalam index.css.