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:

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

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

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

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

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

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

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

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:

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

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

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

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