Redux'ta İstek Durumunu Kullanma

Önceki derslerde, ek reducer'lar kullanarak fetchProducts bir istek gönderdiğinde pending, fulfilled ve rejected action'ları gönderirse uygulamamızın ne yapması gerektiğini tanımladık. Artık kullanıcıya veri yüklemenin şu anda hangi aşamada olduğunu gösterebiliriz.

Hadi ürün uygulamamızı açalım ve içindeki ProductsList.jsx dosyasını açalım. İlk olarak, ürün kartı için ayrı bir ProductCard bileşeni oluşturacağız. Bunu, import satırlarından hemen sonra, ProductsList fonksiyonunun önünde yapacağız. Prop olarak ona product ileteceğiz:

const ProductCard = ({ product }) => {
	return ()
}

Şimdi boş yuvarlak parantezlerin return içine, dispProducts içindeki ürün verilerini görüntülemek için tüm kodu taşıyalım:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

Ve ProductsList içinde kalan kod satırını kaldıralım. Artık buna ihtiyacımız yok:

const dispProducts = products.map((product) => ())

Şimdi ProductsList fonksiyonunun kodunun başında, birkaç değişken daha tanımlayalım, error ve content. Birincisi hata içindir, ikincisine istek durumuna bağlı olarak farklı içerikler yazacağız. Bunu const dataFetch = useRef(false) öncesinde yapalım:

const error = useSelector((state) => state.products.error)
let content

Şimdi ProductsList bileşeninin return komutundan önce, content içine duruma bağlı olarak farklı içeriklerin girileceği koşulları içeren bir kod bloğu yazalım. İlk olarak 'in progress' durumunu ele alalım - isteğimizin gönderildiği durum. Bu durumda kullanıcıya verilerin yüklendiğini bildireceğiz:

if (productStatus === 'in progress') {
	content = <p>Ürün listesi yükleniyor ...</p>
}

Eğer yükleme işlemi başarılı olduysa (bunu 'success' olarak belirtmiştik), o zaman alınan ürünlerin listesini göstermemiz gerekiyor. Bunu map içinde, prop olarak product ileten ProductCard bileşeni kullanarak göstereceğiz:

if (productStatus === 'in progress') {
	content = <p>Ürün listesi yükleniyor ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Ve sahip olduğumuz son durum - bu 'fail'. Bunu da ekleyelim. Burada yukarıda state'ten hatayı yazdığımız error değişkenini kullanacağız:

if (productStatus === 'in progress') {
	content = <p>Ürün listesi yükleniyor ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Ve son adım olarak, return için olan kod bloğunda eski {dispProducts} ifadesini {content} ile değiştireceğiz.

Uygulamamızı çalıştıralım, menüden 'Products''a tıklayalım. Her şey çalışıyor. Görüyoruz ki, yaklaşık 2 saniye (sunucuda ayarladığımız gibi) ürün ekleme formunun altında 'Products list loading ...' yazısı görünüyor, ardından ürün listesi beliriyor.

Öğrenci uygulamanızı açın. İçindeki StudentsList.jsx dosyasını açın. İçinde yeni bir StudentCard bileşeni oluşturun. dispStudents içindeki kodu, derste gösterildiği gibi bileşene taşıyın.

StudentsList fonksiyonunda error ve content değişkenlerini oluşturun. content değişkenine, istek durumuna bağlı olarak içerik atayın. Döndürülen yapıda eski dispStudents ifadesini content ile değiştirmeyi unutmayın.