Werk met data in Redux

In die vorige afdeling het ons die basiese werkskema van Redux geïmplementeer en nou ken jy die hoof beginsels van die werking van 'n Redux-toepassing. In die volgende lesse sal ons die funksionaliteit van ons toepassing met produkte begin uitbrei en werk met data.

Aangesien die toepassing nuwe komponente en roetes gaan kry, laat ons een ding doen met die roetering. Maak die toepassing met produkte oop, dan die lêer root.jsx. Voer dit in die komponent Outlet, terwyl jy die reëls met die invoer van ProductsList en NewProductForm verwyder:

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

Nou sal die komponent Root vertoon word by die wortelpad '/', en alle ander komponente by die kinderpads in Outlet. Om dit te doen, sal ons die opmaak van die div #main-page vir die komponent Root bietjie regstel:

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

Hier sal ons Outlet plaas in plaas van die komponente NewProductForm en ProductsList:

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

Die vorm om produkte by te voeg sal ons nou in ProductsList vertoon. Laat ons die lêer met hierdie komponent oopmaak en die invoer van die vorm byvoeg:

import { NewProductForm } from './NewProductForm'

En nou voeg ons die komponent met die vorm reg voor die produklys by. Nou sal ons opmaak so lyk:

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

Laat ons die styl vir die klas products-list in index.css byskryf:

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

Al wat oorbly, is om die veranderinge te maak in die hoofkomponent App. Laat ons App.jsx oopmaak en die komponent ProductsList daarin invoer:

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

Dan vir ons huidig enigste roete, wat die wortel is, voeg ons die eienskap children by:

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

En skryf as die waarde van hierdie eienskap die eerste kinderroete in. As pad stel ons dit op 'products'. Nou sal by hierdie adres word ons produklys ProductsList vertoon:

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

Laat ons ons toepassing begin en seker maak dat ons niks gebreek het nie. By die wortel '/' sien ons slegs die titel. En die vorm en produklys is vir ons weggesteek by die adres '/products'.

Maak jou toepassing met studente oop. In die lêer root.jsx vervang die komponente StudentsList en NewStudentForm met Outlet.

Laat die vorm om 'n student by te voeg nou in jou StudentsList vertoon word.

Maak die veranderinge in jou hoofkomponent App. Voeg by die wortelroete 'n kinderroete by, met die pad '/students', waarvolgens jou StudentsList vertoon sal word. Begin die toepassing en maak seker dat alles werk.