Reduxда маълумотлар билан ишлаш

Олдинги бўлимда биз Reduxнинг асосий ишлаш схемасини амалга оширдик ва энди сиз Redux иловасининг асосий принципларини биласиз. Кейинги дарсларда биз ўз иловамиз функционалини махсулотлар билан бойитишни бошлаймиз ва маълумотлар билан ишлаймиз.

Илова янги компонентлар ва йўналишлар билан бойигани сари, келинг маршрутизация билан бир ишни қилайлик. Махсулотлар билан иловангизни очинг, сўнг файл root.jsxни очинг. Унга Outlet компонентини импорт қилинг, бу билан бирга ProductsList ва NewProductForm импортлари сатрларини чиқариб ташланг:

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

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

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

Бу ерда биз NewProductForm ва ProductsList компонентлари ўрнига Outlet ни қўйамиз:

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

Сўнги бизнинг ҳозирги ягона йўналишимиз учун, илк йўл бўлган, фарзанд хусусиятини қўшамиз:

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

Ва бу хусусият қиймати сифатида биринчи фарзанд йўналишни ёзамиз. Йўл сифатида уни 'products' қилиб белгилаймиз. Энди бу манзил бўйича бизда бизнинг махсулотлар рўйхатимиз ProductsList кўрсатилади:

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

Иловамизни ишга туширамиз ва бирон нарсани бузмаганимизга ишонич ҳосил қиламиз. Илк йўл '/' да биз фақат sarlavhani ko'ramiz. A форма ва махсулотлар рўйхати эса бизда '/products' манзилига бекитилган.

Сизнинг талабалар билан иловангизни чиқаринг. root.jsx файлида StudentsList ва NewStudentForm компонентларини Outlet га алмаштиринг.

Энди талаба қўшиш учун форма сизда StudentsList да кўрсатилсин.

Асосий компонентингиз App га ўзгартиришлар киритинг. Илк йўналишга фарзанд қўшинг, '/students' йўли билан, у ерда сизнинг StudentsList кўрсатилади. Иловани ишга туширинг ва ҳамма нарса ишлашига ишонич ҳосил қилинг.