Работа з дадзенымі ў 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>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'.