Lista e Shitësve në Redux

Në mësimet e mëparshme kemi përfunduar materialin bazë. Tani me ndihmën e thunk ne marrim listën e produkteve nga serveri dhe mund t'i ruajmë në server produktet e reja. Le të merremi me shitësit. Në fund të fundit, ne marrim të dhëna edhe për ta. Le të krijojmë një faqe të veçantë me listën e shitësve.

Le të hapim aplikacionin tonë të produkteve, dhe në të dosjen sellers. Le të krijojmë në këtë dosje fajllin SellersList.jsx. Këtu do të përdorim useSelector, Link dhe selectAllSellers, kodin e të cilit ne do ta shkruajmë në sellersSlice.js pak më vonë:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Më pas le të krijojmë vetë SellersList. Në të ne do të marrim të gjithë shitësit me ndihmën e hook useSelector, pastaj do të marrim pjesën vizuale për listën e shitësve në ciklin map, ku çdo emër i shitësit do të na çojë në faqen e tij. Dhe në fund do të kthejmë pjesën vizuale me titullin dhe listën e marrë:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Shitësit:</h2>

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

Më pas le të shkojmë në fajllin sellersSlice.js dhe sipas analogjisë me selektorët në productsSlice.js le të krijojmë në fund të fajllit dy selektorë pas eksportit të reducer:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Tani na duhet të përshkruajmë rrugën për faqen me listën, për këtë le të hapim fajllin App.jsx dhe në grupin e rrugëve të fëmijëve children le të shtojmë një objekt tjetër (mos harroni të importoni komponentin SellersList):

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

Që lidhja jonë 'Shitësit' në menu të fillojë të funksionojë, le të shkojmë në fajllin root.jsx (sa kohë që ka kaluar... ) dhe të zëvendësojmë tagun a me elementin NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Shitësit
</NavLink>

Dhe e fundit. Që në menunë tonë të theksohet lidhja aktive, dhe të jetë e kuptueshme në cilën faqe jemi, ne do të shtojmë stil në index.css:

index.cssnav a.active {
  color: purple;
}

Le të nisim aplikacionin tonë. Tani ne mund të shkojmë në faqen me shitësit, duke klikuar në 'Shitësit' në menu. Para së gjithash, është e nevojshme të klikoni në 'Produktet' në menu, përndryshe produktet tanë nuk do të ngarkohen. Në mësimin e ardhshëm ne do të krijojmë një faqe për çdo shitës dhe me këtë do të përfundojmë studimin e këtij tutoriali për Redux.