Praca z danymi w Redux

W poprzedniej sekcji zaimplementowaliśmy podstawowy schemat działania Redux i teraz znasz główne zasady działania aplikacji Redux. W kolejnych lekcjach zaczniemy uzupełniać funkcjonalność naszej aplikacji z produktami i popracujemy z danymi.

Ponieważ aplikacja będzie obrastać w nowe komponenty i trasy, zróbmy z routingiem jedną rzecz. Otwórz aplikację z produktami, następnie plik root.jsx. Zaimportuj do niego komponent Outlet, przy tym usuń linijki z importem ProductsList i NewProductForm:

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

Teraz komponent Root będzie wyświetlany w ścieżce głównej '/', a wszystkie inne komponenty w potomnych w Outlet. W tym celu nieco poprawmy znacznik diva #main-page dla komponentu Root:

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

Tutaj umieścimy Outlet zamiast komponentów NewProductForm i ProductsList:

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

Formularz do dodawania produktów będziemy teraz wyświetlać w ProductsList. Otwórzmy plik z tym komponentem i dodajmy import formularza:

import { NewProductForm } from './NewProductForm'

A teraz dodajmy komponent z formularzem bezpośrednio przed listą produktów. Teraz nasz znacznik będzie wyglądać tak:

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

Dopiszmy styl dla klasy products-list w index.css:

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

Pozostaje nam tylko wprowadzić zmiany w głównym komponencie App. Otwórzmy App.jsx i zaimportujmy do niego komponent ProductsList:

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

Następnie dla naszej na razie jedynej trasy, będącej główną, dodajmy właściwość children:

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

I wpiszmy jako wartość tej właściwości pierwszą trasę potomną. Jako ścieżkę ustawmy mu 'products'. Teraz pod tym adresem będzie wyświetlana nasza lista z produktami ProductsList:

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

Uruchommy naszą aplikację i upewnijmy się, że nic nie zepsuliśmy. W głównym '/' widzimy tylko tytuł. A formularz i lista produktów schowały się pod adresem '/products'.

Otwórz twoją aplikację ze studentami. W pliku root.jsx zamień komponenty StudentsList i NewStudentForm na Outlet.

Niech teraz formularz do dodawania studenta wyświetla się u ciebie w StudentsList.

Wprowadź zmiany w twoim głównym komponencie App. Dodaj do trasy głównej potomną, ze ścieżką '/students', pod którą będzie wyświetlany twój StudentsList. Uruchom aplikację i upewnij się, że u ciebie wszystko działa.