Рад са подацима у Redux-у

У претходном одељку имплементирали смо основну шему рада Redux-а и сада знате главне принципе рада Redux апликације. У следећим часовима почећемо да допуњавамо функционалност наше апликације са производима и порадићемо са подацима.

Пошто ће апликација обрастати новим компонентама и рутама, хајде да урадимо једну ствар са рутирањем. Отворите апликацију са производима, затим фајл root.jsx. Импортујте у њега компоненту Outlet, при том обришите линије са импортом ProductsList и NewProductForm:

import { Outlet } from 'react-router-dom'

Сада ће се компонента Root приказивати на кореном путу '/', а све остале компоненте на дечијим путевима у Outlet. Зато ћемо мало исправити верстку дива #main-page за компоненту Root:

<div id="main-page">
	<h2>Моја апликација производа</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Овде ћемо ставити Outlet уместо компонената NewProductForm и ProductsList:

<div id="main-page">
	<h2>Моја апликација производа</h2>
	<hr></hr>
	<Outlet />
</div>

Форму за додавање производа сада ћемо приказивати у ProductsList. Хајде да отворимо фајл са том компонентом и додамо импорт форме:

import { NewProductForm } from './NewProductForm'

А сада додајмо компоненту са формом директно испред листе производа. Сада ће наша верстка изгледати овако:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Производи</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. Покрените апликацију и уверите се да вам све ради.