Andmete töötlemine Reduxis

Eelmises osas rakendasime Reduxi põhilise tööskeemi ja nüüd teate Reduxi rakenduse põhiprintsiibid. Järgmistel tundidel hakkame oma tooterakendust täiendama ja töötame andmetega.

Kuna rakendus hakkab kasvama uute komponentide ja marsruutidega, teeme marsruutimisega ühe asja. Avage tooterakendus, seejärel fail root.jsx. Impordige sinna komponent Outlet, kustutades samal ajal read koos komponentide ProductsList ja NewProductForm importimisega:

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

Nüüd kuvatakse komponent Root juhitava tee '/' kohal ja kõik teised komponendid alamteedel Outlet kohal. Selleks parandame pisut komponendi Root jaoks divi #main-page märgistust:

<div id="main-page">
	<h2>Minu Tooted Rakendus</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Siin paneme Outlet asemele komponendid NewProductForm ja ProductsList:

<div id="main-page">
	<h2>Minu Tooted Rakendus</h2>
	<hr></hr>
	<Outlet />
</div>

Toodete lisamise vormi kuvame nüüd komponendis ProductsList. Avame selle komponendiga faili ja lisame vormi importimise:

import { NewProductForm } from './NewProductForm'

Ja nüüd lisame vormi komponendi otse toodete loendi ette. Nüüd näeb meie märgistus välja selline:

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

Kirjutame klassi products-list jaoks stiili faili index.css:

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

Meil jääb üle vaid teha muudatused peamisse komponenti App. Avame faili App.jsx ja impordime sinna komponendi ProductsList:

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

Seejärel lisame meie ainsale marsruudile, mis on juurmarsruut, atribuudi children:

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

Ja kirjutame selle atribuudi väärtuseks esimese alamMarsruudi. Teeks määrame sellele 'products'. Nüüd kuvatakse sellel aadressil meie toodete loend ProductsList:

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

Käivitame oma rakenduse ja veendume, et me pole midagi katki teinud. Juures '/' näeme vaid pealkirja. Vorm ja toodete loend on meil peidetud aadressile '/products'.

Avage oma õpilaste rakendus. Failis root.jsx asendage komponendid StudentsList ja NewStudentForm komponendiga Outlet.

Laske nüüd vorm õpilase lisamiseks kuvuda teie StudentsList komponendis.

Tehke muudatused oma peamisse komponenti App. Lisage juurmarsruudile alamMarsruut teega '/students', mille kohal kuvatakse teie StudentsList. Käivitage rakendus ja veenduge, et kõik töötab.