Trabalhando com Dados no Redux

Na seção anterior, implementamos o esquema básico de funcionamento do Redux e agora você conhece os princípios fundamentais de uma aplicação Redux. Nas próximas lições, começaremos a adicionar funcionalidades à nossa aplicação de produtos e a trabalhar com dados.

Como o aplicativo ganhará novos componentes e rotas, vamos fazer uma alteração no roteamento. Abra o aplicativo de produtos, depois o arquivo root.jsx. Importe para ele o componente Outlet, excluindo as linhas de importação de ProductsList e NewProductForm:

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

Agora, o componente Root será exibido no caminho raiz '/', e todos os outros componentes serão exibidos como filhos no Outlet. Para isso, vamos ajustar um pouco a marcação da div #main-page para o componente Root:

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

Aqui, colocaremos o Outlet no lugar dos componentes NewProductForm e ProductsList:

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

Agora, exibiremos o formulário de adição de produtos dentro do ProductsList. Vamos abrir o arquivo deste componente e adicionar a importação do formulário:

import { NewProductForm } from './NewProductForm'

E agora adicionaremos o componente do formulário logo antes da lista de produtos. Nossa marcação ficará assim:

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

Vamos adicionar um estilo para a classe products-list no arquivo index.css:

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

Resta-nos apenas fazer as alterações no componente principal App. Vamos abrir App.jsx e importar o componente ProductsList para ele:

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

Em seguida, para nossa única rota, que é a raiz, adicionaremos a propriedade children:

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

E definiremos como valor desta propriedade a primeira rota filha. Vamos definir seu caminho como 'products'. Agora, neste endereço, nossa lista de produtos ProductsList será exibida:

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

Vamos executar nosso aplicativo e verificar se não quebramos nada. Na raiz '/', vemos apenas o título. O formulário e a lista de produtos estão escondidos no endereço '/products'.

Abra seu aplicativo de estudantes. No arquivo root.jsx, substitua os componentes StudentsList e NewStudentForm por Outlet.

Agora, faça com que o formulário de adição de estudante seja exibido dentro do seu StudentsList.

Faça as alterações no seu componente principal App. Adicione à rota raiz uma rota filha, com o caminho '/students', que exibirá o seu StudentsList. Execute o aplicativo e verifique se tudo está funcionando.