Trabajo con datos en Redux

En la sección anterior implementamos un esquema básico de trabajo de Redux y ahora conoces los principios principales de funcionamiento de una aplicación Redux. En las siguientes lecciones, comenzaremos a agregar funcionalidad a nuestra aplicación de productos y trabajaremos con los datos.

Dado que la aplicación se irá llenando de nuevos componentes y rutas, hagamos una cosa con el enrutamiento. Abra la aplicación de productos, luego el archivo root.jsx. Importe en él el componente Outlet, y elimine las líneas con la importación de ProductsList y NewProductForm:

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

Ahora el componente Root se mostrará en la ruta raíz '/', y todos los otros componentes en las rutas hijas dentro de Outlet. Para ello, corrijamos un poco el maquetado del div #main-page para el componente Root:

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

Aquí pondremos Outlet en lugar de los componentes NewProductForm y ProductsList:

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

Ahora mostraremos el formulario para agregar productos en ProductsList. Abramos el archivo de este componente y agreguemos la importación del formulario:

import { NewProductForm } from './NewProductForm'

Y ahora agreguemos el componente del formulario justo antes de la lista de productos. Ahora nuestro maquetado se verá así:

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

Añadamos el estilo para la clase products-list en index.css:

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

Solo nos queda hacer los cambios en el componente principal App. Abramos App.jsx e importemos en él el componente ProductsList:

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

Luego, para nuestra única ruta por ahora, que es la raíz, agreguemos la propiedad children:

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

Y escribamos como valor de esta propiedad la primera ruta hija. Como ruta establezcamos 'products'. Ahora en esta dirección se mostrará nuestra lista de productos ProductsList:

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

Ejecutemos nuestra aplicación y asegurémonos de que no hayamos roto nada. En la raíz '/' vemos solo el título. Y el formulario y la lista de productos se han escondido en la dirección '/products'.

Abra su aplicación de estudiantes. En el archivo root.jsx reemplace los componentes StudentsList y NewStudentForm por Outlet.

Ahora permita que el formulario para agregar un estudiante se muestre en su StudentsList.

Realice los cambios en su componente principal App. Agregue a la ruta raíz una hija, con la ruta '/students', mediante la cual se mostrará su StudentsList. Ejecute la aplicación y asegúrese de que todo funcione.