Redux-da ma'lumotlar bilan ishlash

Oldingi bo'limda biz Redux-ning asosiy ishlash sxemasini amalga oshirdik va endi siz Redux ilovasining asosiy tamoyillarini bilasiz. Keyingi darslarda biz mahsulotlar ilovamizning funksionalligini kengaytirishni boshlaymiz va ma'lumotlar bilan ishlaymiz.

Ilova yangi komponentlar va marshrutlar bilan boyib borayotgani sababli, keling marshrutizatsiya bilan bir narsani qilaylik. Mahsulotlar ilovasini oching, keyin root.jsx faylini oching. Unga Outlet komponentini import qiling, shu bilan birga ProductsList va NewProductForm import qilingan qatorlarni o'chiring:

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

Endi Root komponentimiz ildiz yo'li '/' bo'yicha ko'rsatiladi, boshqa barcha komponentlar esa Outlet ichidagi farzil yo'llar bo'yicha. Buning uchun Root komponenti uchun #main-page div-ining verstkasini biroz tuzatamiz:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Bu yerda biz NewProductForm va ProductsList komponentlari o'rniga Outlet ni qo'yamiz:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

Endi mahsulot qo'shish shaklini ProductsList da ko'rsatamiz. Keling ushbu komponent bilan faylni oching va shakl importini qo'shamiz:

import { NewProductForm } from './NewProductForm'

Endi esa shakl komponentini mahsulotlar ro'yxatidan oldinga qo'shamiz. Endi bizning verstkamiz shunday ko'rinadi:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

index.css da products-list klassi uchun uslubni yozamiz:

.products-list {
	display: flex;
	flex-direction: column;
}

Bizga faqat asosiy App komponentida o'zgartirishlar kiritish qoladi. App.jsx ni ochamiz va unga ProductsList komponentini import qilamiz:

import { ProductsList } from './parts/products/ProductsList'

Keyin bizning hozircha yagona bo'lgan, ildiz hisoblanadigan marshrutimizga children xususiyatini qo'shamiz:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

Va bu xususiyatning qiymati sifatida birinchi farzil marshrutni yozamiz. Yo'l sifatida unga 'products' ni o'rnatamiz. Endi bu manzil bo'yicha bizning mahsulotlar ro'yxatimiz ProductsList ko'rsatiladi:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Ilovamizni ishga tushiramiz va hech narsani buzganimiz yo'qligiga ishonch hosil qilamiz. Ildiz '/' da biz faqat sarlavhani ko'ramiz. Shaklcha va mahsulotlar ro'yxati esa '/products' manzilida yashiringan.

Talabalar ilovangizni oching. root.jsx faylida StudentsList va NewStudentForm komponentlarini Outlet ga almashtiring.

Endi talaba qo'shish shakli sizda StudentsList da ko'rsatilsin.

Asosiy App komponentingizda o'zgartirishlar kiriting. Ildiz marshrutiga farzil qo'shing, yo'li '/students' bo'lgan, uning bo'yicha sizning StudentsList komponentingiz ko'rsatiladi. Ilovani ishga tushiring va hammasi ishlashiga ishonch hosil qiling.