Redux да браузерда махсулотни таҳрирлаш саҳифаси

Ўтган дарсимизда биз махсулотни таҳрирлаш учун шакл ясадик. Келинг, унинг учун йўналишни бирлаштирамиз.

Маҳсулотлар билан ишлайдиган илованимизни ochамиз, ва ундаги App.jsx файлини ochиб, children хусусияти учун массивга яна битта фарзанд йўналиш объекти қўшамиз (EditProductForm ни импорт қилишни унутмангиз):

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

Шунингдек, таҳрирлаш шаклига ўтиш учун бизга havola kerak. Буни амалга oshirish учун ProductPage.jsx ни ochамиз ва бу havolani махсулот soni билан oxирги абзацдан кейин ва yopiladigan div дан олдин қайтарилган версткада жойлаштирамиз:

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

Шунингдек, роутер кутубхонасидан Link ни импорт қиламиз:

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

Илованимизни ишга туширамиз ва қандайдир бир махсулотни кўриш тугмасини босинамиз. Уни таҳрирлашни синab кўрамиз ва чапдаги менюдаги 'Products' ҳаволасини босиб, махсулотлар рўйхатига қайтамиз. Шунингдек, Redux DevTools да сиз янги productUpdated экшенни кўришингиз ва store даги махсулот объектидаги ўзгаришларни кўриб чиқишингиз мумкин.