Redux да сотилувчи саҳифаси

Иш ярим тайёр. Келинг, бу дарсда oxирги нарсани қилайлик - бизнинг иловамизга ҳар бир сотилувчи учун алоҳида саҳифа қўшамиз. Бу ерда фақат сизга таниш бўлган амаллар бўлади. Бошлаймиз.

Махсулотларимиз бўлган илованимизни очайлик, ундаги sellers папкасини очийлик. Ушбу папкада SellerPage.jsx файлини яратамиз. Энди компонентимиз учун SellerPage кодини ёза бошлаймиз:

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

Бошлаш учун сотилувчининг id сини оламиз ва унга кўра слайсда керакли сотилувчи объектини топамиз:

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

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

Кейин SellerPage учун кодда, сотилувчини олганимиздан сўнг биз барча маҳсулотларни оламиз, сўнгра улардан фақат ўша сотилувчи томонидан қўйилганларини танлаймиз:

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

Кейин танланган маҳсулотлар номларидан map ёрдамида рўйхат яратамиз. Ҳатто ушбу рўйхатдаги ҳар бир маҳсулот номи ўша маҳсулот саҳифасига ҳавола бўлади:

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

Ва SellerPage учун кодни якунида версткани қайтарамиз: сотилувчи номи билан сарлавҳа ва ушбу сотилувчи чиқарган маҳсулотлар рўйхати:

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

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

Албатта бизга сотилувчи саҳифаси учун йўлналиш ҳам керак. App.jsx файлини очиб, уни болалар йўлналишларининг охирига қўшамиз:

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

SellersPage.jsx ва App.jsx файлларига керакли хуклар ва компонентларни импорт қилишни унутманг.

Илованимизни ишга туширамиз, маҳсулотларни юклаймиз, сўнгра чапдаги менюда 'Sellers' ҳаволасини босамиз. Энди биз унинг номини босиб, ҳар қандай сотилувчининг саҳифасига киришимиз мумкин, сўнгра унинг саҳифасида уннинг барча маҳсулотларини кўрамиз. Ва, унинг ҳар қандай маҳсулотини босиб, ўша маҳсулот саҳифасига кирамиз.

Бу ерда ҳозирча барчаси тугалди. Биз илова яратиш учун Redux асосларини ўргандик ва ҳатто бироз чуқурроқ. Турли фойдали асбоблар билан танишдик. Сизнинг Redux-иловаларингизни яратишингизда омad тилаймиз!