Tietojen käsittely Reduxissa

Edellisessä osassa toteutimme perus- Redux-kaavion, ja nyt tiedät Redux- sovelluksen perusperiaatteet. Seuraavilla oppitunneilla alamme laajentaa tuotteisiin liittyvän sovelluksemme toiminnallisuutta ja työskennellä tietojen kanssa.

Koska sovellus tulee saamaan uusia komponentteja ja reittejä, tehkäämme reitityksen kanssa yksi asia. Avaa tuotesovellus, sitten tiedosto root.jsx. Tuo siihen komponentti Outlet, poista samalla rivit, joissa tuodaan ProductsList ja NewProductForm:

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

Nyt komponenttia Root näytetään juuripolussa '/', ja kaikki muut komponentit alipolussa Outlet:ssa. Tätä varten korjaamme hieman divin #main-page ulkoasua komponentille Root:

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

Tähän laitamme Outlet:n tilalle komponentit NewProductForm ja ProductsList:

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

Lomakkeen tuotteiden lisäämiseksi näytämme nyt ProductsList:ssä. Avataan tiedosto tämän komponentin kanssa ja lisätään lomakkeen tuonti:

import { NewProductForm } from './NewProductForm'

Ja nyt lisätään lomakekomponentti suoraan ennen tuotelistaa. Nyt ulkoasumme näyttää tältä:

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

Kirjoitetaan tyyli luokalle products-list tiedostoon index.css:

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

Meidän on enää tehtävä muutoksia pääkomponenttiin App. Avataan App.jsx ja tuodaan siihen komponentti ProductsList:

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

Sitten ainoalle reitillemme toistaiseksi, joka on juurireitti, lisätään ominaisuus children:

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

Ja määritetään tämän ominaisuuden arvoksi ensimmäinen alareitti. Poluksi aseta sille 'products'. Nyt tällä osoitteessa näytetään tuotelistamme ProductsList:

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

Käynnistetään sovelluksemme ja varmistetaan, että emme rikkoneet mitään. Juuressa '/' näemme vain otsikon. Lomake ja tuotelista piilotettiin osoitteeseen '/products'.

Avaa opiskelijasovelluksesi. Tiedostossa root.jsx korvaa komponentit StudentsList ja NewStudentForm komponentilla Outlet.

Olkoon opiskelijan lisäyslomake nyt StudentsList:ssäsi.

Tee muutokset pääkomponenttiisi App. Lisää juurireitille alareitti, jossa on polku '/students', ja jossa näytetään StudentsList:si. Käynnistä sovellus ja varmista, että kaikki toimii.