Müüjate loend Reduxis

Eelmistel tundidel lõpetasime põhiteemaga. Nüüd saame thunki abil serverist toodete nimekirja ja saame salvestada serverisse uue toote. Tegeleme nüüd müüjatega. Me saame ju ka nende kohta andmeid. Teeme eraldi lehekülje müüjate nimekirjaga.

Avame oma tooterakenduse ja selles kausta sellers. Loome selles kaustas faili SellersList.jsx. Siin kasutame useSelector, Link ja selectAllSellers, mille koodi me kirjutame failis sellersSlice.js veidi hiljem:

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

Seejärel loome SellersList komponendi. Selles saame kõik müüjad hooki useSelector abil, seejärel saame müüjate loendi jaoks märgenduse tsüklis map, kusjuures iga müüja nimi viib tema leheküljele. Ja lõpus tagastame märgenduse koos pealkirja ja saadud loendiga:

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>Müüjad:</h2>

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

Seejärel läheme faili sellersSlice.js ja analoogia põhjal selektoritega failis productsSlice.js loome faili lõpus redutseri eksportimise järel kaks selektorit:

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

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

Nüüd peame määrama marsruudi loendi lehekülje jaoks, selleks avame faili App.jsx ja alam-marsruutide massiivi children lisame veel ühe objekti (ärge unustage importida komponenti SellersList):

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

Et meie link 'Müüjad' menüüs hakkaks tööle, lähme faili root.jsx (kui kaua see on olnud ... ) ja asendame sildi a elemendiga NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Müüjad
</NavLink>

Ja viimane. Et meie menüüs aktiivne link esile tõusta ja oleks arusaadav, millisel lehel me oleme, lisame stiili faili index.css:

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

Käivitame oma rakenduse. Nüüd saame minna müüjate lehele, klõpsates 'Müüjad' menüüs. Loomulikult tuleb enne klõpsata menüüs 'Tooted', muidu meie tooted ei lae. Järgmisel tunni teeme iga müüja jaoks lehekülje ja sellega lõpetame õpiku õppimise Reduxi kohta.