MobX या Redux: जो रिएक्ट स्टेट मैनेजमेंट के लिए बेहतर है?

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

आइए पहले दोनों के बीच आम बातों पर एक नजर डालते हैं:

1) दोनों समय-यात्रा डिबगिंग का समर्थन करते हैं
2) दोनों में ओपन-सोर्स लाइब्रेरी हैं
3) दोनों एक क्लाइंट-साइड राज्य प्रबंधन प्रदान करते हैं
4) दोनों रिएक्ट देशी फ्रेमवर्क के लिए भारी समर्थन प्रदान करते हैं

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

-> रखरखाव और स्केलेबल

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

-> डिबग प्रक्रिया

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

-> सीखने की अवस्था

MobX सीखना आसान है क्योंकि यह एक स्थिर सीखने की अवस्था के साथ आता है। अधिकतम अमूर्तता की उपस्थिति से सीखना आसान हो जाता है और OOP अवधारणाओं से परिचित जावास्क्रिप्ट डेवलपर्स का MobX पर मजबूत गढ़ होता है। दूसरी ओर, Redux एक कार्यात्मक प्रोग्रामिंग प्रतिमान का उपयोग करता है जो कि सीधे रास्ते में पकड़ना मुश्किल बनाता है।

-> समुदाय

Mobux की तुलना में Redux का एक बड़ा सामुदायिक आधार है। इसलिए, Redux डेवलपर्स को किसी भी स्थान पर कभी भी महान सामुदायिक सहायता प्रदान करता है।

-> शुद्ध बनाम छोटा

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

-> अवलोकन योग्य बनाम सादा डेटा

MobX स्टोर करने के लिए एक अवलोकन योग्य का उपयोग करता है जबकि Redux मानों को संग्रहीत करने के लिए सामान्य जावास्क्रिप्ट डेटा का उपयोग करता है। Redux में, सभी अपडेट मैन्युअल रूप से ट्रैक किए जाते हैं।

-> स्टोर

एक स्टोर एक ऐसी चीज़ है जहाँ डेटा रखा जाता है। MobX के पास एक से अधिक स्टोर हैं जहां ये स्टोर तार्किक रूप से अलग हैं। दूसरी ओर, Redux के पास एक बड़ा स्टोर है जहां सभी राज्य संग्रहीत हैं। डेटा को आमतौर पर Redux में सामान्यीकृत किया जाता है और MobX में डेटा को असामान्य रूप से रखा जाता है।

Redux बनाम MobX: कोड तुलना

इंजेक्शन इंजेक्शन

React-redux का कनेक्ट () फ़ंक्शन का उपयोग Redux में प्रॉप्स के लिए स्टेट और एक्शन को पास करने के लिए किया जाता है। इसे नीचे दिखाया गया है:

// एक्सेसिंग प्रॉप्स

<ContactForm contact={this.props.contact} loading={this.props.loading} onSubmit={this.submit} /> 

// राज्य को प्रॉप्स में इंजेक्ट करने का कार्य

 function mapStateToProps(state) { return { contact: state.contactStore.contact, errors: state.contactStore.errors } } 

// राज्य और क्रियाओं को प्रॉप्स में इंजेक्ट करना

 export default connect(mapStateToProps, { newContact, saveContact, fetchContact, updateContact })(ContactFormPage); 

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

 @inject("stores") @observer // injecting store into props class ContactFormPage extends Component { … // accessing store via props const { contactStore:store } = this.props.stores; return ( <ContactForm store={store} form={this.form} contact={store.entity} /> ) … } 

इसलिए, हमने Redux-connect-डेकोरेटर्स का उपयोग Redux कोड को सरल बनाने के लिए किया और MobX संस्करण को पढ़ना हमेशा आसान है। इसलिए, ऐसा कोई स्पष्ट विजेता नहीं है।

बूटस्ट्रैपिंग

Redux में, सबसे पहले, स्टोर को परिभाषित करें और ऐप प्रदाता के माध्यम से पारित किया गया है। अतुल्यकालिक कार्यों को संभालने के लिए, आपको redux-thunk और redux-वादा-मिडलवेयर को भी परिभाषित करना होगा। इसके बाद, Redux-devtools-extension समय-यात्रा मोड में डिबगिंग स्टोर की अनुमति देता है।

 import { applyMiddleware, createStore } from "redux"; import thunk from "redux-thunk"; import promise from "redux-promise-middleware"; import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from "./reducers"; const middleware = composeWithDevTools(applyMiddleware(promise(), thunk)); export default createStore(rootReducer, middleware); 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

