Работа с данными в Redux

В предыдущем разделе мы реализовали базовую схему работы Redux и теперь вы знаете основные принципы работы Redux приложения. В следующих уроках мы начнем дополнять функционал нашего приложения с продуктами и поработаем с данными.

Поскольку приложение будет обрастать новыми компонентами и маршрутами, давайте сделаем с маршрутизацией одну вещь. Откройте приложение с продуктами, затем файл root.jsx. Импортируйте в него компонент Outlet, при этом удалите строчки с импортом ProductsList и NewProductForm:

app/root.jsximport { Outlet } from 'react-router-dom'

Теперь копмонент Root у нас будет отображаться по корневому пути '/', а все другие компоненты по дочерним в Outlet. Для этого немного исправим верстку дива #main-page для компонента Root:

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

Здесь мы поставим Outlet вместо компонентов NewProductForm и ProductsList:

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

Форму для добавления продуктов мы теперь будем выводить в ProductsList. Давайте откроем файл с этим компонентом и добавим импорт формы:

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

А теперь добавим компонент с формой прямо перед списком продуктов. Теперь наша верстка будет выглядеть так:

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

Допишем стиль для класса products-list в index.css:

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

Нам остается только внести изменения в главный компонент App. Откроем App.jsx и импортируем в него компонент ProductsList:

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

Затем для нашего пока единственного маршрута, являющегося корневым, добавим свойство children:

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

И пропишем в качестве значения этого свойства первый дочерний маршрут. В качестве пути установим ему 'products'. Теперь по этому адресу у нас будет отображаться наш список с продуктами ProductsList:

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

Запустим наше приложение и убедимся, что мы ничего не поломали. В корне '/' мы видим только заголовок. А формочка и список продуктов у нас спрятались по адресу '/products'.