Redux'ta Satıcılar Listesi

Önceki derslerde ana materyali bitirdik. Artık thunk yardımıyla sunucudan ürün listesini alıyoruz ve sunucuda yeni bir ürün kaydedebiliyoruz. Şimdi satıcılarla ilgilenelim. Sonuçta onlar için de veri alıyoruz. Satıcıların listesi için ayrı bir sayfa yapalım.

Ürün uygulamamızı açalım ve içindeki sellers klasörüne girelim. Bu klasörde SellersList.jsx dosyasını oluşturalım. Burada useSelector, Link ve biraz sonra sellersSlice.js içinde kodunu yazacağımız selectAllSellers kullanacağız:

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

Ardından SellersList bileşenini oluşturalım. İçinde useSelector kancasını kullanarak tüm satıcıları alacağız, sonra map döngüsünde satıcı listesi için biçimlendirmeyi alacağız, her satıcı adı bizi onun sayfasına götüren bir bağlantı olacak. Son olarak da başlık ve oluşturulan liste ile biçimlendirmeyi döndüreceğiz:

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>Satıcılar:</h2>

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

Sonra sellersSlice.js dosyasına girelim ve productsSlice.js dosyasındaki seçicilere benzer şekilde, dosyanın en sonunda, reducer'ın dışa aktarımından sonra iki seçici oluşturalım:

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

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

Şimdi liste sayfası için bir rota tanımlamamız gerekiyor, bunun için App.jsx dosyasını açalım ve alt rotalar dizisi children içine bir nesne daha ekleyelim (SellersList bileşenini içe aktarmayı unutmayın):

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

Menüdeki 'Satıcılar' bağlantısının çalışması için, root.jsx dosyasına girelim (ne kadar zaman oldu... ) ve a etiketini NavLink öğesiyle değiştirelim:

<NavLink to="/sellers" end>
	Satıcılar
</NavLink>

Ve son olarak. Menümüzde aktif bağlantının vurgulanması ve hangi sayfada olduğumuzun anlaşılması için, index.css dosyasına bir stil ekleyelim:

nav a.active {
	color: purple;
}

Uygulamamızı çalıştıralım. Şimdi menüdeki 'Satıcılar' bağlantısına tıklayarak satıcılar sayfasına gidebiliriz. Tabii ki önce menüdeki 'Ürünler' bağlantısına tıklamalıyız, yoksa ürünlerimiz yüklenmez. Bir sonraki derste her satıcı için ayrı bir sayfa yapacağız ve Redux eğitiminin bu kısmını bitireceğiz.

Öğrenci uygulamanızı açın. Ders materyalini inceleyerek, teachers klasöründe TeachersList.jsx dosyasını oluşturun. Bu bileşeni kullanarak öğretmenlerin listesini göstereceksiniz. Gerekli bileşenleri ve kancaları içe aktarın.

TeachersList bileşeni için kod yazın, içinde tüm öğretmenleri alın ve bir teachersToRender öğretmen listesi yapın, bu listedeki her satırda soyadları ve baş harfleri görüntülensin, parantez içinde de verdikleri ders yazsın. Her Tam Ad (soyad ve baş harfler) birlikte her öğretmenin ayrı sayfasına götüren bir bağlantı olsun. Ardından bileşen kodunun sonunda başlık ve oluşturulan liste ile biçimlendirmeyi döndürün.

teachersSlice.js dosyasının sonunda, derste gösterildiği gibi selectAllTeachers ve selectTeacherById işlev-seçici çiftini oluşturun.

App.jsx dosyasında, öğretmenler sayfası için başka bir alt rota ekleyin.

root.jsx dosyasında, menüdeki 'Öğretmenler' için a etiketini derste gösterildiği gibi NavLink ile değiştirin. Menüdeki aktif bağlantının vurgulanması için, index.css dosyasına stiller ekleyerek bunu sağlayın.