Redux-də Məlumatlarla Iş

Əvvəlki bölmədə biz əsas Redux iş sxemini həyata keçirdik və indi siz Redux tətbiqinin əsas prinsiplərini bilirsiniz. Növbəti dərslərdə biz məhsullarla olan tətbiqimizin funksionallığını artırmağa və məlumatlarla işləməyə başlayacayıq.

Tətbiq yeni komponentlər və marşrutlarla zənginləşəcəyi üçün, gəlin marşrutlaşdırmada bir şey edək. Məhsullar tətbiqinizi açın, sonra root.jsx faylını. Ora Outlet komponentini import edin, eyni zamanda ProductsList və NewProductForm import sətirlərini silin:

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

İndi Root komponentimiz kök yol '/' üzrə göstəriləcək, digər bütün komponentlər isə Outlet-də uşaq kimi olacaq. Bunun üçün Root komponenti üçün #main-page div-inin quruluşunu bir az dəyişirik:

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

Burada NewProductForm və ProductsList komponentləri yerinə Outlet qoyacağıq:

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

İndi məhsul əlavə etmə formasını ProductsList-də göstərəcəyik. Gəlin bu komponentin olduğu faylı açaq və formanı import edək:

import { NewProductForm } from './NewProductForm'

İndi də formanın olduğu komponenti məhsul siyahısından dərhal əvvəl əlavə edək. İndi bizim quruluşumuz belə görünəcək:

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

index.css-də products-list sinifi üçün stili yazaq:

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

Bizə yalnız əsas App komponentində dəyişikliklər etmək qalır. App.jsx-i açaq və ora ProductsList komponentini import edək:

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

Sonra, indilik yeganə olan və kök olan marşrutumuz üçün children xüsusiyyətini əlavə edək:

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

Və bu xüsusiyyətin dəyəri kimi ilk uşaq marşrutu yazaq. Yol kimi ona 'products' təyin edək. İndi bu ünvanda bizim məhsul siyahımız ProductsList göstəriləcək:

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

Tətbiqimizi işə salaq və heç nəyi sındırmadığımıza əmin olaq. Kök '/'-də biz yalnız başlığı görürük. Forma və məhsul siyahısı isə '/products' ünvanında gizlənib.

Tələbələrlə olan tətbiqinizi açın. root.jsx faylında StudentsList və NewStudentForm komponentlərini Outlet ilə əvəz edin.

İndi tələbə əlavə etmə forması StudentsList-də göstərilsin.

Əsas App komponentinizdə dəyişikliklər edin. Kök marşruta, '/students' yolu ilə uşaq əlavə edin, hansı ki, orada sizin StudentsList göstəriləcək. Tətbiqi işə salın və hər şeyin işlədiyinə əmin olun.