Εργασία με δεδομένα στο Redux

Στο προηγούμενο τμήμα υλοποιήσαμε ένα βασικό σχήμα λειτουργίας του Redux και τώρα γνωρίζετε τις κύριες αρχές λειτουργίας μιας εφαρμογής Redux. Στα επόμενα μαθήματα θα αρχίσουμε να επεκτείνουμε τη λειτουργικότητα της εφαρμογής μας με προϊόντα και θα δουλέψουμε με δεδομένα.

Δεδομένου ότι η εφαρμογή θα επεκτείνεται με νέα στοιχεία και διαδρομές, ας κάνουμε μια αλλαγή στη δρομολόγηση. Ανοίξτε την εφαρμογή με προϊόντα, και μετά το αρχείο root.jsx. Εισαγάγετε σε αυτό το στοιχείο Outlet, ενώ θα διαγράψετε τις γραμμές εισαγωγής των ProductsList και NewProductForm:

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

Τώρα το στοιχείο Root θα εμφανίζεται στη ρίζα διαδρομής '/', ενώ όλα τα άλλα στοιχεία σε θυγατρικές διαδρομές στο Outlet. Για αυτό θα διορθώσουμε ελαφρώς τη σήμανση του div #main-page για το στοιχείο Root:

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

Εδώ θα τοποθετήσουμε το Outlet αντί των στοιχείων NewProductForm και ProductsList:

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

Τη φόρμα για προσθήκη προϊόντων θα την εμφανίζουμε τώρα στο ProductsList. Ας ανοίξουμε το αρχείο με αυτό το στοιχείο και να προσθέσουμε την εισαγωγή της φόρμας:

import { NewProductForm } from './NewProductForm'

Και τώρα θα προσθέσουμε το στοιχείο με τη φόρμα ακριβώς πριν από τη λίστα προϊόντων. Τώρα η σήμανσή μας θα μοιάζει έτσι:

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

Θα γράψουμε το στυλ για την κλάση products-list στο index.css:

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

Απομένει μόνο να κάνουμε αλλαγές στο κύριο στοιχείο App. Ας ανοίξουμε το App.jsx και να εισάγουμε σε αυτό το στοιχείο ProductsList:

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

Στη συνέχεια, για τη μοναδική μας προς το παρόν διαδρομή, που είναι η ρίζα, θα προσθέσουμε την ιδιότητα children:

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

Και θα ορίσουμε ως τιμή αυτής της ιδιότητας την πρώτη θυγατρική διαδρομή. Ως διαδρομή θα ορίσουμε το 'products'. Τώρα σε αυτήν τη διεύθυνση θα εμφανίζεται η λίστα μας με προϊόντα ProductsList:

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

Ας εκκινήσουμε την εφαρμογή μας και ας βεβαιωθούμε ότι δεν έχουμε σπάσει τίποτα. Στη ρίζα '/' βλέπουμε μόνο τον τίτλο. Και η φόρμα και η λίστα προϊόντων έχουν κρυφτεί στη διεύθυνση '/products'.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο root.jsx αντικαταστήστε τα στοιχεία StudentsList και NewStudentForm με Outlet.

Αφήστε τώρα η φόρμα για προσθήκη μαθητή να εμφανίζεται στο StudentsList.

Κάντε αλλαγές στο κύριο στοιχείο σας App. Προσθέστε στη ριζική διαδρομή μια θυγατρική, με διαδρομή '/students', στην οποία θα εμφανίζεται το StudentsList. Εκκινήστε την εφαρμογή και βεβαιωθείτε ότι όλα λειτουργούν.