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

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

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

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

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

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

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

import { Link } from 'react-router-dom'

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

Талабалар билан ишлайдиган иловангизни ochинг. App.jsx файлида талаба маълумотларини таҳрирлаш учун яна битта фарзанд йўналиш қўшинг.

Талаба саҳифасининг версткасида унинг маълумотларини тахрирлаш саҳифасига ўтиш учун Link элементни қўшинг.

Иловангизни ишга туширинг, бирор талабанинг маълумотларини тахрирлашни синab кўринг. Тахрирлаш саҳифасида бўлганингизда браузерингiz манзил сатрига eʼтибор беринг. Браузерингиздаги Redux DevTools даги ўзгаришларни кўриб чиқинг.