Ukurasa wa Bidhaa katika Redux

Katika somo hili tutatengeneza ukurasa tofauti wa kuonyesha taarifa kuhusu bidhaa mahususi.

Fungua programu yetu ya bidhaa na kwenye folda products unda faili ProductPage.jsx. Kama unavyokumbuka, kila bidhaa yetu ina kitambulisho cha kipekee. Kutokana na kitambulisho hiki cha kipekee tutaweza kutengeneza URL ya kipekee ya ukurasa wa kila bidhaa. Kwa mila itaonekana kama: /products/id123. Na kitambulisho kitakuwemo kwenye sehemu yake inayobadilika (sisi tutajishughulisha na njia baadaye kidogo).

Basi, wacha katika ProductPage.jsx tuunde kiunganishi tupu ProductPage:

products/ProductPage.jsxexport const ProductPage = () => {}

Jambo la kwanza tutakalofanya hapa - tutatumia ndoano useParams, ili kuvuta sehemu inayobadilika ya URL kwa ukurasa wa bidhaa, ambayo tupo:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

Ifuatayo kwa kutumia kitambulisho kilichopatikana tutatafuta bidhaa inayohitajika kwenye kipande products kwenye kuhifadhi, tukitumia ndoano unayojua tayari useSelector:

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Tusisahau kuagiza ndoano zote mbili kwenye faili:

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Iwapo bidhaa tunayohitaji haitakuwepo (kwa mfano, mtumiaji aliandika anuani isiyo sahihi), basi tutaonyesha taarifa kuhusu hilo kwenye skrini. Katika hatua hii kanuni za kiunganishi ProductPage inapaswa kuonekana hivi:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

  const product = useSelector((state) =>
    state.products.find((product) => product.id === productId)
  )

  if (!product) {
    return <p>Hakuna bidhaa kama hiyo</p>
  }
}

Na inabakia tu kuonyesha data zilizopatikana za bidhaa kwenye muundo:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Maelezo: {product.desc}</p>
    <p>Bei: {product.price}</p>
    <p>Kiasi:{product.amount}</p>
  </div>
)