Prodavačeva stranica u Redux-u

Malo je ostalo. Hajde da na ovom času uradimo poslednju stvar - dodajmo u našu aplikaciju posebnu stranicu za svakog prodavca. Ovde će biti samo već vama poznate radnje. Krenimo.

Otvorimo našu aplikaciju sa proizvodima, a u njoj folder sellers. Napravićemo u ovom folderu fajl SellerPage.jsx. Sada počećemo da pišemo kod SellerPage za naš komponent:

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

Za početak ćemo dobiti id prodavca i po njemu pronaći objekat traženog prodavca u slice-u:

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

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

Zatim niže u kodu za SellerPage posle dobijanja prodavca dobićemo sve proizvode, a zatim izabrati iz njih samo one, koje je postavio ovaj prodavac:

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

A zatim ćemo od naziva izabranih proizvoda formirati listu pomoću map. Pored toga svaki naziv proizvoda u ovoj listi biće link na stranicu tog proizvoda:

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

I na kraju koda za SellerPage vraćamo verstku: naslov sa imenom prodavca i listu proizvoda, koje je postavio ovaj prodavac:

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

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

Naravno da nam je takođe potreban route za stranicu prodavca. Otvorimo fajl App.jsx i dodajmo ga poslednjim podređenim rutama:

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

Ne zaboravite da importujete potrebne hukove i komponente u SellersPage.jsx i App.jsx.

Pokrenimo našu aplikaciju, učitaćemo proizvode, a zatim u meniju levo kliknimo na link 'Prodavci'. Sada možemo otići na stranicu bilo kog prodavca, klikom na njegovo ime, a zatim na njegovoj stranici videti sve njegove proizvode. A, klikom na bilo koji od njegovih proizvoda, otići ćemo na stranicu sa tim proizvodom.

Za sada je to sve. Mi smo proučili osnove Redux-a za kreiranje aplikacije i čak malo dublje. Upoznavali smo se sa različitim korisnim alatima. Želim vam puno sreće u kreiranju vaših Redux aplikacija!