Саҳифаи таҳрири маҳсул дар браузер дар Redux

Дар дарси гузашта мо шакл барои таҳрири маҳсул сохтем. Биёед барои он роҳеро пайваст кунем.

Барномаи моро бо маҳсулот кушоем, ва дар он файли App.jsx ва як объекти дигари роҳи фарзандро ба массив барои хосияти children илова кунем (на фаромӯшед, ки EditProductForm-ро ворид кунед):

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

Инчунин барои гузариш ба шакли таҳрир мо ба эҳтиёҷ дорем, ки пайванд созем. Барои ин кушоем ProductPage.jsx ва ин пайвандро дар верстаки баргардонидашуда пас аз абзаси охирин бо миқдори маҳсул ва пеш аз диви басташаванда ҷойгир кунем:

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

Инчунин Link-ро аз китобхонаи роутер ворид кунем:

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

Барномаи худро оғоз кунем ва ба тугмаи тамошо як маҳсули дилхоҳ клик кунем. Биёед онро таҳрир кунем ва бозгардем ба рӯйхати маҳсулот, клик карда рӯйи пайванди 'Products' дар менюи чап. Инчунин дар Redux DevTools шумо метавонед амали навро бубинед productUpdated ва тағйиротҳоро бубинед объекти маҳсул дар store.

Барномаи худро бо донишҷӯён кушоед. Дар файли App.jsx роҳи фарзанди дигар барои таҳрири маълумоти донишҷӯ илова кунед.

Элементи Link-ро ба верста дар саҳифаи донишҷӯ барои гузариш ба саҳифаи таҳрири маълумоти ӯ илова кунед.

Барномаи худро оғоз кунед, биёед маълумоти як донишҷӯи дилхоҳро таҳрир кунем. Ба сатри суроғаи браузер диққат диҳед, вақте ки шумо ҳастед дар саҳифаи таҳрири маълумот. Тағйиротҳоро дар Redux DevTools-и браузер бубинед.