MobX में, कई स्टोर स्थापित किए जाते हैं। यह async कार्रवाई करने के लिए बाहरी पुस्तकालयों की जरूरत नहीं है, लेकिन कोड की केवल कुछ लाइनें। Redux-devtools-extension डिबगिंग टूल को जोड़ने के लिए आपको mobx-remotedev की आवश्यकता है।

 import remotedev from 'mobx-remotedev'; import Store from './store'; const contactConfig = { name:'Contact Store', global: true, onlyActions:true, filters: { whitelist: /fetch|update|create|Event|entity|entities|handleErrors/ } }; const contactStore = new Store('api/contacts'); const allStores = { contactStore: remotedev(contactStore, contactConfig) }; export default allStores; 

// src / index.js

 ReactDOM.render( <BrowserRouter> <Provider stores={allStores}> <App /> </Provider> </BrowserRouter>, document.getElementById('root') ); 

दोनों में प्रयुक्त कोड की मात्रा हालांकि समान है। लेकिन, MobX में कम आयात विवरण शामिल हैं।

क्रियाओं को परिभाषित करना और पुन: प्रेषित करना

निम्नलिखित कोड के द्वारा Redux में क्रियाएँ और पुनः परिभाषित किया जाता है:

// क्रिया

 export function fetchContacts(){ return dispatch => { dispatch({ type: 'FETCH_CONTACTS', payload: client.get(url) }) } } 

// रिड्यूसर

 switch (action.type) { case 'FETCH_CONTACTS_FULFILLED': { return { ...state, contacts: action.payload.data.data || action.payload.data, loading: false, errors: {} } } case 'FETCH_CONTACTS_PENDING': { return { ...state, loading: true, errors: {} } } case 'FETCH_CONTACTS_REJECTED': { return { ...state, loading: false, errors: { global: action.payload.message } } } } 

कार्रवाई और reducer के लिए तर्क MobX में एक वर्ग में किया जाता है। यह OOP का उपयोग करता है जिसके कारण स्टोर क्लास को क्लास कंस्ट्रक्टर का उपयोग करके कई स्टोर बनाने के लिए रिफलेक्ट किया जाता है। संबंधित कोड नीचे दिखाया गया है:

 @action fetchAll = async() => { this.loading = true; this.errors = {}; try { const response = await this.service.find({}) runInAction('entities fetched', () => { this.entities = response.data; this.loading = false; }); } catch(err) { this.handleErrors(err); } } 

इसलिए, हमने देखा है कि दोनों राज्य प्रबंधन समाधानों में परिभाषित तर्क एक ही काम करते हैं। अंतर केवल इतना है कि हमने परिणाम प्राप्त करने के लिए Redux में कोड की 33 लाइनों और MobX में कोड की 14 लाइनों का उपयोग किया है। इसलिए, आप MobX के साथ तेजी से ऐप्स बना सकते हैं।

रिएक्ट ऐप्स के लिए MobX का उपयोग क्यों करें?

MobX एक परीक्षित पुस्तकालय है जो पारदर्शी रूप से कार्यात्मक प्रतिक्रियाशील प्रोग्रामिंग (TFRP) को लागू करके राज्य प्रबंधन को सरल और स्केलेबल बनाता है। प्रतिक्रिया और MobX एक शक्तिशाली संयोजन है।

• लिखने के लिए कम कोड
• सीखना आसान है
• नेस्टेड डेटा आसान है
• ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के लिए समर्थन

MobX का उपयोग क्यों नहीं?

• डिबग करना मुश्किल है
• बेहतर विकल्प मौजूद हैं
• बहुत अधिक स्वतंत्रता देता है

Redux रिएक्ट ऐप्स के लिए क्यों उपयोग करें?

Redux एक स्टैंडअलोन लाइब्रेरी है जिसका उपयोग UI फ्रेमवर्क के साथ किया जा सकता है जिसमें Angular, Vue, Ember, React & vanilla JS शामिल हैं।

• बिचौलियों के माध्यम से विस्तार
• लोकप्रियता और समुदाय
• टूलींग का समर्थन
• भविष्यवाणी और सरलता
• अप्रत्यक्ष डेटा प्रवाह और अपरिवर्तनीयता
• डेटा और प्रस्तुति का पृथक्करण

Redux का उपयोग क्यों नहीं करते?

• बॉयलरप्लेट (रिड्यूसर, चयनकर्ता, विचार, एक्शन प्रकार, एक्शन क्रिएटर, ...)
• क्रियाओं को उनके प्रभाव से अलग कर दिया जाता है (जैसा कि reducer में परिभाषित किया गया है)
• साइड इफेक्ट्स से निपटने के लिए कोई आउट-ऑफ-द-बॉक्स समाधान (रेड्यू-थंक या रेडक्स-सागा जैसे बिचौलियों के माध्यम से उपलब्ध)

अंतिम नोट:

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

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

मुझे उम्मीद है कि मैंने यह स्पष्ट करने के लिए पर्याप्त जानकारी प्रदान की है कि क्या MobX में माइग्रेट करना है या Redux के साथ जारी रहना है। अंततः, निर्णय उस परियोजना के प्रकार पर निर्भर करता है जिस पर आप काम कर रहे हैं और आपके लिए उपलब्ध संसाधन।