Работа со податоци во Redux

Во претходниот дел, имплементиравме основна шема за работа на Redux и сега ги знаете главните принципи на работа на Redux апликацијата. Во следните уроци, ќе започнеме да го дополнуваме функционалот на нашата апликација со производи и ќе работиме со податоци.

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

app/root.jsximport { Outlet } from 'react-router-dom'

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

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

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

app/root.jsx<div id="main-page">
  <h2>My Products App</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'.