Lucrul cu datele în Redux

În secțiunea anterioară am implementat o schemă de bază pentru funcționarea Redux și acum cunoașteți principiile de bază ale funcționării unei aplicații Redux. În lecțiile următoare vom începe să adăugăm funcționalități noi în aplicația noastră cu produse și vom lucra cu date.

Deoarece aplicația va căpăta componente noi și rute, să facem un lucru cu rutarea. Deschideți aplicația cu produse, apoi fișierul root.jsx. Importați în el componenta Outlet, ștergând în același timp liniile care importă ProductsList și NewProductForm:

import { Outlet } from 'react-router-dom'

Acum componenta Root va fi afișată la calea rădăcină '/', iar toate celelalte componente la căile copil în Outlet. Pentru aceasta, vom corecta puțin marca div-ului #main-page pentru componenta Root:

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

Aici vom pune Outlet în locul componentelor NewProductForm și ProductsList:

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

Formularul pentru adăugarea produselor îl vom afișa acum în ProductsList. Să deschidem fișierul cu această componentă și să adăugăm importul formularului:

import { NewProductForm } from './NewProductForm'

Și acum să adăugăm componenta cu formularul chiar înaintea listei de produse. Acum marca noastră va arăta astfel:

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

Să completăm stilul pentru clasa products-list în index.css:

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

Nu ne rămâne decât să aducem modificări în componenta principală App. Să deschidem App.jsx și să importăm în el componenta ProductsList:

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

Apoi pentru singura noastră rută deocamdată, care este rădăcina, să adăugăm proprietatea children:

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

Și să scriem ca valoare a acestei proprietăți prima rută copil. Ca cale îi vom seta 'products'. Acum la această adresă va fi afișată lista noastră cu produse ProductsList:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Să pornim aplicația noastră și să ne convingem că nu am stricat nimic. În rădăcină '/' vedem doar titlul. Iar formularul și lista de produse sunt ascunse la adresa '/products'.

Deschideți aplicația voastră cu studenți. În fișierul root.jsx înlocuiți componentele StudentsList și NewStudentForm cu Outlet.

Lăsați ca acum formularul pentru adăugarea unui student să se afișeze în StudentsList.

Aduceți modificări în componenta voastră principală App. Adăugați la ruta rădăcină o rută copil, cu calea '/students', la care va fi afișat StudentsList. Porniți aplicația și asigurați-vă că totul funcționează.