Работа с данни в 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>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'

След това за нашия единствен маршрут, който е коренен, добавяме свойство 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. Стартирайте приложението и се убедете, че всичко работи.