Redux-da maglumatlar bilen işlemek

Öňki bölümde biz Redux işiniň esasly şemasyny amala aşyrdyk we indi siz Redux aplikasiýasynyň işiniň esasy prinsiplaryny bilýärsiňiz. Indiki sapaklarda biz önümler bar aplikasiýamyzyň funksionallygyny goşmaçalary başlar we maglumatlar bilen işleris.

Aplikasiýa täze komponentler we marşrutlar bilen baýlaşjak bolany üçin, marşrutiňleşdirme bilen bir zat edeliň. Önümler aplikasiýany açyň, soňra root.jsx faýlyny açyň. Onda Outlet komponenty import ediň, ýöne ProductsList we NewProductForm import etmek üçin setirleri pozuň:

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

Indi Root komponentymyz esasy ýol '/' görkeziler, ýöne beýleki komponentler bolsa Outlet içinde şahy ýollar görkeziler. Bunuň üçin Root komponenty üçin #main-page dіv iň gurluşyny birneme düzedeliň:

<div id="main-page">
	<h2>Meniň Önümler Aplikasiýam</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Bu ýerde NewProductForm we ProductsList komponentleriň ýerine Outlet goýarys:

<div id="main-page">
	<h2>Meniň Önümler Aplikasiýam</h2>
	<hr></hr>
	<Outlet />
</div>

Önüm goşmak üçin formamyzy indi ProductsList içinde görkezeris. Bu komponent bar faýly açalyň we formany import etmek üçin goşalyň:

import { NewProductForm } from './NewProductForm'

Indi bolsa önümler sanawyndan öň formany komponenti goşalyň. Indi bizim gurluşymyz şeýle görüner:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Önümler</h2>
			{dispProducts}
		</div>
	</div>
)

index.css faýlynda products-list klas üçin stili tamamlaýarys:

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

Biz ýeke esasy App komponentde üýtgeşme girizmelidiris. App.jsx faýlyny açalyň we oňa ProductsList komponenty import edeliň:

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

Soňra, häzirki ýeke ýol bolan, biziň esasy ýol üçin children hususylygyny goşalyň:

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

We bu hususylygyň bahasy hökmünde birinji şahy ýoly ýazalyň. Ýol hökmünde 'products' goýuň. Indi bu salgyda biziň ProductsList önümler sanawymyz görkeziler:

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

Aplikasiýamyzy işledeliň we biz hiç zat döwmedigimize göz ýetireliň. Esasy '/'-da biz diňe atly görýäris. Forma we önümler sanawymyz bolsa '/products' salgyda gizlendi.

Şägirtler bar aplikasiýaňyzy açyň. root.jsx faýlynda StudentsList we NewStudentForm komponentlerini Outlet bilen çalyşyň.

Indi şägirt goşmak üçin formaňyz StudentsList komponentyňizde görkezilsin.

Esasy App komponentiňizde üýtgeşme giriziň. Esasy ýola şahy ýol goşuň, ýoly '/students' ediň, şol ýolda StudentsList komponentiňiz görkeziler. Aplikasiýaňyzy işlediň we hemmesiniň işleýändigine göz ýetiriň.