Redux में डेटा के साथ काम करना

पिछले भाग में हमने Redux के बुनियादी कामकाज को लागू किया था और अब आप Redux एप्लिकेशन के मुख्य सिद्धांतों को जानते हैं। अगले पाठों में हम अपने उत्पादों वाले एप्लिकेशन की कार्यक्षमता को जोड़ना शुरू करेंगे और डेटा के साथ काम करेंगे।

चूंकि एप्लिकेशन नए घटकों और रूटों से भरता जाएगा, इसलिए आइए रूटिंग के साथ एक काम करते हैं। उत्पादों वाला एप्लिकेशन खोलें, फिर root.jsx फ़ाइल खोलें। इसमें Outlet घटक आयात करें, और साथ ही ProductsList और NewProductForm के आयात वाली पंक्तियाँ हटा दें:

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

अब हमारा Root घटक रूट पथ '/' पर दिखाई देगा, और अन्य सभी घटक Outlet में चाइल्ड रूट्स पर दिखाई देंगे। इसके लिए हम Root घटक के लिए #main-page डिव की लेआउट में थोड़ा सुधार करेंगे:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

यहाँ हम NewProductForm और ProductsList घटकों के बजाय Outlet लगाएंगे:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

अब हम उत्पाद जोड़ने के फॉर्म को ProductsList में दिखाएंगे। आइए इस घटक वाली फ़ाइल खोलें और फॉर्म का आयात जोड़ें:

import { NewProductForm } from './NewProductForm'

और अब उत्पादों की सूची से ठीक पहले फॉर्म वाला घटक जोड़ दें। अब हमारी लेआउट ऐसी दिखेगी:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

आइए index.css में products-list क्लास के लिए स्टाइल लिखें:

.products-list {
	display: flex;
	flex-direction: column;
}

अब हमें केवल मुख्य घटक App में बदलाव करना बाकी है। App.jsx खोलें और इसमें ProductsList घटक आयात करें:

import { ProductsList } from './parts/products/ProductsList'

फिर हमारे अभी के एकमात्र रूट, जो कि रूट रूट है, के लिए children प्रॉपर्टी जोड़ें:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

और इस प्रॉपर्टी के वैल्यू में पहला चाइल्ड रूट लिखें। इसके पथ के रूप में 'products' सेट करें। अब इस एड्रेस पर हमारा उत्पादों की सूची वाला ProductsList दिखाई देगा:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

आइए हमारा एप्लिकेशन चलाएं और सुनिश्चित करें कि हमने कुछ भी खराब नहीं किया है। रूट '/' पर हमें केवल हेडिंग दिखाई देती है। और फॉर्म और उत्पादों की सूची '/products' एड्रेस पर छिपी हुई है।

अपना छात्रों वाला एप्लिकेशन खोलें। root.jsx फ़ाइल में StudentsList और NewStudentForm घटकों को Outlet से बदल दें।

अब छात्र जोड़ने का फॉर्म आपके StudentsList में दिखाई देना चाहिए।

अपने मुख्य घटक App में बदलाव करें। रूट रूट में '/students' पथ वाला एक चाइल्ड रूट जोड़ें, जिस पर आपका StudentsList दिखाई देगा। एप्लिकेशन चलाएं और सुनिश्चित करें कि सब कुछ ठीक से काम कर रहा है।