Pagina del venditore in Redux

Manca poco. In questa lezione facciamo l'ultima cosa - aggiungiamo alla nostra applicazione una pagina separata per ogni venditore. Qui ci saranno solo azioni a te già familiari. Iniziamo.

Apriamo la nostra applicazione con i prodotti, e in essa la cartella sellers. Creiamo in questa cartella il file SellerPage.jsx. Ora iniziamo a scrivere il codice SellerPage per il nostro componente:

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

Per prima cosa otteniamo l'id del venditore e tramite esso troviamo l'oggetto del venditore necessario nello slice:

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

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

Poi più sotto nel codice per SellerPage dopo aver ottenuto il venditore, otterremo tutti i prodotti, e poi ne selezioneremo solo quelli che sono stati pubblicati da questo venditore:

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

E poi dai nomi dei prodotti selezionati creeremo una lista usando map. Inoltre ogni nome prodotto in questa lista sarà un link alla pagina di quel prodotto:

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

E alla fine del codice per SellerPage restituiamo il markup: un titolo con il nome del venditore e la lista dei prodotti che questo venditore ha pubblicato:

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

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

Naturalmente ci serve anche una route per la pagina del venditore. Apriamo il file App.jsx e aggiungiamola come ultima tra le route figlie:

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

Non dimenticare di importare gli hook e i componenti necessari in SellersPage.jsx e App.jsx.

Avviamo la nostra applicazione, carichiamo i prodotti, e poi nel menu a sinistra clicchiamo sul link 'Sellers'. Ora possiamo andare sulla pagina di qualsiasi venditore, cliccando sul suo nome, e poi sulla sua pagina vedere tutti i suoi prodotti. E, cliccando su uno qualsiasi dei suoi prodotti, andremo sulla pagina di quel prodotto.

Per ora è tutto. Abbiamo studiato le basi di Redux per creare un'applicazione e anche un po' più a fondo. Abbiamo familiarizzato con vari strumenti utili. Vi auguro buona fortuna nella creazione delle vostre applicazioni Redux!