Работа с данными в Redux
В предыдущем разделе мы реализовали базовую схему работы Redux и теперь вы знаете основные принципы работы Redux приложения. В следующих уроках мы начнем дополнять функционал нашего приложения с продуктами и поработаем с данными.
Поскольку приложение будет обрастать новыми
компонентами и маршрутами, давайте сделаем
с маршрутизацией одну вещь. Откройте приложение с
продуктами, затем файл root.jsx. Импортируйте
в него компонент Outlet, при этом удалите
строчки с импортом ProductsList
и NewProductForm:
import { Outlet } from 'react-router-dom'
Теперь копмонент Root у нас будет отображаться
по корневому пути '/', а все другие компоненты
по дочерним в Outlet. Для этого немного исправим
верстку дива #main-page для компонента Root:
<div id="main-page">
<h2>My Products App</h2>
<hr></hr>
<NewProductForm />
<ProductsList />
</div>
Здесь мы поставим Outlet вместо
компонентов NewProductForm и
ProductsList:
<div id="main-page">
<h2>My Products App</h2>
<hr></hr>
<Outlet />
</div>
Форму для добавления продуктов мы теперь будем
выводить в ProductsList. Давайте откроем
файл с этим компонентом и добавим импорт формы:
import { NewProductForm } from './NewProductForm'
А теперь добавим компонент с формой прямо перед списком продуктов. Теперь наша верстка будет выглядеть так:
return (
<div>
<NewProductForm />
<div>
<h2>Products</h2>
{dispProducts}
</div>
</div>
)
Допишем стиль для класса products-list
в index.css:
.products-list {
display: flex;
flex-direction: column;
}
Нам остается только внести изменения
в главный компонент App. Откроем
App.jsx и импортируем в него компонент
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Затем для нашего пока единственного
маршрута, являющегося корневым, добавим
свойство children:
const router = createBrowserRouter([
{ path: '/', element: <Root />, children: [] },
])
И пропишем в качестве значения этого свойства
первый дочерний маршрут. В качестве пути
установим ему 'products'. Теперь по этому
адресу у нас будет отображаться
наш список с продуктами ProductsList:
children: [
{
path: '/products',
element: <ProductsList />,
},
],
Запустим наше приложение и убедимся, что
мы ничего не поломали. В корне '/' мы видим
только заголовок. А формочка и список продуктов
у нас спрятались по адресу '/products'.
Откройте ваше приложение со студентами.
В файле root.jsx замените компоненты
StudentsList и NewStudentForm
на Outlet.
Пусть теперь форма для добавления студента
отображается у вас в StudentsList.
Внесите изменения в ваш главный компонент
App. Добавьте к корневому маршруту дочерний,
с путем '/students', по которому будет
отображаться ваш StudentsList. Запустите
приложение и убедитесь, что у вас все
работает.