Puna me të dhënat në Redux

Në pjesën e mëparshme ne implementuam një skemë bazë të punës së Redux dhe tani ju i njihni parimet bazë të funksionimit të një aplikacioni Redux. Në mësimet në vijim do të fillojmë të shtojmë funksionalitet në aplikacionin tonë me produkte dhe do të punojmë me të dhënat.

Meqenëse aplikacioni do të fillojë të ketë komponentë dhe rrugë të reja, le të bëjmë një ndryshim në rutim. Hapni aplikacionin me produktet, pastaj skedarin root.jsx. Importoni në të komponentin Outlet, duke fshirë në të njëjtën kohë rreshtat me importimin e ProductsList dhe NewProductForm:

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

Tani komponenti Root do të shfaqet në rrugën rrënjë '/', ndërsa të gjithë komponentët e tjerë në nën-rrugët në Outlet. Për këtë do të rregullojmë pak hartimin e div-it #main-page për komponentin Root:

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

Këtu do të vendosim Outlet në vend të komponentëve NewProductForm dhe ProductsList:

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

Formën për shtimin e produkteve tani do ta shfaqim në ProductsList. Le të hapim skedarin me këtë komponent dhe të shtojmë importimin e formës:

import { NewProductForm } from './NewProductForm'

Dhe tani le të shtojmë komponentin me formën direkt përpara listës së produkteve. Tani hartimi ynë do të duket kështu:

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

Le të shtojmë stil për klasën products-list në index.css:

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

Na mbetet vetëm të bëjmë ndryshimet në komponentin kryesor App. Le të hapim App.jsx dhe të importojmë në të komponentin ProductsList:

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

Pastaj për rrugën tonë të vetme për momentin, e cila është rrënjësore, le të shtojmë vetinë children:

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

Dhe le të shkruajmë si vlerë të kësaj vetie rrugën e parë të fëmijë. Si rrugë le të caktojmë 'products'. Tani në këtë adresë do të shfaqet lista jonë me produkte ProductsList:

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

Le të nisim aplikacionin tonë dhe të sigurohemi që nuk kemi dëmtuar asgjë. Në rrënjë '/' ne shohim vetëm titullin. Ndërsa forma dhe lista e produkteve janë fshehur në adresën '/products'.

Hapni aplikacionin tuaj me studentët. Në skedarin root.jsx zëvendësoni komponentët StudentsList dhe NewStudentForm me Outlet.

Le të formohet tani për shtimin e studentit të shfaqet tek ju në StudentsList.

Bëni ndryshimet në komponentin tuaj kryesor App. Shtoni te rruga rrënjë një nën-rrugë, me rrugë '/students', në të cilën do të shfaqet StudentsList juaj. Nisni aplikacionin dhe sigurohuni që gjithçka funksionon.