Seznam prodajalcev v Redux

V prejšnjih lekcijah smo zaključili z osnovno vsebino. Zdaj s pomočjo thunk dobimo seznam produktov s strežnika in jih lahko shranimo na strežnik. Poglejmo si prodajalce. Navsezadnje dobimo podatke tudi zanje. Naredimo ločeno stran s seznamom prodajalcev.

Odprimo našo aplikacijo s produkti, v njej pa mapo sellers. V tej mapi ustvarimo datoteko SellersList.jsx. Tukaj bomo uporabili useSelector, Link in selectAllSellers, katere kodo bomo napisali v sellersSlice.js malo kasneje:

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

Nato ustvarimo sam SellersList. V njem bomo pridobili vse prodajalce s pomočjo kavlja useSelector, nato pa pridobili prikaz seznama prodajalcev v zanki map, pri čemer bo vsako ime prodajalca vodilo na njegovo stran. Na koncu vrnemo prikaz z naslovom in pridobljenim seznamom:

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>Sellers:</h2>

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

Nato pojdimo v datoteko sellersSlice.js in po analogiji z selektorji v productsSlice.js ustvarimo na samem koncu datoteke dva selektorja po izvozu reducerja:

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

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

Zdaj moramo določiti pot za stran s seznamom, za to odprimo datoteko App.jsx in v matriko podrejenih poti children dodajmo še en objekt (ne pozabite uvoziti komponente SellersList):

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

Da bo naša povezava 'Sellers' v meniju delovala, pojdimo v datoteko root.jsx (kako dolgo je že minilo ... ) in zamenjajmo oznako a z elementom NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

In še zadnje. Da bi se v našem meniju označila aktivna povezava in bi bilo razvidno, na kateri strani smo, dodajmo slog v index.css:

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

Zaženimo našo aplikacijo. Zdaj lahko greste na stran s prodajalci s klikom na 'Sellers' v meniju. Pred tem je seveda treba klikniti na 'Products' v meniju, sicer se naši produkti ne bodo naložili. V naslednji lekciji bomo naredili stran za vsakega prodajalca in s tem zaključili študij tega učbenika o Redux.