Տվյալների աշխատանք Redux-ում

Նախորդ բաժնում մենք իրականացրեցինք Redux-ի հիմնական աշխատանքի սխեման և այժմ դուք գիտեք Redux հավելվածի աշխատանքի հիմնական սկզբունքները: Հաջորդ դասերին մենք կսկսենք լրացնել մեր ապրանքներով հավելվածի ֆունկցիոնալը և կաշխատենք տվյալների հետ:

Քանի որ հավելվածը կծավալվի նոր բաղադրիչներով և երթուղիներով, եկեք մեկ բան անենք երթուղիչով: Բացեք ապրանքներով հավելվածը, ապա root.jsx ֆայլը: Իմպորտացրեք դրա մեջ Outlet բաղադրիչը, ընդ որում ջնջեք ProductsList և NewProductForm իմպորտների տողերը:

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

Այժմ Root բաղադրիչը մեզ մոտ կցուցադրվի արմատային '/' ճանապարհով, իսկ բոլոր մյուս բաղադրիչները Outlet-ի դուստր ճանապարհներով: Դրա համար մի փոքր ուղղենք Root բաղադրիչի #main-page դիվի վերստը:

<div id="main-page">
	<h2>Իմ Ապրանքների Հավելվածը</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Այստեղ մենք կդնենք Outlet NewProductForm և ProductsList բաղադրիչների փոխարեն:

<div id="main-page">
	<h2>Իմ Ապրանքների Հավելվածը</h2>
	<hr></hr>
	<Outlet />
</div>

Ապրանքներ ավելացնելու ֆորման այժմ մենք կցուցադրենք ProductsList-ում: Եկեք բացենք այս բաղադրիչի ֆայլը և ավելացնենք ֆորմայի իմպորտը:

import { NewProductForm } from './NewProductForm'

Իսկ այժմ ավելացնենք ֆորմայի բաղադրիչը հենց ապրանքների ցուցակից առաջ: Այժմ մեր վերստը կունենա հետևյալ տեսքը:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Ապրանքներ</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-ը: Գործարկեք հավելվածը և համոզվեք, որ ձեզ մոտ ամեն ինչ աշխատում է: