Gestione dei Dati in Redux

Nella sezione precedente abbiamo implementato lo schema base di funzionamento di Redux e ora conosci i principi fondamentali del funzionamento di un'applicazione Redux. Nelle prossime lezioni inizieremo ad aggiungere funzionalità alla nostra applicazione di prodotti e lavoreremo con i dati.

Poiché l'applicazione si arricchirà di nuovi componenti e route, facciamo una cosa con il routing. Apri l'applicazione dei prodotti, poi il file root.jsx. Importa al suo interno il componente Outlet, rimuovendo le righe con l'importazione di ProductsList e NewProductForm:

app/root.jsximport { Outlet } from 'react-router-dom'

Ora il componente Root verrà visualizzato nel percorso radice '/', mentre tutti gli altri componenti nei percorsi figli in Outlet. Per fare ciò, modifichiamo leggermente il markup del div #main-page per il componente Root:

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

Qui inseriremo Outlet al posto dei componenti NewProductForm e ProductsList:

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <Outlet />
</div>

Ora visualizzeremo il form per l'aggiunta dei prodotti in ProductsList. Apriamo il file con questo componente e aggiungiamo l'import del form:

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

E ora aggiungiamo il componente con il form proprio prima della lista dei prodotti. Ora il nostro markup sarà così:

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Products</h2>
      {dispProducts}
    </div>
  </div>
)

Aggiungiamo lo stile per la classe products-list in index.css:

index.css.products-list {
  display: flex;
  flex-direction: column;
}

Ci resta solo da apportare modifiche al componente principale App. Apriamo App.jsx e importiamo al suo interno il componente ProductsList:

App.jsximport { ProductsList } from './parts/products/ProductsList'

Poi per la nostra unica route, che è quella radice, aggiungiamo la proprietà children:

App.jsxconst router = createBrowserRouter([
  { path: '/', element: <Root />, children: [] },
])

E specifichiamo come valore di questa proprietà la prima route figlia. Come percorso impostiamo 'products'. Ora a questo indirizzo verrà visualizzata la nostra lista dei prodotti ProductsList:

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

Avviamo la nostra applicazione e assicuriamoci di non aver rotto nulla. Alla radice '/' vediamo solo il titolo. Mentre il form e la lista prodotti sono nascosti all'indirizzo '/products'.