Redux वास्तुकला। हाँ या नहीं?

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



जब हाइक के डेवलपर्स कुछ नए काम शुरू करते हैं, तब, जब जांच किए गए समाधान की वास्तुकला पर चर्चा करते हैं, तो उनके पास कई प्रश्न होते हैं:

• यह एक प्रायोगिक अवसर है जो वे कह सकते हैं, "उड़ना नहीं", और इसे छोड़ना होगा। इसे देखते हुए, क्या एप्लिकेशन आर्किटेक्चर को डिजाइन करने में समय बिताना आवश्यक है?
• एक प्रयोगात्मक अनुप्रयोग सिर्फ एक एमवीपी है, एक न्यूनतम व्यवहार्य उत्पाद है जिसमें 1-2 स्क्रीन हैं और जितनी जल्दी हो सके बनाने की आवश्यकता है। इसे देखते हुए, क्या मुझे Redux से संपर्क करना चाहिए?
• प्रायोगिक अनुप्रयोग के लिए सहायक आधारभूत संरचना तैयार करने के लिए उत्पाद प्रबंधकों के लिए लगने वाले समय को आप कैसे सही ठहराते हैं?

वास्तव में, Redux आपको इन सभी सवालों के सही जवाब खोजने में मदद करता है। Redux आर्किटेक्चर रिएक्ट से अलग एप्लिकेशन स्टेट की मदद करता है। यह आपको आवेदन के शीर्ष स्तर पर स्थित एक वैश्विक भंडार बनाने और अन्य सभी घटकों के लिए राज्य पहुंच प्रदान करने की अनुमति देता है।

जिम्मेदारियों का अलग होना

"जिम्मेदारियों का पृथक्करण" क्या है? विकिपीडिया इसके बारे में क्या कहता है: “कंप्यूटर विज्ञान में, जिम्मेदारियों का विभाजन एक कंप्यूटर प्रोग्राम को कार्यात्मक ब्लॉकों में विभाजित करने की प्रक्रिया है, जो एक दूसरे के कार्यों को यथासंभव कम करते हैं। एक अधिक सामान्य मामले में, जिम्मेदारियों का विभाजन एक समस्या को हल करने के लिए एकल प्रक्रिया का सरलीकरण है, जो उपकेंद्रों को हल करने के लिए बातचीत की प्रक्रियाओं में विभाजित करके है। "

Redux की वास्तुकला आपको अनुप्रयोगों में जिम्मेदारियों के पृथक्करण के सिद्धांत को लागू करने की अनुमति देती है, उन्हें चार ब्लॉकों में तोड़कर, निम्न आकृति में दिखाया गया है।


Redux आर्किटेक्चर

इन ब्लॉकों का संक्षिप्त विवरण इस प्रकार है:

• प्रतिनिधि या उपयोगकर्ता इंटरफ़ेस घटक (UI घटक) शुद्ध फ़ंक्शंस से मिलते-जुलते हैं (अर्थात, वे फ़ंक्शंस जो उनके द्वारा हस्तांतरित डेटा को नहीं बदलते हैं और कुछ अन्य गुण हैं) जो स्टोर से इसे स्थानांतरित किए गए डेटा के आधार पर स्क्रीन पर जानकारी प्रदर्शित करने के लिए जिम्मेदार हैं। वे सीधे डेटा नहीं बदलते हैं। जब कोई घटना होती है, या यदि उपयोगकर्ता उनके साथ बातचीत करता है, तो वे कार्यों के रचनाकारों की ओर मुड़ते हैं।
• एक्शन क्रिएटर एक्ट बनाने और डिस्पैच करने के लिए जिम्मेदार होते हैं।
• Reducers शेड्यूल किए गए कार्य प्राप्त करते हैं और रिपॉजिटरी की स्थिति को अपडेट करते हैं।
• डेटा स्टोर एप्लिकेशन डेटा को संग्रहीत करने के लिए जिम्मेदार है।

एक उदाहरण के रूप में Redux की वास्तुकला पर विचार करें।

क्या होगा अगर विभिन्न घटकों को समान डेटा की आवश्यकता हो?

हाइक ऐप में उपयोगकर्ता की मित्र सूची प्रदर्शित करने वाली एक स्क्रीन है। इस स्क्रीन के शीर्ष पर उनकी मात्रा की जानकारी प्रदर्शित की गई है।


दोस्तों हाइक ऐप में स्क्रीन

यहाँ 3 प्रतिक्रिया घटक हैं:

• FriendRow एक घटक है जिसमें उपयोगकर्ता के मित्र का नाम और उसके बारे में कुछ अन्य जानकारी होती है।
• FriendsHeader - एक घटक जो "MY FRIENDS" शिलालेख प्रदर्शित करता है और दोस्तों की संख्या के बारे में जानकारी देता है।
• ContainerView FriendsHeader कंटेनर घटक है जो FriendsHeader घटक द्वारा दर्शाए गए स्क्रीन शीर्षक और उपयोगकर्ता के दोस्तों के बारे में जानकारी रखने वाले FriendsHeader को FriendsHeader करके प्राप्त दोस्तों की सूची को जोड़ती है, जिनमें से प्रत्येक तत्व FriendRow घटक द्वारा स्क्रीन पर प्रदर्शित होता है।

