Работа с данными в 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. Запустите приложение и убедитесь, что у вас все работает.