მოთხოვნის სტატუსის გამოყენება Redux-ში

წინა გაკვეთილებზე ჩვენ დამატებითი რედიუსერების დახმარებით აღვწერეთ, რა უნდა გააკეთოს ჩვენმა აპლიკაციამ, თუ fetchProducts აგზავნის მოთხოვნის დროს ექშენებს pending, fulfilled და rejected. ახლა ჩვენ შეგვიძლია მოვახდინოთ მომხმარებლისთვის ჩვენება, რა სტადიაზე არის მონაცემების ჩატვირთვა.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით, და მასში ფაილი ProductsList.jsx. პირველი, რასაც ჩვენ გავაკეთებთ, ეს არის ცალკე კომპონენტის შექმნა პროდუქტის ბარათისთვის ProductCard. გავაკეთოთ ეს იმპორტების სტრიქონების შემდეგ, ფუნქციის ProductsList წინ. პროფსად გადავცეთ მას product:

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

ახლა კი ცარიელ მრგვალ ფრჩხილებში return გადმოვიტანოთ მთელი კოდი პროდუქტის მონაცემების ჩვენებისთვის dispProducts-დან:

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

და ProductsList-ში ამოვიღოთ დარჩენილი სტრიქონი კოდი. ის ჩვენ აღარ გვჭირდება:

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

ახლა კი ფუნქციის ProductsList კოდის დასაწყისში შევქმნათ კიდევ რამდენიმე ცვლადი, error და content. პირველი ჩვენთვის იქნება შეცდომისთვის, მეორეში ჩვენ ჩავწერთ ამა თუ იმ შინაარსს მოთხოვნის სტატუსის მიხედვით. გავაკეთოთ ეს const dataFetch = useRef(false)-მდე:

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

ახლა კომპონენტის ProductsList return-ის წინ დავწეროთ კოდის ბლოკი პირობებით, რომლის მიხედვითაც content-ში ჩაიწერება ამა თუ იმ შინაარსი სტატუსის მიხედვით. პირველად აღვწერთ სტატუსს 'in progress' - როდესაც ჩვენი მოთხოვნა გაგზავნილია. ამ შემთხვევაში ჩვენ ვაცნობებთ მომხმარებელს, რომ მიმდინარეობს მონაცემების ჩატვირთვა:

if (productStatus === 'in progress') {
	content = <p>პროდუქტების სია ჩატვირთვის პროცესშია ...</p>
}

თუ ჩვენი ჩატვირთვა წარმატებით დასრულდა (ჩვენ აღვნიშნეთ ეს როგორც 'success'), მაშინ ჩვენ უნდა გამოვიტანოთ მიღებული პროდუქტების სია. გამოვიტანოთ ის map-ის მეშვეობით ProductCard კომპონენტის დახმარებით, რომელსაც პროფსად გადავცემთ product-ს:

if (productStatus === 'in progress') {
	content = <p>პროდუქტების სია ჩატვირთვის პროცესშია ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

და ბოლო სტატუსი, რაც ჩვენ გვაქვს - ეს არის 'fail'. დავამატოთ ისიც. გამოვიყენოთ აქ ცვლადი error, რომელშიც ჩვენ ზემოთ ჩავწერეთ შეცდომა სტეიტიდან:

if (productStatus === 'in progress') {
	content = <p>პროდუქტების სია ჩატვირთვის პროცესშია ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

და ბოლო ნაბიჯად ჩვენ return-ისთვის განკუთვნილ კოდის ბლოკში შევცვლით ძველ {dispProducts}-ს {content}-ზე.

გავუშვათ ჩვენი აპლიკაცია, მენიუში დავაკლიკოთ 'Products'-ს. ყველაფერი მუშაობს. ვხედავთ, რომ დაახლოებით 2 წამის განმავლობაში (როგორც ჩვენ დავაყენეთ სერვერზე) ჩვენთვის ფორმის დამატების ქვეშ კიდია წარწერა 'Products list loading ...', შემდეგ კი ჩნდება პროდუქტების სია.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გახსენით მასში ფაილი StudentsList.jsx. შექმენით მასში ახალი კომპონენტი StudentCard. გადმოიტანეთ მასში კოდი dispStudents-დან, როგორც ეს ნაჩვენებია გაკვეთილზე.

შექმენით ფუნქციაში StudentsList ცვლადები error და content. მიანიჭეთ ცვლადს content შინაარსი მოთხოვნის სტატუსის მიხედვით. არ დაგავიწყდეთ შეცვალოთ დაბრუნებულ ვერსტკაში ძველი dispStudents content-ზე.