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:

import { 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:

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

Qui inseriremo Outlet al posto dei componenti NewProductForm e ProductsList:

<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:

import { NewProductForm } from './NewProductForm'

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

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

Aggiungiamo lo stile per la classe products-list in 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:

import { ProductsList } from './parts/products/ProductsList'

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

const 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:

children: [
	{
		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'.

Apri la tua applicazione con gli studenti. Nel file root.jsx sostituisci i componenti StudentsList e NewStudentForm con Outlet.

Fai in modo che ora il form per l'aggiunta di uno studente venga visualizzato nel tuo StudentsList.

Apporta le modifiche al tuo componente principale App. Aggiungi alla route radice una figlia, con percorso '/students', in cui verrà visualizzato il tuo StudentsList. Avvia l'applicazione e assicurati che tutto funzioni.