Работа с данни в 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>Products</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'.