Redux හි ඉල්ලීමේ තත්ත්වය භාවිතා කිරීම

පසුගිය පාඩම් වලදී, අපි අතිරේක reducers භාවිතා කරමින් විස්තර කලෙමු, අපගේ යෙදුමට කුමක් කළ යුතුද යන්න, fetchProducts ඉල්ලීමක් යවන විට pending, fulfilled සහ rejected actions එළියට යවන්නේ නම්. දැන් අපට පරිශීලකයාට දත්ත පූරණය වීමේ කුමන අදියරේදී යනවාද යන්න පෙන්විය හැකිය.

අපි අපගේ නිෂ්පාදන සමඟ යෙදුම විවෘත කරමු, එහි ProductsList.jsx ගොනුව. පළමුව, අපි කරන්නේ වෙනම අංගයක් නිර්මාණය කිරීමයි නිෂ්පාදන කාඩ්පත සඳහා ProductCard. අපි මෙය කරන්නේ ආයාත කිරීම් වලට පසුව, කාර්යයට පෙර ProductsList. props ලෙස අපි එයට සම්පූර්ණයෙන්ම යොමු කරමු 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 තවත් විචල්‍ය කිහිපයක්, error සහ content. පළමුවැන්න දෝෂය සඳහා වනු ඇත, දෙවැන්න අපි ලියන්නේ ඉල්ලීමේ තත්ත්වය අනුව අන්තර්ගතය යම් යම් අයුරින්. මෙය කරමු const dataFetch = useRef(false) ට පෙර:

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

දැන් අංගයේ return විධානයට පෙර ProductsList කොන්දේසි සහිත කේත ගොනුව ලියන්න, එමගින් content වලට තත්ත්වය අනුව අන්තර්ගතය ඇතුළත් වේ. පළමුව අපි විස්තර කරන්නේ තත්ත්වය 'in progress' - අපගේ ඉල්ලීම යවන විට. මෙම අවස්ථාවේ දී අපි පරිශීලකයාට දන්වන්නෙමු, දත්ත පූරණය වෙමින් පවතින බව:

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

අපගේ පූරණය සාර්ථකව අවසන් වුවහොත් (අපි මෙය දක්වා ඇත්තේ 'success' ලෙස), එවිට අපට පෙන්විය යුත්තේ ලැබුණු නිෂ්පාදන ලැයිස්තුවයි. එය පෙන්වමු map භාවිතයෙන් ProductCard අංගය ඔස්සේ, එයට props ලෙස යොමු කරමු 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, අප ඉහතින් ලියා ඇති state වලින් දෝෂය:

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 ...', පසුව නිෂ්පාදන ලැයිස්තුව දිස්වේ.