Working with Data in Redux

In the previous section, we implemented the basic scheme of Redux operation and now you know the basic principles of the Redux application operation. In the following lessons, we will begin to supplement the functionality of our application with products and work with data.

Since the app will grow with new components and routes, let's do one thing with routing. Open the app with products, then the file root.jsx. Import the Outlet component into it, while removing the lines with the import ProductsList and NewProductForm:

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

Now the Root component will be displayed by the root path '/', and all other components by their children in Outlet. To do this, we will slightly correct the layout of the div #main-page for the Root component:

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

Here we will put Outlet instead of NewProductForm and ProductsList components:

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

We will now output the form for adding products in ProductsList. Let's open the file with this component and add the form import:

import { NewProductForm } from './NewProductForm'

Now let's add a component with a form right before the list of products. Now our layout will look like this:

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

Let's add a style for the products-list class in index.css:

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

All we have to do is make changes to the main component App. Let's open App.jsx and import the component ProductsList into it:

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

Then, for our only route so far, which is the root, we add the children property:

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

And we will register the first child route as the value of this property. We will set its path to 'products'. Now, at this address, we will display our list with products ProductsList:

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

Let's run our application and make sure we haven't broken anything. At the root '/' we only see the title. And the form and the list of products are hidden at the address '/products'.

Open your students app. In the root.jsx file, replace the StudentsList and NewStudentForm components with Outlet.

Now let the form for adding a student be displayed in StudentsList.

Make a change to your main component App. Add a child route to the root route, with the path '/students', which will display your StudentsList. Run the application and make sure everything works for you.