Redux-и дода и кор кардан

Дар қисми гузашта мо схемаи асосии кории Redux-ро татбиқ кардем ва акнун шумо принсипҳои асосии кории барномаи Redux-ро медонед. Дар дарсҳои навбатӣ мо функционалии барномаи мо бо маҳсулотро илова карда оғоз мекунем ва бо дода кор мекунем.

Азбаски барнома бо компонентҳо ва роҳҳои нав сару кор меёбад, биёед бо роҳнамоӣ як кор кунем. Барномаи маҳсулотро кушоед, сипас файли root.jsx. Дар он компоненти Outlet-ро ворид кунед, дар ҳоле ки сатрҳои воридкунии ProductsList ва NewProductForm-ро нест кунед:

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

Акнун компоненти Root барои мо дар роҳи решаи '/' намоиш дода мешавад, ва ҳамаи компонентҳои дигар дар компоненти фарзандӣ дар Outlet. Барои ин каме верстаи диви #main-page-ро барои компоненти Root ислоҳ мекунем:

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

Дар ин ҷо мо Outlet-ро ба ҷои компонентҳои NewProductForm ва ProductsList мегузорем:

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

Шакли илова кардани маҳсулотро мо акнун дар ProductsList бароварда хоҳем кард. Биёед файли ин компонентро кушоем ва воридкунии шаклро илова кунем:

import { NewProductForm } from './NewProductForm'

Ва акнун компоненти шаклро рост пеш аз феҳристи маҳсулот илова мекунем. Акнун верстаи мо ин тавр хурд мешавад:

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

Услуби синфи products-list-ро дар index.css илова мекунем:

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

Барои мо танҳо тағйирот даровардан дар компоненти асосӣ App мондааст. Файли App.jsx-ро кушоем ва дар он компоненти ProductsList-ро ворид кунем:

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

Сипас барои ягона роҳи мо, ки реша аст, хосияти children-ро илова мекунем:

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

Ва дар ҳамчун арзиши ин хосият якумин роҳи фарзандро менависем. Ҳамчун роҳ барои он 'products' муқаррар мекунем. Акнун дар ин суроға барои мо феҳристи маҳсулот ProductsList намоиш дода мешавад:

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

Барномаи худро оғоз кунем ва боварӣ ҳосил кунем, ки мо чизеро хароб накардем. Дар реша '/' мо танҳо унвони сарлавҳаро мебинем. Ва шакл ва феҳристи маҳсулот барои мо дар суроғаи '/products' пинҳон шудаанд.

Барномаи худро бо донишҷӯён кушоед. Дар файли root.jsx компонентҳои StudentsList ва NewStudentForm-ро ба Outlet иваз кунед.

Бигзор акнун шакл барои илова кардани донишҷӯ барои шумо дар StudentsList намоиш дода шавад.

Тағйиротҳоро дар компоненти асосии App-и худ даровардан кунед. Ба роҳи реша фарзанди илова кунед, бо роҳи '/students', ки дар он StudentsList-и шумо намоиш дода мешавад. Барномаро оғоз кунед ва боварӣ ҳосил кунед, ки ҳама чиз барои шумо кор мекунад.