Reduxда сўров статусини қўллаш

Олдинги дарсларда биз қўшимча редьюсерлар ёрдамида иловамизга нима қилиш кераклигини тасвирладик, агар fetchProducts сўров жараёнида экшенлар pending, fulfilled ва rejected ни юборса. Энди биз фойдаланувчига маълумотлар юкланмоқда бўлган боскични кўрсатишимиз мумкин.

Келинг, маҳсулотлар билан иловамизни ochамиз, унда ProductsList.jsx файлини ochамиз. Биринчи бўлиб, биз маҳсулот карточкаси учун алохида компонент яратамиз ProductCard. Буни импорт сатрларидан кейин darhol ProductsList функсияси олдида қиламиз. Пропс сифатида уңга product ни узатамиз:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return ()
}

Энди бўш текис қавсларга return dispProducts дан маҳсулот маълумотларини кўрсатиш учун барча кодни кўчирамиз:

products/ProductsList.jsxconst 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 да қолган сатрни олиб ташлаймиз. У энди бизга керак эмас:

products/ProductsList.jsxconst dispProducts = products.map((product) => ())

Энди ProductsList функсияси коди бошланишида янги ўзгарuvчилар, error ва content ни киритамиз. Биринчиси хato учун бўлади, иккинчисига биз сўров статусига қараб турли контентни ёзамиз. Буни const dataFetch = useRef(false) олдида қиламиз:

products/ProductsList.jsxconst error = useSelector((state) => state.products.error)
let content

Энди ProductsList компонентининг return буйруги олдида шартлар билан код блокини ёзамиз, унда content га статусга боғлиқ холда турли контент киритилади. Биринчи бўлиб биз 'in progress' статусини тасвирлаймиз - сўровимиз юборилган пайтида. Бунда биз фойдаланувчига маълумотлар юкланмоқда деб хабар берамиз:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</p>
}

Агар юклаш муваффақиятли амалга ошса (биз буни 'success' деб белгилаганмиз), у ҳолда биз олинган маҳсулотлар рўйхатини кўрсатишимиз керак. Уни map орқали ProductCard компоненти ёрдамида кўрсатамиз, уңга пропс сифатида product ни узатамиз:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
}

Ва бизда мавжуд бўлган охирги статус - бу 'fail'. Уни ҳам қўшамиз. Бунда биз error ўзгарuvчисини ишлатамиз, унга биз юқорида стейтдан хatони ёзган эдик:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</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 ...' ёзиви осилиб турибди, сўнгра маҳсулотлар рўйхати пайдо бўлади.