Redux හි ආකෘති සහ දේශීය තත්ත්වයන්
පසුගිය පාඩම්වලදී, අපි store වලින් දත්ත ලබා ගැනීමට සහ ඒවා React සංරචකයකින් ප්රතිදානය කිරීමට ඉගෙන ගත්තෙමු. මෙම පාඩමෙන්, අපි නව දත්ත එකතු කිරීම ආරම්භ කරමු. අපි මෙය කරන්නේ ආකෘතියක් භාවිතා කරමින්, එය පුරවා, විකුණුම්කරුට නව නිෂ්පාදනයක් එකතු කිරීමට හැකි වන පරිදි.
Redux හි ගෝලීය තත්ත්වය භාවිතා කිරීම සැමවිටම අර්ථවත් නොවන බවින් අපි ආරම්භ කරමු. අවස්ථා ඇතිවන අතර, අපගේ අවශ්යතා සඳහා අපට දේශීය තත්ත්වයන් සෑදිය හැකිය. දේශීය තත්ත්වයන් ලෙස අපි හඳුන්වන්නේ තාක්ෂණික අවශ්යතා සඳහා නිශ්චිත සංරචකයක ඇතුළත භාවිතා කරන තත්ත්වයන් ය. උදාහරණයක් ලෙස, බොත්තමක් මත යමක් සැඟවීමට හෝ පෙන්වීමට.
අපගේ අවස්ථාවේදී, පරිශීලකයා ආකෘතියකට දත්ත ඇතුළත් කරනු ඇති අතර, ස්වාභාවිකවම, මේ සඳහා අපට තත්ත්වයන් අවශ්ය වේ. ගෝලීය Redux තත්ත්වය භාවිතා කළ හැකි නමුත් මෙහි අර්ථයක් නැත, මන්ද අපගේ තත්ත්වයන් නිෂ්පාදනයක් එකතු කිරීමේ ආකෘතිය සඳහා යෙදුමේ එක් ස්ථානයක පමණක් ක්රියා කරනු ඇත. මෙයට අනුගමනය කළ යුතු ප්රධාන නියමය නම්, දේශීය තත්ත්වයන් ඒවා සෑදී ඇති සංරචකයෙන් පිටත ක්රියා කිරීමට හැකි නොවන අතර, කිසිම අවස්ථාවක store සමඟ සම්බන්ධ නොවිය යුතුය. එවැනි පරිචයක් බොහෝ විට ආකෘති සෑදීමේදී භාවිතා වේ.
අපි අපගේ නිෂ්පාදන සමඟ ඇති යෙදුමේ products ෆෝල්ඩරය
විවෘත කර, එහි NewProductForm.jsx ගොනුවක් සාදා එයට
useState කොක් ආයාත කරමු:
import { useState } from 'react'
දැන් අපි සංරචකයම ආකෘතිය සමඟ සාදා එහි සාමාන්ය තත්ත්වයන් ලියන්නෙමු, අපි එය පෙර React හි කළ ආකාරයට. අපට නම, විස්තරය, මිල සහ නිෂ්පාදන ප්රමාණය සමඟ කටයුතු කිරීමට තත්ත්වයන් අවශ්යය:
export const NewProductForm = () => {
const [name, setName] = useState('')
const [desc, setDesc] = useState('')
const [price, setPrice] = useState(0)
const [amount, setAmount] = useState(0)
}
ඊළඟට, අපි පරිශීලකයා දත්ත ඇතුළත් කරන විට සෑම ක්ෂේත්රයක් සඳහාම සම්මත පිළිකුලක් එකතු කරමු:
const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)
ඉන්පසු සංරචකයේ ශීර්ෂය සහ හිස් ආකෘතියක් සහිත දර්ශනයක් ආපසු දෙන්න:
return (
<div>
<h2>නව නිෂ්පාදනයක් එක් කරන්න</h2>
<form>
</form>
</div>
)
ඔබගේ ශිෂ්ය යෙදුම විවෘත කරන්න.
students ෆෝල්ඩරයේ ඇති
NewStudentForm.jsx ගොනුවක් සාදන්න.
NewStudentForm සංරචකයේ ඔබට අවශ්ය
ක්ෂේත්ර සඳහා දේශීය තත්ත්වයන් අරඹන්න, සෑම
ක්ෂේත්රයක් සඳහාම පාඩමේ පෙන්වා ඇති පරිදි පිළිකුලක් ලියන්න.
NewStudentForm සංරචකයේ ශීර්ෂය සහ හිස් ආකෘතියක්
අඩංගු දර්ශනයක් ආපසු දෙන්න.
