Datu apstrāde Redux

Iepriekšējā sadaļā mēs īstenojām pamata Redux darbības shēmu, un tagad jūs zināt galvenos Redux lietojuma darbības principus. Nākamajās nodarbībās mēs sāksim papildināt mūsu lietojuma ar produktiem funkcionalitāti un strādāsim ar datiem.

Tā kā lietojumam pievienosies jaunas komponentes un maršruti, darīsim vienu lietu ar maršrutizāciju. Atveriet lietojumu ar produktiem, tad failu root.jsx. Importējiet tajā komponenti Outlet, vienlaikus dzēšot rindiņas ar importēšanu ProductsList un NewProductForm:

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

Tagad komponents Root tiks rādīts pa saknes ceļu '/', bet visas pārējās komponentes pēc pakārtotajiem Outlet. Šim nolūkam nedaudz labosim atlocījumu div #main-page komponentam Root:

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

Šeit mēs ievietosim Outlet komponentu vietā NewProductForm un ProductsList:

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

Formu produktu pievienošanai mēs tagad izvadīsim ProductsList. Atversim failu ar šo komponenti un pievienosim formas importēšanu:

import { NewProductForm } from './NewProductForm'

Un tagad pievienosim komponenti ar formu tieši pirms produktu saraksta. Tagad mūsu atlocījums izskatīsies šādi:

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

Papildināsim stilu klasei products-list index.css:

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

Mums atliek tikai veikt izmaiņas galvenajā komponentē App. Atversim App.jsx un importēsim tajā komponenti ProductsList:

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

Pēc tam mūsu vienīgajam maršrutam, kas ir saknes maršruts, pievienosim īpašību children:

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

Un norakstīsim kā šīs īpašības vērtību pirmo pakārtoto maršrutu. Kā ceļu iestatīsim tam 'products'. Tagad šajā adresē mums tiks rādīts mūsu saraksts ar produktiem ProductsList:

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

Palaidīsim mūsu lietojumu un pārliecināsimies, ka mēs neko nesabojājām. Saknē '/' mēs redzam tikai virsrakstu. Bet formas logs un produktu saraksts mums ir paslēpts adresē '/products'.

Atveriet savu lietojumu ar studentiem. Failā root.jsx aizstājiet komponentes StudentsList un NewStudentForm ar Outlet.

Lai tagad forma studenta pievienošanai tiek rādīta jums StudentsList.

Veiciet izmaiņas savā galvenajā komponentē App. Pievienojiet saknes maršrutam pakārtoto, ar ceļu '/students', pa kuru tiks rādīts jūsu StudentsList. Paleidziet lietojumu un pārliecinieties, ka jums viss strādā.