Էջը Product-ի համար Redux-ում

Այս դասին մենք կստեղծենք առանձին էջ կոնկրետ արտադրանքի մասին տեղեկատվություն ցուցադրելու համար:

Բացենք մեր արտադրանքներով հավելվածը և products պանակում ստեղծենք ProductPage.jsx ֆայլը: Ինչպես հիշում եք, մեր յուրաքանչյուր արտադրանք ունի եզակի id: Շնորհիվ այս id-ի մենք կկարողանանք ստեղծել յուրաքանչյուր արտադրանքի համար եզակի URL հասցե: Ավանդաբար այն կունենա հետևյալ տեսքը՝ /products/id123: Եվ id-ն կպարունակվի նրա դինամիկ մասում (մենք հենց ինքնուրույն route-ով կզբաղվենք որոշ չափով ավելի ուշ):

Այսպիսով, եկեք ProductPage.jsx-ում ստեղծենք դատարկ ProductPage կոմպոնենտը:

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

Առաջին բանը, որ մենք կանենք այստեղ, օգտագործելու ենք useParams hook-ը, որպեսզի դուրս բերենք էջի URL-ի դինամիկ մասը, որի վրա մենք գտնվում ենք:

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

Հաջորդը, ըստ ստացված id-ի, մենք կփնտրենք անհրաժեշտ արտադրանքը products slice-ում store-ում, օգտագործելով մեզ արդեն ծանոթ useSelector hook-ը:

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

Մի մոռանանք ներմուծել երկու hook-ներն էլ ֆայլում:

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

Եթե անհրաժեշտ արտադրանքը չգտնվի (օրինակ, օգտատերը մուտքագրել է սխալ հասցե), ապա մենք դրա մասին տեղեկատվություն կցուցադրենք էկրանին: Այս քայլին ProductPage կոմպոնենտի համար կոդը պետք է այսպիսի տեսք ունենա:

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>No such product</p>
  }
}

Եվ մեզ մնում է միայն արտադրանքի ստացված տվյալները ցուցադրել վերստում:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Description: {product.desc}</p>
    <p>Price: {product.price}</p>
    <p>Amount:{product.amount}</p>
  </div>
)