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 класcына стиль жазaлы:

.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 көрсөтүлөт. Колдонмону иштетип, баарыңыздын иштеп жатканына көзүңүз жетсин.