Արտադրանքի խմբագրման էջ դիտարկիչում Redux-ում

Նախորդ դասին մենք ստեղծեցինք ձև արտադրանքը խմբագրելու համար: Եկեք դրա համար երթուղի ավելացնենք:

Բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ App.jsx ֆայլը և ավելացնենք ևս մեկ դուստր երթուղու օբյեկտ children հատկության համար նախատեսված զանգվածում (մի mոռացեք իմպորտ անել EditProductForm-ը):

App.jsx{
  path: '/editProduct/:productId',
  element: <EditProductForm />,
},

Նաև խմբագրման ձևին անցնելու համար մեզ պետք է հղում ստեղծել: Դրա համար բացենք ProductPage.jsx ֆայլը և տեղադրենք այս հղումը վերադարձվող վերստում ապրանքի քանակով վերջին պարբերությունից հետո և փակվող դիվից առաջ:

products/ProductPage.jsx<Link to={`/editProduct/${product.id}`} className="link-btn">
  edit
</Link>

Նաև իմպորտ անենք Link-ը ռութերի գրադարանից:

products/ProductPage.jsximport { Link } from 'react-router-dom'

Գործարկենք մեր հավելվածը և կտտացնենք որևէ ապրանքի դիտման կոճակին: Փորձենք այն խմբագրել և վերադառնանք հետ դեպի ապրանքների ցանկը, կտտացնելով ձախ 메뉴ի 'Products' հղմանը: Նաև Redux DevTools-ում կարող եք տեսնել նոր ակցիա productUpdated և դիտել փոփոխությունները ապրանքի օբյեկտում store-ում:

Задание 1

Բացեք ձեր ուսանողների հավելվածը: App.jsx ֆայլում ավելացրեք ևս մեկ դուստր երթուղի ուսանողի տվյալները խմբագրելու համար:

Задание 2

Ավելացրեք Link տարրը ուսանողի էջի վերստում՝ նրա տվյալների խմբագրման էջին անցնելու համար:

Задание 3

Գործարկեք ձեր հավելվածը, փորձեք խմբագրել որևէ ուսանողի տվյալները: Ուշադրություն դարձրեք դիտարկիչի հասցեային տողին, երբ գտնվում եք խմբագրման էջում: Դիտեք փոփոխությունները դիտարկիչի Redux DevTools-ում: