Рад са подацима у 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>Моја апликација производа</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

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

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

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

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

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

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Производи</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'.