Redux တွင်တောင်းဆိုမှုအခြေအနေကိုအသုံးပြုခြင်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် ထပ်ဆောင်း reducers များကိုအသုံးပြု၍ fetchProducts သည် တောင်းဆိုမှုအချိန်တွင် pending, fulfilled နှင့် rejected actions များကိုပေးပို့ပါက ကျွန်ုပ်တို့၏ application အား အဘယ်အရာလုပ်ဆောင်ရမည်ကိုဖော်ပြခဲ့သည်။ ယခုအခါ ကျွန်ုပ်တို့သည် ဒေတာများဆွဲယူနေသည့်အဆင့်ကို အသုံးပြုသူအားပြသနိုင်ပါပြီ။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါဝင်သော application ကိုဖွင့်ကြည့်ပြီး ၎င်းအတွင်းရှိ ProductsList.jsx ဖိုင်ကိုဖွင့်ကြပါစို့။ ပထမဆုံးအနေဖြင့် ကျွန်ုပ်တို့သည် ထုတ်ကုန်တစ်ခုစီအတွက် သီးသန့်ကော်ပြန် ProductCard တစ်ခုကိုဖန်တီးပါမည်။ ၎င်းကို import စာကြောင်းများနောက်တွင် ProductsList function မတိုင်မီ တန်းလုပ်ပါမည်။ Prop အဖြစ် ၎င်းအား 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 function ၏ကုဒ်အစတွင် နောက်ထပ်ကိန်းရှင်အနည်းငယ်၊ error နှင့် content ကိုထပ်မံသတ်မှတ်ပါမည်။ ပထမတစ်ခုသည် အမှားအတွက်ဖြစ်ပြီး၊ ဒုတိယတစ်ခုတွင် တောင်းဆိုမှုအခြေအနေပေါ်မူတည်၍ အကြောင်းအရာအသီးသီးကို ကျွန်ုပ်တို့ရေးသွင်းပါမည်။ const dataFetch = useRef(false) မတိုင်မီ ၎င်းကိုလုပ်ဆောင်ပါမည်။

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

ယခုအခါ ProductsList component ၏ return command မတိုင်မီတွင် အခြေအနေများပါဝင်သော ကုဒ်ဘလောက်တစ်ခုကိုရေးပါမည်။ အဆိုပါအခြေအနေများအရ content အတွင်းသို့ အခြေအနေပေါ်မူတည်၍ အကြောင်းအရာအသီးသီးကို သွင်းပါမည်။ ပထမဆုံးအနေဖြင့် 'in progress' အခြေအနေကိုဖော်ပြပါမည် - ကျွန်ုပ်တို့၏တောင်းဆိုမှု ပေးပို့ချိန်တွင် ဖြစ်သည်။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့သည် အသုံးပြုသူအား ဒေတာများဆွဲယူနေကြောင်း အသိပေးပါမည်။

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

ကျွန်ုပ်တို့၏ဆွဲယူမှု အောင်မြင်ပါက (ကျွန်ုပ်တို့က 'success' အဖြစ်သတ်မှတ်ခဲ့သည်)၊ ထို့နောက် ရရှိလာသော ထုတ်ကုန်များ၏စာရင်းကို ပြသရန်လိုအပ်သည်။ ၎င်းကို ProductCard component ကိုအသုံးပြု၍ map အတွင်းတွင်ပြသပြီး၊ ၎င်းအား prop အဖြစ် 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' ဖြစ်သည်။ ၎င်းကိုလည်းထည့်သွင်းပါမည်။ ဤနေရာတွင် အထက်တွင်ကျွန်ုပ်တို့ state မှ အမှားကိုရေးသွင်းထားသော error ကိန်းရှင်ကိုအသုံးပြုပါမည်။

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} နှင့်အစားထိုးပါမည်။

ကျွန်ုပ်တို့၏ application ကိုစတင်လိုက်ပါ၊ menu ထဲမှ 'Products' ကိုနှိပ်ပါ။ အားလုံးအလုပ်လုပ်နေပါသည်။ ကျွန်ုပ်တို့ ဆာဗာပေါ်တွင် သတ်မှတ်ထားသကဲ့သို့ ခန့်မှန်းခြေ 2 စက္ကန့်ခန့် ထုတ်ကုန်ထည့်သွင်းသည့် ဖောင်အောက်တွင် 'Products list loading ...' စာသားပေါ်နေပြီး၊ ထို့နောက် ထုတ်ကုန်စာရင်းပေါ်လာသည်ကို တွေ့မြင်ရပါမည်။