Работа со податоци во Redux

Во претходниот дел, имплементиравме основна шема за работа на Redux и сега ги знаете главните принципи на работа на Redux апликацијата. Во следните уроци, ќе започнеме да го дополнуваме функционалот на нашата апликација со производи и ќе работиме со податоци.

Бидејќи апликацијата ќе се збогатува со нови компоненти и рути, ајде да направиме една работа со рутирањето. Отворете ја апликацијата со производи, потоа датотеката root.jsx. Импортирајте во неа компонентата Outlet, притоа отстранете ги линиите со импорт на ProductsList и NewProductForm:

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

Сега компонентата Root кај нас ќе се прикажува по коренот пат '/', а сите други компоненти по деца во Outlet. За ова, малку ќе ја поправиме верстката на div-от #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>Производи</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. Пуштете ја апликацијата и проверете дали кај вас сè работи.