Datenverwaltung in Redux

Im vorherigen Abschnitt haben wir das grundlegende Schema von Redux implementiert und Sie kennen nun die Hauptprinzipien einer Redux-Anwendung. In den nächsten Lektionen werden wir die Funktionalität unserer Produktanwendung erweitern und mit Daten arbeiten.

Da die Anwendung um neue Komponenten und Routen erweitert wird, lassen Sie uns eine Sache mit dem Routing erledigen. Öffnen Sie die Produktanwendung, dann die Datei root.jsx. Importieren Sie darin die Komponente Outlet und löschen Sie dabei die Zeilen mit dem Import von ProductsList und NewProductForm:

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

Nun wird die Komponente Root unter dem Root-Pfad '/' angezeigt, und alle anderen Komponenten werden in den Kind-Routen im Outlet gerendert. Dazu passen wir das Markup der #main-page-Div für die Komponente Root leicht an:

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

Hier setzen wir Outlet anstelle der Komponenten NewProductForm und ProductsList ein:

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

Das Formular zum Hinzufügen von Produkten werden wir nun in ProductsList ausgeben. Lassen Sie uns die Datei mit dieser Komponente öffnen und den Import des Formulars hinzufügen:

import { NewProductForm } from './NewProductForm'

Und nun fügen wir die Formularkomponente direkt vor der Produktliste hinzu. Nun wird unser Markup so aussehen:

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

Ergänzen wir den Stil für die Klasse products-list in index.css:

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

Es bleibt uns nur noch, Änderungen in der Hauptkomponente App vorzunehmen. Wir öffnen App.jsx und importieren darin die Komponente ProductsList:

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

Dann fügen wir für unsere vorerst einzige Route, die die Root-Route ist, die Eigenschaft children hinzu:

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

Und schreiben wir als Wert dieser Eigenschaft die erste Kind-Route. Als Pfad setzen wir 'products'. Nun wird unter dieser Adresse unsere Produktliste ProductsList angezeigt:

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

Starten wir unsere Anwendung und vergewissern uns, dass wir nichts kaputt gemacht haben. Im Root '/' sehen wir nur die Überschrift. Und das Formular sowie die Produktliste sind unter der Adresse '/products' versteckt.

Öffnen Sie Ihre Studenten-Anwendung. Ersetzen Sie in der Datei root.jsx die Komponenten StudentsList und NewStudentForm durch Outlet.

Lassen Sie nun das Formular zum Hinzufügen eines Studenten in Ihrer StudentsList angezeigt werden.

Nehmen Sie Änderungen in Ihrer Hauptkomponente App vor. Fügen Sie zur Root-Route eine Kind-Route mit dem Pfad '/students' hinzu, unter der Ihre StudentsList angezeigt wird. Starten Sie die Anwendung und vergewissern Sie sich, dass bei Ihnen alles funktioniert.