Redux හි බ්රවුසරයේ නිෂ්පාදනය සංස්කරණ පිටුව

පසුගිය පාඩමේදී අපි නිෂ්පාදනයක් සංස්කරණය කිරීම සඳහා පෝරමයක් සාදා ගත්තෙමු. අපි එය සඳහා මාර්ගයක් එක් කරමු.

අපගේ නිෂ්පාදන ඇප් එක විවෘත කර, එහි App.jsx ගොනුව විවෘත කර children ගුණාංගය සඳහා ඇති අරාවට තවත් වස්තුවක් එකතු කරන්න (EditProductForm ආයාත කිරීමට අමතක නොකරන්න):

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

එසේම සංස්කරණ පෝරමයට යාමට අපට සබැඳියක් සෑදීමට අවශ්‍යය. මේ සඳහා ProductPage.jsx විවෘත කර මෙම සබැඳිය නිෂ්පාදන ප්‍රමාණය සමඟ අවසාන ඡේදයට පසුව සහ වසා දමන div ට පෙර ආපසු යවනු ලබන HTML හි තබන්න:

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

එසේම රවුටර් පුස්තකාලයෙන් Link ආයාත කරන්න:

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

අපගේ ඇප් එක දියත් කර නිෂ්පාදනයක දර්ශන බොත්තම මත ක්ලික් කරන්න. එය සංස්කරණය කිරීමට උත්සාහ කර නැවත වම් පස මෙනුවේ ඇති 'Products' සබැඳිය මත ක්ලික් කර නිෂ්පාදන ලැයිස්තුවට ආපසු යන්න. Redux DevTools හි ඔබට නව productUpdated ක්‍රියාව දැක ගත හැකිය සහ store හි නිෂ්පාදන වස්තුවේ වෙනස්කම් නරඹන්න.

ඔබගේ ශිෂ්‍ය ඇප් එක විවෘත කරන්න. App.jsx ගොනුවේ ශිෂ්‍ය දත්ත සංස්කරණය කිරීම සඳහා තවත් දරු මාර්ගයක් එක් කරන්න.

ශිෂ්‍ය පිටුවේ HTML හි ඔහුගේ දත්ත සංස්කරණ පිටුවට යාම සඳහා Link අංගයක් එක් කරන්න.

ඔබගේ ඇප් එක දියත් කර, ශිෂ්‍යයෙකුගේ දත්ත සංස්කරණය කිරීමට උත්සාහ කරන්න. ඔබ සංස්කරණ පිටුවේ සිටින විට බ්රවුසරයේ ලිපින තීරුව දෙස අවධානය යොමු කරන්න. බ්රවුසරයේ Redux DevTools හි වෙනස්කම් නරඹන්න.