रेडक्स में सेलेक्टर प्राप्त करना

कभी-कभी एप्लिकेशन में अतिरिक्त कोड से छुटकारा पाना और डेटा को एनकैप्सुलेट करना बहुत उपयोगी होता है।

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें। ध्यान दें कि एप्लिकेशन के कई स्थानों पर हम, सेलेक्टरों का उपयोग करके, उत्पादों का स्लाइस निकालते हैं, ताकि उसके साथ कुछ कार्रवाई कर सकें।

और अब हम अपनी productsSlice.js खोलेंगे, फ़ाइल के बिल्कुल अंत तक नीचे जाएंगे और कुछ पंक्तियाँ कोड जोड़ेंगे, जिसमें हम दो सेलेक्टर लिखेंगे और उन्हें एक्सपोर्ट करेंगे। एक फ़ंक्शन हमारे पास सभी उत्पादों को प्राप्त करने के लिए होगी:

export const selectAllProducts = (state) => state.products.products

और उसके बाद दूसरा - id के आधार पर एक उत्पाद प्राप्त करने के लिए:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

निश्चित रूप से आपके मन में एक उचित सवाल उठ सकता है - हमारे पास ऐसा घुमाव कहां से आया: state.products.products? जवाब सरल है, क्या आपने पिछले पाठ में स्लाइस की संरचना बदली थी और अब हमारे उत्पाद स्लाइस के एक अलग प्रॉपर्टी products में एक सरणी के रूप में स्थित होंगे उत्पादों के स्लाइस state.products के (याद रखें, कि यहाँ state - रेडक्स स्टेट की रूट ऑब्जेक्ट है जिसमें सभी स्लाइस शामिल हैं)।

इस प्रकार हमने बस कोड को स्थानांतरित कर दिया फ़ंक्शन-सेलेक्टर के लिए एप्लिकेशन में एक ही स्थान पर और अब हमें संबंधित परिवर्तन वहां करने की आवश्यकता है, जहां हमने उनका उपयोग किया था। चलिए फ़ाइल ProductsList.jsx से शुरू करते हैं। इसमें selectAllProducts इम्पोर्ट करें, क्योंकि यहाँ हमें सभी उत्पाद प्राप्त करने की आवश्यकता होगी:

import { selectAllProducts } from './productsSlice'

और ProductsList फ़ंक्शन के कोड की शुरुआत में, बदलें:

const products = useSelector((state) => state.products)

इस पंक्ति पर:

const products = useSelector(selectAllProducts)

और अब ProductPage.jsx फ़ाइल पर जाएं। यहाँ हमें id के आधार पर उत्पाद चाहिए था। पंक्ति को बदल दें (इम्पोर्ट के बारे में मत भूलें):

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

इस पर:

const product = useSelector((state) => selectProductById(state, productId))

EditProductForm.jsx फ़ाइल में स्वयं इसी तरह का परिवर्तन करें। यहाँ हमें भी id के आधार पर उत्पाद चाहिए।

याद रखें, कि ऐसा ऑप्टिमाइज़ेशन केवल आपकी सुविधा के लिए है और आप इसे तब कर सकते हैं जब आप इसे आवश्यक और सुविधाजनक समझें। और हमारे उदाहरण पर कल्पना करें, कि हम फ़ंक्शन-सेलेक्टर का कोड हर बार अलग-अलग स्थानों पर लिख रहे होते, और फिर हमने स्टेट की संरचना बदल दी, और फिर इसे सभी कम्पोनेंट्स में ठीक करना पड़ता।

अपने छात्रों वाला एप्लिकेशन खोलें। उसमें studentsSlice.js फ़ाइल खोलें। फ़ाइल के सबसे नीचे लिखें और एक्सपोर्ट करें, जैसा कि पाठ में दिखाया गया है, दो सेलेक्टर सभी छात्रों को प्राप्त करने के लिए selectAllStudents और एक छात्र को id के आधार पर प्राप्त करने के लिए selectStudentById।

अब selectAllStudents और selectStudentById को StudentsList.jsx, StudentPage.jsx और EditStudentForm.jsx फ़ाइलों में इम्पोर्ट करें, इन फ़ाइलों में संबंधित परिवर्तन करें, जैसा कि पाठ में दिखाया गया है।