მონაცემთა მუშაობა 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>

აქ ჩვენ დავსვამთ 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. გაუშვით აპლიკაცია და დარწმუნდით, რომ თქვენთან ყველაფერი მუშაობს.