यहाँ दोस्तों के लिए कोड है। ऊपर चित्रण करने के लिए।

 class Container extends React.Component {   constructor(props) {     super(props);     this.state = {       friends: []     };   }   componentDidMount() {     FriendsService.fetchFriends().then((data) => {       this.setState({         friends: data       });     });   }   render() {     const { friends } = this.state;     return (       <View style={styles.flex}>       <FriendsHeader count={friends.length} text='My friends' />       {friends.map((friend) => (<FriendRow {...friend} />)) }       </View>     );   } } 

इस तरह के एक एप्लिकेशन पेज बनाने का एक पूरी तरह से स्पष्ट तरीका है दोस्तों के बारे में डेटा को एक कंटेनर घटक में लोड करना और उन्हें बाल घटकों के गुणों के रूप में पास करना।

आइए इस तथ्य के बारे में सोचें कि दोस्तों के बारे में यह डेटा एप्लिकेशन में उपयोग किए जाने वाले कुछ अन्य घटकों में आवश्यक हो सकता है।


हाइक चैट स्क्रीन

मान लीजिए कि एप्लिकेशन में एक चैट स्क्रीन है, जिसमें मित्रों की सूची भी है। यह देखा जा सकता है कि स्क्रीन पर उसी डेटा का उपयोग दोस्तों की सूची और चैट स्क्रीन पर किया जाता है। ऐसी ही स्थिति में क्या करें? हमारे पास दो विकल्प हैं:

• आप चैट सूचियों को प्रदर्शित करने के लिए ज़िम्मेदार ComposeChat घटक में अपने मित्र डेटा को फिर से डाउनलोड कर सकते हैं। हालांकि, यह दृष्टिकोण विशेष रूप से अच्छा नहीं है, क्योंकि इसके उपयोग का अर्थ डेटा का दोहराव होगा और सिंक्रनाइज़ेशन के साथ समस्याएं हो सकती हैं।
• आप एक शीर्ष-स्तरीय घटक (एप्लिकेशन का मुख्य कंटेनर) में दोस्तों के बारे में डेटा डाउनलोड कर सकते हैं और दोस्तों की सूची प्रदर्शित करने और चैट रूम को सूचीबद्ध करने के लिए जिम्मेदार घटकों को इस डेटा को स्थानांतरित कर सकते हैं। इसके अलावा, हमें दोस्तों के डेटा को अपडेट करने के लिए इन घटकों को फ़ंक्शन पास करना होगा, जो घटकों के बीच डेटा सिंक्रनाइज़ेशन का समर्थन करने के लिए आवश्यक है। यह दृष्टिकोण इस तथ्य को जन्म देगा कि शीर्ष स्तर के घटक को शाब्दिक तरीकों और डेटा के साथ पैक किया जाएगा जो इसे सीधे उपयोग नहीं करता है।

ये दोनों विकल्प इतने आकर्षक नहीं हैं। अब देखते हैं कि Redux आर्किटेक्चर का उपयोग करके हमारी समस्या को कैसे हल किया जा सकता है।

Redux का उपयोग करना

यहां हम भंडारण, एक्शन क्रिएटर्स, रिड्यूसर और उपयोगकर्ता इंटरफ़ेस के दो घटकों का उपयोग करके डेटा के साथ काम के आयोजन के बारे में बात कर रहे हैं।

▍1। डेटा वेयरहाउस

रिपॉजिटरी में उपयोगकर्ता के दोस्तों के बारे में अपलोड किए गए डेटा होते हैं। यह डेटा किसी भी घटक के लिए भेजा जा सकता है अगर उसमें इसकी आवश्यकता होती है।

▍2। एक्शन क्रिएटर्स

इस मामले में, कार्रवाई के निर्माता का उपयोग दोस्तों के बारे में डेटा को बचाने और अद्यतन करने के उद्देश्य से घटनाओं को भेजने के लिए किया जाता है। यहाँ friendsActions.js के लिए कोड है:

 export const onFriendsFetch = (friendsData) => { return {   type: 'FRIENDS_FETCHED',   payload: friendsData }; }; 

▍3। Redyusery

Reducers अपने मित्रों के आने और अपडेट करने के लिए निर्धारित क्रियाओं का प्रतिनिधित्व करने वाली घटनाओं की प्रतीक्षा करते हैं। यहाँ दोस्तों के लिए कोड हैरेडर.जेएस :

 const INITIAL_STATE = {      friends: [],   friendsFetched: false }; function(state = INITIAL_STATE, action) {   switch(action.type) {   case 'FRIENDS_FETCHED':       return {           ...state,           friends: action.payload,           friendsFetched: true       };   } } 

