रेडक्स में फॉर्म और लोकल स्टेट्स
पिछले पाठों में हमने स्टोर से डेटा प्राप्त करना और उसे रिएक्ट कंपोनेंट में आउटपुट करना सीखा। इस पाठ में हम नए डेटा जोड़ने के लिए आगे बढ़ेंगे। हम इसे एक फॉर्म की सहायता से करेंगे, जिसे भरने पर, विक्रेता एक नया उत्पाद जोड़ सकता है।
इससे शुरू करें कि हमेशा ग्लोबल रेडक्स स्टेट का उपयोग करने का कोई मतलब नहीं होता। ऐसे मौके आते हैं जब हम अपनी जरूरतों के लिए लोकल स्टेट्स बना सकते हैं। लोकल स्टेट्स से हमारा मतलब उन स्टेट्स से होगा जिनका उपयोग तकनीकी जरूरतों के लिए किसी विशेष कंपोनेंट के अंदर किया जाता है। उदाहरण के लिए, किसी बटन द्वारा कुछ छिपाने या दिखाने के लिए।
हमारे मामले में उपयोगकर्ता फॉर्म में डेटा दर्ज करेगा और स्वाभाविक रूप से, इसके लिए हमें स्टेट्स की आवश्यकता होगी। हम ग्लोबल रेडक्स स्टेट का उपयोग कर सकते थे, लेकिन इसका कोई मतलब नहीं है, क्योंकि हमारे स्टेट्स केवल एप्लिकेशन के एक ही स्थान पर उत्पाद जोड़ने के फॉर्म के लिए काम करेंगे। मुख्य नियम जिसका पालन करने की आवश्यकता है - लोकल स्टेट्स उस कंपोनेंट के बाहर काम नहीं कर सकते जिसमें वे बनाए गए हैं, और किसी भी स्थिति में स्टोर को प्रभावित नहीं कर सकते। फॉर्म बनाते समय अक्सर इस प्रकार की प्रथा का उपयोग किया जाता है।
आइए हमारे उत्पादों वाले एप्लिकेशन की
products फोल्डर खोलें, उसमें
NewProductForm.jsx फाइल बनाएं
और इसमें useState हुक इम्पोर्ट करें:
import { useState } from '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>Add a New Product</h2>
<form>
</form>
</div>
)
अपने छात्रों वाला एप्लिकेशन खोलें।
students फोल्डर में
NewStudentForm.jsx फाइल बनाएं।
NewStudentForm कंपोनेंट में आवश्यक
फील्ड्स के लिए लोकल स्टेट्स बनाएं, प्रत्येक
फील्ड के लिए प्रोसेसिंग लिखें, जैसा पाठ में दिखाया गया है।
NewStudentForm कंपोनेंट में एक शीर्षक और
खाली फॉर्म वाली वर्स्टक वापस करें।
