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

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

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

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

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

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

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

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

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

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

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

products/ProductsList.jsxconst products = useSelector((state) => state.products)

इस पंक्ति पर:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

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

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

इस पर:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

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

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