Работа з дадзенымі ў 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. Запусціце прыкладанне і пераканайцеся, што ў вас усё працуе.