Տվյալների աշխատանք Redux-ում

Նախորդ բաժնում մենք իրականացրեցինք Redux-ի հիմնական աշխատանքի սխեման և այժմ դուք գիտեք Redux հավելվածի աշխատանքի հիմնական սկզբունքները: Հաջորդ դասերին մենք կսկսենք լրացնել մեր ապրանքներով հավելվածի ֆունկցիոնալը և կաշխատենք տվյալների հետ:

Քանի որ հավելվածը կծավալվի նոր բաղադրիչներով և երթուղիներով, եկեք մեկ բան անենք երթուղիչով: Բացեք ապրանքներով հավելվածը, ապա root.jsx ֆայլը: Իմպորտացրեք դրա մեջ Outlet բաղադրիչը, ընդ որում ջնջեք ProductsList և NewProductForm իմպորտների տողերը:

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

Այժմ Root բաղադրիչը մեզ մոտ կցուցադրվի արմատային '/' ճանապարհով, իսկ բոլոր մյուս բաղադրիչները Outlet-ի դուստր ճանապարհներով: Դրա համար մի փոքր ուղղենք Root բաղադրիչի #main-page դիվի վերստը:

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' հասցեով: