Деректермен жұмыс 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>
)

index.css файлындағы products-list класына стильді толықтырайық:

.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 көрсетілетін болады. Қолдануды іске қосыңыз және барлығыңыздың дұрыс жұмыс істейтініне көз жеткізіңіз.