Sorğunun statusunun Redux-də tətbiqi

Əvvəlki dərslərdə biz əlavə reducerlər vasitəsilə tətbiqimizin nə etməli olduğunu təsvir etdik, əgər fetchProducts sorğu zamanı aksiyalar pending, fulfilled və rejected göndərirsə. İndi biz istifadəçiyə məlumatların yüklənməsinin hazırda hansı mərhələdə olduğunu göstərə bilərik.

Gəlin məhsullarla olan tətbiqimizi açaq, onda ProductsList.jsx faylını açaq. İlk olaraq, ayrıca bir komponent yaradacağıq ProductCard məhsul kartı üçün. Bunu dərhal import sətirlərindən sonra edək ProductsList funksiyasından əvvəl. Props kimi ona product ötürəcəyik:

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

İndi isə boş dəyirmi mötərizələrə return dispProducts-dən məhsul məlumatlarının göstərilməsi üçün bütün kodu köçürək:

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>
	)
}

Və ProductsList-də qalan sətri silək. O, artıq bizə lazım deyil:

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

İndi isə ProductsList funksiyasının kodunun əvvəlində daha bir neçə dəyişən təyin edək, error və content. Birincisi səhv üçün olacaq, ikincisinə isə sorğunun statusundan asılı olaraq müəyyən məzmun yazacağıq. Bunu const dataFetch = useRef(false)-dən əvvəl edək:

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

İndi komponentin return əmrindən əvvəl ProductsList şərtlərlə bir kod bloku yazaq, hansı ki, content-ə statusdan asılı olaraq müxtəlif məzmun daxil olunacaq. Əvvəlcə 'in progress' statusunu təsvir edəcəyik - sorğumuz göndərildikdə. Bu halda biz istifadəçiyə məlumatların yüklənməkdə olduğunu bildirəcəyik:

if (productStatus === 'in progress') {
	content = <p>Məhsul siyahısı yüklənir ...</p>
}

Əgər yükləməmiz uğurla baş veribsə (biz bunu 'success' kimi qeyd etmişdik), onda bizə alınan məhsulların siyahısını göstərmək lazımdır. Onu map ilə ProductCard komponenti vasitəsilə göstərək, ona props kimi product ötürək:

if (productStatus === 'in progress') {
	content = <p>Məhsul siyahısı yüklənir ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Və bizim olan son status - bu 'fail'-dır. Onu da əlavə edək. Burada error dəyişənindən istifadə edək, hansı ki, yuxarıda state-dən aldığımız səhvi ona yazmışdıq:

if (productStatus === 'in progress') {
	content = <p>Məhsul siyahısı yüklənir ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Və son addım olaraq biz return üçün olan kod blokunda köhnə {dispProducts}-i {content} ilə əvəz edəcəyik.

Gəlin tətbiqimizi işə salaq, menyuda 'Products'-ə klik edək. Hər şey işləyir. Görürük ki, təxminən 2 saniyə (biz serverdə təyin etdiyimiz kimi) məhsul əlavə etmə formasının altında 'Məhsul siyahısı yüklənir ...' yazısı görünür, sonra isə məhsulların siyahısı peyda olur.

Tələbələrlə olan tətbiqinizi açın. Onda StudentsList.jsx faylını açın. Onda yeni bir komponent yaradın StudentCard. Dərsdə göstərildiyi kimi, dispStudents-dən olan kodu ona köçürün.

StudentsList funksiyasında error və content dəyişənlərini yaradın. content dəyişəninə sorğunun statusundan asılı olaraq məzmun təyin edin. Qaytarılan verilişdə köhnə dispStudents-i content ilə əvəz etməyi unutmayın.