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:

app/root.jsximport { 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:

app/root.jsx<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:

app/root.jsx<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:

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

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

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Products</h2>
      {dispProducts}
    </div>
  </div>
)

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

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:

App.jsximport { ProductsList } from './parts/products/ProductsList'

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

App.jsxconst 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:

App.jsxchildren: [
  {
    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'.