Faqja e Shitësit në Redux

Mbetet pak për të bërë. Le të bëjmë gjënë e fundit në këtë orë mësimi - le të shtojmë në aplikacionin tonë një faqe të veçantë për çdo shitës. Këtu do të ketë vetëm veprime tashmë të njohura për ju. Le të fillojmë.

Le të hapim aplikacionin tonë me produktet, dhe në të dosjen sellers. Le të krijojmë në këtë dosje fajllin SellerPage.jsx. Tani le të fillojmë të shkruajmë kodin SellerPage për komponentin tonë:

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

Për fillim le të marrim id e shitësit dhe me të le të gjejmë objektin e shitësit të duhur në slice:

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

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

Më pas më poshtë në kod për SellerPage pasi të kemi marrë shitësin, do të marrim të gjitha produktet, dhe pastaj do të zgjedhim prej tyre vetëm ato, që janë postuar nga ky shitës:

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

Dhe më pas nga emrat e produkteve të zgjedhur do të formojmë një listë duke përdorur map. Ku çdo emër produkti në këtë listë do të jetë një link drejt faqes së atij produkti:

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

Dhe në fund të kodit për SellerPage le të kthejmë layout-in: titullin me emrin e shitësit dhe listën e produkteve, që i ka postuar ky shitës:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Shitësi: {seller.name}</h2>

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

Patjetër na duhet edhe një rrugë për faqen e shitësit. Le të hapim fajllin App.jsx dhe ta shtojmë atë sist fundit te rrugët fëmijë:

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

Mos harroni të importoni hooks-at e nevojshëm dhe komponentët në SellersPage.jsx dhe App.jsx.

Le të startojmë aplikacionin tonë, le të ngarkojmë produktet, e më pas në menunë majtas të klikojmë te linku 'Sellers'. Tani ne mundemi të hyjmë në faqen e çdo shitësi, duke klikuar te emri i tij, e më pas në faqen e tij të shohim të gjitha produktet e tij. Dhe, duke klikuar te çdo produkt i tij, do të hyjmë në faqen e atij produkti.

Kjo ishte e tëra për tani. Ne kemi mësuar bazat e Redux për krijimin e aplikacionit dhe madje pak më thellë. Jemi njohur me instrumente të ndryshme të dobishme. Ju uroj fat në krijimin e aplikacioneve tuaja Redux!