Сұраныс статусын 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 секунд (біз серверде орнатқанымыздай) өнім қосу пішімінің астында 'Өнімдер тізімі жүктелуде ...' жазуы тұр, содан кейін өнімдер тізімі пайда болады.

Студенттеріңізбен қолдануымызды ашыңыз. Оның ішіндегі StudentsList.jsx файлын ашыңыз. Онда жаңа компонент жасаңыз StudentCard. Оған dispStudents-тен кодты сабақта көрсетілгендей көшіріңіз.

StudentsList функциясында error және content айнымалыларын жасаңыз. content айнымалысына сұраныс статусына байланысты мазмұн тағайындаңыз. Қайтарылатын версткада ескі dispStudents-ты content-ке ауыстыруды ұмытпаңыз.