Redux-da Sotuvchi Sahifasi

Isl qolgan narsa juda oz. Keling, ushbu darsda oxirgi narsani qilaylik - ilovamizga har bir sotuvchi uchun alohida sahifa qo'shamiz. Bu yerda sizga tanish bo'lgan harakatlar mavjud. Keling, boshlaymiz.

Mahsulotlar bilan ilovamizni ochamiz, unda sellers papkasini ochamiz. Ushbu papkada SellerPage.jsx faylini yaratamiz. Endi komponentimiz uchun SellerPage kodini yozishni boshlaymiz:

sellers/SellersPage.jsxexport const SellerPage = () => {}

Boshlash uchun sotuvchi id sini olamiz va unga ko'ra slice ichida kerakli sotuvchi obyektini topamiz:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Keyin, SellerPage uchun kodda sotuvchini olganimizdan keyin, barcha mahsulotlarni olamiz, so'ngra ularning ichidan faqat ushbu sotuvchi tomonidan joylashtirilganlarini tanlaymiz:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

Keyin esa tanlangan mahsulotlarning nomlaridan map yordamida ro'yxat yaratamiz. Bundan tashqari, ushbu ro'yxatdagi har bir mahsulot nomi o'sha mahsulot sahifasiga havola bo'ladi:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

Va SellerPage uchun kodning oxirida verstkani qaytaramiz: sotuvchi nomi bilan sarlavha va ushbu sotuvchi tomonidan joylashtirilgan mahsulotlar ro'yxati:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Sotuvchi: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

Albatta, bizga sotuvchi sahifasi uchun marshrut ham kerak. App.jsx faylini ochamiz va uni oxirgi bola marshrut sifatida qo'shamiz:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

SellersPage.jsx va App.jsx fayllariga kerakli huklar va komponentlarni import qilishni unutmang.

Ilovamizni ishga tushiramiz, mahsulotlarni yuklab olamiz, so'ngra chap menuda 'Sellers' havolasini bosamiz. Endi biz har qanday sotuvchi sahifasiga uning nomini bosish orqali kirishimiz mumkin, so'ngra uning sahifasida uning barcha mahsulotlarini ko'rishimiz mumkin. Va, uning har qanday mahsulotini bosish orqali, o'sha mahsulot sahifasiga kiramiz.

Hozircha hammasi shu. Biz ilova yaratish uchun Redux asoslarini o'rgandik va hatto biroz chuqurroq ham. Turli foydali asboblar bilan tanishdik. Sizning Redux-ilovalaringizni yaratishda omad tilayman!