प्रतिक्रिया-रेडक्स में स्लाइस का उपयोग कैसे करें

अवलोकन

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

क्रिएट स्लाइस क्या है What

createSlice पैकेज redux-toolkit के साथ आता है । यह एक ऐसा फ़ंक्शन है जो प्रारंभिक स्थिति, रेड्यूसर फ़ंक्शंस से भरा ऑब्जेक्ट, और "स्लाइस नाम" स्वीकार करता है, और स्वचालित रूप से एक्शन क्रिएटर्स और एक्शन प्रकार उत्पन्न करता है जो रेड्यूसर और राज्य के अनुरूप होते हैं।

क्रिएट स्लाइस कैसे काम करता है?

1. configStore a के साथ Redux स्टोर बनाएं
   । configStore एक रेड्यूसर फ़ंक्शन को नामित तर्क
   b के रूप में स्वीकार करता है । configStore स्वचालित रूप से अच्छी डिफ़ॉल्ट सेटिंग्स के साथ स्टोर सेट करता है
2. रिएक्ट एप्लिकेशन घटकों को Redux स्टोर प्रदान करें
   a. अपने <App />
   b के चारों ओर एक React-Redux <Provider> कंपोनेंट लगाएं। Redux स्टोर को <प्रदाता स्टोर = {स्टोर}> के रूप में पास करें
3. createSlice
   a के साथ एक Redux "स्लाइस" रिड्यूसर बनाएं । एक स्ट्रिंग नाम, एक प्रारंभिक स्थिति, और नामित रेड्यूसर फ़ंक्शंस के साथ createSlice को कॉल करें
   b। रेड्यूसर फ़ंक्शन इमर
   सी का उपयोग करके राज्य को "म्यूट" कर सकते हैं । उत्पन्न स्लाइस रिड्यूसर और एक्शन क्रिएटर्स को निर्यात करें
4. रिएक्ट घटकों में रिएक्ट-रेडक्स उपयोग चयनकर्ता/उपयोग डिस्पैच हुक का उपयोग करें
   a. उपयोग चयनकर्ता हुक के साथ स्टोर से डेटा पढ़ें
   b. डिस्पैच फ़ंक्शन को यूज़डिस्पैच हुक के साथ प्राप्त करें, और आवश्यकतानुसार डिस्पैच कार्रवाई करें

मेरा src फ़ोल्डर इस तरह दिखता है looks

सबसे पहले, createSlice का उपयोग करके एक मॉड्यूल स्लाइस बनाएं। createSlice फ़ंक्शन की रेड्यूसर विशेषता में ऐसे फ़ंक्शन जोड़ें जो व्यवसाय/डोमेन तर्क रखेंगे।

स्लाइस के उदाहरण से प्राप्त होने वाले रेड्यूसर को निर्यात करें।

कॉन्फ़िगरस्टोर का उपयोग करके स्टोर बनाते समय रेड्यूसर आयात करें और इसे वैश्विक स्टोर रेड्यूसर में पास करें।

अब जब आपके पास एक स्टोर तैयार है, तो आप इसे अपने ऐप में एक प्रदाता को पास कर सकते हैं और उस प्रदाता द्वारा ऐप के मूल घटक को लपेट सकते हैं।

प्रदाता ऐप घटक के अंदर प्रत्येक स्तर पर प्रत्येक घटक को स्टोर उपलब्ध कराएगा। अब, हम काउंटर घटक में स्टोर का उपयोग करेंगे। सबसे पहले, आपको उपयोग चयनकर्ता हुक का उपयोग करके स्टोर से मूल्य प्राप्त करने की आवश्यकता होगी

हम गिनती प्रदर्शित करने के लिए सीधे इस गणना चर का उपयोग कर सकते हैं। अब, हम स्टोर को अपडेट करेंगे और उसके लिए, हमें कार्रवाई की आवश्यकता होगी जिसे स्लाइस इंस्टेंस से निर्यात किया जा सकता है।

इन क्रियाओं को घटक में आयात करें और हुक फ़ंक्शन का उपयोग करके इच्छित क्रिया को भेजें डिस्पैच का उपयोग करें। UseDispatch फ़ंक्शन डिस्पैच प्रकार का एक उदाहरण देता है।

इतना ही! आप देख सकते हैं कि कैसे स्लाइस हमारे लिए रेड्यूसर और क्रियाएं बनाता है जिसमें पारंपरिक रेडक्स आर्किटेक्चर की तुलना में कम समय और कम कोड लगता है। अब हम जानते हैं कि स्टोर कैसे बनाया जाता है, डेटा को प्रदर्शित करने और अपडेट करने के लिए डेटा का उपयोग कैसे किया जाता है। यह सबसे बुनियादी उदाहरण था ताकि हर कोई रिएक्टजेएस में स्लाइस के उपयोग को समझ सके।

यदि आप प्रतिक्रिया, रेडक्स या स्लाइस के बारे में अधिक जानना चाहते हैं तो मुझे टिप्पणियों में बताएं।

यहां ज्ञान बांटकर समुदाय को मजबूत बनाना है। हम गुप्त रूप से क्या बना रहे हैं, यह जानने के लिए मुझे और मेरी टीम को फॉलो करें .