▍4। दोस्तों लिस्टिंग घटक

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

 class Container extends React.Component {   constructor(props) {     super(props);   }   componentDidMount() {     if(!this.props.friendsFetched) {       FriendsService.fetchFriends().then((data) => {         this.props.onFriendsFetch(data);       });     }   }   render() {     const { friends } = this.props;     return (       <View style={styles.flex}>       <FriendsHeader count={friends.length} text='My friends' />       {friends.map((friend) => (<FriendRow {...friend} />)) }       </View>     );   } } const mapStateToProps = (state) => ({ ...state.friendsReducer }); const mapActionToProps = (dispatch) => ({ onFriendsFetch: (data) => {   dispatch(FriendActions.onFriendsFetch(data)); } }); export default connect(mapStateToProps, mapActionToProps)(Container); 

▍5। चैट लिस्टिंग घटक

यह कंटेनर घटक भंडारण से डेटा का उपयोग भी करता है और इसके अद्यतन का जवाब देता है।

Redux आर्किटेक्चर कार्यान्वयन के बारे में

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

परीक्षण

Redux का उपयोग करते समय, प्रत्येक एप्लिकेशन ब्लॉक का स्वतंत्र रूप से परीक्षण किया जा सकता है।
उदाहरण के लिए, प्रत्येक उपयोगकर्ता इंटरफ़ेस घटक को आसानी से इकाई परीक्षण के अधीन किया जा सकता है, क्योंकि यह डेटा स्वतंत्र है। मुद्दा यह है कि इस तरह के एक घटक का प्रतिनिधित्व करने वाला फ़ंक्शन हमेशा समान डेटा के लिए समान प्रतिनिधित्व लौटाता है। यह एप्लिकेशन को पूर्वानुमान योग्य बनाता है और डेटा विज़ुअलाइज़ेशन के दौरान होने वाली त्रुटियों की संभावना को कम करता है।

प्रत्येक घटक को विभिन्न प्रकार के डेटा का उपयोग करके बड़े पैमाने पर परीक्षण किया जा सकता है। इस तरह के परीक्षण से छिपी समस्याओं का पता चलता है और उच्च गुणवत्ता कोड सुनिश्चित करने में मदद मिलती है।

यह ध्यान दिया जाना चाहिए कि न केवल डेटा विज़ुअलाइज़ेशन के लिए जिम्मेदार घटक, बल्कि रीड्यूसर और एक्शन क्रिएटर्स भी स्वतंत्र परीक्षण के अधीन हो सकते हैं।

Redux महान है, लेकिन इस तकनीक का उपयोग करके हम कुछ कठिनाइयों में भाग गए।

Redux का उपयोग करने में कठिनाइयाँ

▍ अतिरिक्त टेम्पलेट कोड

एक आवेदन में Redux वास्तुकला को लागू करने के लिए, आपको सभी प्रकार की अजीब अवधारणाओं और संस्थाओं का सामना करते हुए, बहुत समय बिताना होगा।

ये तथाकथित स्लेड्स (थ्रक्स), रिड्यूसर (रिड्यूसर), एक्शन (क्रियाएं), मिडलवेयर लेयर्स (मिडलवेयर) हैं, ये फंक्शन mapStateToProps और mapDispatchToProps , साथ ही साथ बहुत अधिक हैं। यह सब सीखने में समय लगता है, और इसे सही तरीके से उपयोग करने के तरीके सीखने के लिए अभ्यास की आवश्यकता होती है। परियोजना में बहुत सारी फाइलें हैं, और, उदाहरण के लिए, डेटा विज़ुअलाइज़ेशन के लिए घटक में एक मामूली बदलाव से चार फ़ाइलों में बदलाव करना आवश्यक हो सकता है।

रेड रेडक्स वॉल्ट सिंगलटन है

Redux में, डेटा वेयरहाउस सिंगलटन पैटर्न का उपयोग करके बनाया गया है, हालांकि घटकों के कई उदाहरण हो सकते हैं। अक्सर यह एक समस्या नहीं है, लेकिन कुछ स्थितियों में, डेटा भंडारण के लिए इस तरह का दृष्टिकोण कुछ कठिनाइयां पैदा कर सकता है। उदाहरण के लिए, कल्पना करें कि घटक के दो उदाहरण हैं। जब डेटा इनमें से किसी भी उदाहरण में बदलता है, तो वे परिवर्तन किसी अन्य आवृत्ति को प्रभावित करते हैं। कुछ मामलों में, यह व्यवहार वांछनीय नहीं हो सकता है; यह घटक के प्रत्येक उदाहरण के लिए डेटा की अपनी प्रति का उपयोग करने के लिए आवश्यक हो सकता है।

परिणाम

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

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में Redux का उपयोग करते हैं?