Redux හි දත්ත සංස්කරණය සඳහා පෝරමය

දැන් අපට store හි දත්ත වෙනස් කිරීම සඳහා reducer ඇත. මෙම පාඩමේදී අපි නිෂ්පාදන දත්ත සංස්කරණය කිරීමට භාවිතා කළ හැකි පෝරමයක් නිර්මාණය කරමු.

අපගේ නිෂ්පාදන ඇප් එක විවෘත කර products ෆෝල්ඩරය තුළ EditProductForm.jsx ගොනුව සාදන්න. EditProductForm සංරචකය නිර්මාණය කිරීම NewProductForm හා සමාන වනු ඇත, කෙසේවෙතත් අපි විස්තර කරන කරුණු කිහිපයක් හැර. එම නිසා NewProductForm.jsx හි කේතය සම්පූර්ණයෙන්ම පිටපත් කර සාදන ලද ගොනුව EditProductForm.jsx තුළ අලවන්න. දැන් අපි පිළිවෙලින් ආරම්භ කරමු.

ආයාතයෙන් nanoid ඉවත් කරන්න, මෙහිදී අපට id ජනනය කිරීමට අවශ්‍ය නැත. ආයාතය productAdded වෙනුවට productUpdated වෙනස් කරන්න, මන්ද මෙහිදී අපි නිෂ්පාදනයක් එකතු කිරීම සඳහා නොව යාවත්කාලීන කිරීම සඳහා action භාවිතා කරනු ඇත.

ඊළඟට අපගේ සංරචකයේ ශ්‍රිතයේ නම NewProductForm වෙතින් EditProductForm වෙත වෙනස් කරමු.

EditProductForm ශ්‍රිතය තුළ name, desc, price සහ amount සඳහා local state අරඹනවාට පෙර, තවත් පේළි කිහිපයක් ඇතුළු කරමු. පෙර සඳහන් කළ පරිදි, මෙහිදී අපට id ජනනය කිරීමට අවශ්‍ය නැත. දැන් අපගේ කාර්යය වන්නේ වෙනස් කරන නිෂ්පාදනයේ දත්තවලින් එය ලබා ගැනීමයි. වෙනම පිටුවක් සෑදීමේදී අපි මෙය කලින් කර ඇත. එබැවින්, useParams hook භාවිතා කර id ලබා ගන්න, ඉන්පසු අවශ්‍ය නිෂ්පාදනය සොයා ගන්න, useSelector hook භාවිතා කරමින් (ගොනුව ආරම්භයේදී hooks දෙකම ආයාත කිරීමට අමතක නොකරන්න):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

ඊට පසු local state ප්‍රකාශය කිරීමේ කොටස වෙනස් කරමු. දැන් අපට ආරම්භක අගය ලෙස store වෙතින් ලැබුණු නිෂ්පාදන දත්ත සැකසිය යුතුය. පළමු state එක මේ ආකාරයෙන් පෙනෙනු ඇත, ඉතිරි තුන ඔබ විසින්ම වෙනස් කරන්න:

const [name, setName] = useState(product.name)

useDispatch සඳහා විචල්‍යය පවරා ගැනීමෙන් පසු අපි තවත් පේළියක කේතයක් useNavigate hook සඳහා ඇතුළු කරමු. අපි එය පරිශීලකයා පෝරමයේ කළ වෙනස්කම් සුරැකූ විට නිෂ්පාදන පිටුවට ආපසු යාමට භාවිතා කරමු:

const navigate = useNavigate()

එමෙන්ම ගොනුව ආරම්භයේදී මෙම hook ආයාත කරන්න:

import { useNavigate, useParams } from 'react-router-dom'

ඊළඟට අප සතුව ඇත්තේ ආදාන ක්ෂේත්‍ර සඳහා handlers වේ. ඒවාට පසුව අපට onSaveProductClick ශ්‍රිතය හරියක් කිරීමට අවශ්‍යයි. දැන් එහිදී ක්ලික් කිරීමේදී අපි productUpdated action එක යවන්නෙමු ලැබුණු id සහ වෙනස් කළ දත්ත අඩංගු වස්තුවක් ලෙස. පසුව අපගේ navigate එකතු කරමු, වෙනස් කළ නිෂ්පාදන පිටුවට යාමට:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

අපේ නැවත ලබා දෙන markup එකේ මෙම පේළිය සොයා ගැනීමට පමණක් ඉතිරිව ඇත:

<h2>Add a New Product</h2>

සහ එය මෙයින් ප්‍රතිස්ථාපනය කරන්න:

<h2>Edit Product</h2>

ඔබගේ ශිෂ්‍ය ඇප් එක විවෘත කරන්න. EditStudentForm.jsx ගොනුව NewStudentForm.jsx හි සමානකම් අනුව සාදන්න. පාඩමේ දැක්වූ පරිදි වෙනස්කම් එයට ඇතුළු කරන්න.