MOBX: प्रतिक्रिया के लिए एक सरल और स्केलेबल राज्य प्रबंधन समाधान

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

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

---

1। MOBX क्या है? ] यह स्वचालित रूप से आपके UI के कुछ हिस्सों को ट्रैक और अपडेट करता है जो राज्य पर निर्भर करता है, जिससे यह एप्लिकेशन डेटा को प्रबंधित करने के लिए एक बहुत ही कुशल और सहज तरीका है।

MOBX की प्रमुख विशेषताएं:

]

] MOBX स्वचालित रूप से राज्य परिवर्तनों पर प्रतिक्रिया करता है।

]
• ]
• २। MOBX की मुख्य अवधारणाएं ]
• 1। अवलोकन योग्य स्थिति अवलोकन योग्य स्थिति MOBX का मूल है। जब किसी ऑब्जेक्ट को अवलोकन योग्य
के रूप में चिह्नित किया जाता है, तो MOBX उस ऑब्जेक्ट की स्थिति को ट्रैक करता है और स्वचालित रूप से उन घटकों को अपडेट करता है जो उस पर निर्भर करते हैं।
• उदाहरण:

---

आयात {अवलोकन योग्य} 'mobx' से; const काउंटर = अवलोकन योग्य ({ मूल्य: 0, वृद्धि () { this.value; }, गिरावट () ​​{ this.value--; }, });

अवलोकन योग्य डेकोरेटर काउंटर ऑब्जेक्ट को प्रतिक्रियाशील बनाता है। जब भी मूल्य बदलता है, तो इस राज्य का उपयोग करने वाले कोई भी प्रतिक्रिया घटक स्वचालित रूप से फिर से रेंडर कर देगा।

२। क्रियाएं

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

उदाहरण:

आयात {कार्रवाई} 'mobx' से; const काउंटर = अवलोकन योग्य ({ मूल्य: 0, वृद्धि: क्रिया (फ़ंक्शन () { this.value; }), घटाव: कार्रवाई (फ़ंक्शन () { this.value--; }), });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

३। गणना मान

गणना किए गए मान अवलोकन योग्य अवस्था से प्राप्त होते हैं। जब अवलोकन योग्य स्थिति बदलता है, तो गणना किए गए मान स्वचालित रूप से पुनर्गणना किए जाते हैं, यह सुनिश्चित करते हुए कि आवेदन की स्थिति सुसंगत है।

उदाहरण:

आयात {mobx ’से {गणना}; const काउंटर = अवलोकन योग्य ({ मूल्य: 0, वृद्धि () { this.value; }, गिरावट () ​​{ this.value--; }, डबलवैल्यू प्राप्त करें () { इसे लौटाएं। }, });

] जब भी मूल्य बदलता है, डबलवेल्यू को पुनर्गणना किया जाएगा।

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value  ;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

• ४। प्रतिक्रियाएं

] प्रतिक्रियाएं राज्य परिवर्तनों के आधार पर क्रियाओं को ट्रिगर करने के लिए उपयोगी हैं।

उदाहरण:

] const काउंटर = अवलोकन योग्य ({ मूल्य: 0, वृद्धि () { this.value; }, गिरावट () ​​{ this.value--; }, }); Autorun () => { कंसोल.लॉग (`काउंटर वैल्यू है: $ {Counter.Value}`); });

] यह कंसोल के लिए अपडेट किए गए काउंटर मान को लॉग करता है।

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

३। React

के साथ MOBX को एकीकृत करना
MOBX अपने ऐप के राज्य को प्रबंधित करने के लिए प्रतिक्रिया के साथ मूल रूप से एकीकृत करता है। प्रतिक्रिया में, MOBX राज्य परिवर्तनों को ट्रैक करने के लिए

पर्यवेक्षक

का उपयोग करके काम करता है और जब आवश्यक हो तो स्वचालित रूप से UI को अपडेट करें। ]

]

NPM MOBX MOBX-REACT स्थापित करें

]

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

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

उदाहरण:

आयात {अवलोकन योग्य, क्रिया} 'mobx' से; क्लास काउंटरस्टोर { @observable मान = 0; @Action वृद्धि () { this.value; } @ACTION DECREMENT () { this.value--; } } एक्सपोर्ट कांस्ट काउंटरस्टोर = नया काउंटरस्टोर ();

---

] ]

] यह आपके घटकों को स्वचालित रूप से फिर से रेंडर करने की अनुमति देगा जब अवलोकनीय स्थिति बदलती है।

उदाहरण:

'रिएक्ट' से आयात प्रतिक्रिया; 'MOBX-REACT' से आयात {ऑब्जर्वर}; आयात {काउंटरस्टोर} से './counterstore' से; const काउंटर = पर्यवेक्षक () => { वापस करना (

गिनती: {CounterStore.value}

counterstore.increment ()}> वृद्धि बटन> counterstore.decrement ()}> decrement बटन>

); }); डिफ़ॉल्ट डिफ़ॉल्ट काउंटर;

] जब cunterstore.value बदलता है, तो प्रतिक्रिया स्वचालित रूप से नए मान को प्रतिबिंबित करने के लिए घटक को फिर से प्रदान करती है।

npm install mobx mobx-react

] 'रिएक्ट' से आयात प्रतिक्रिया; आयात {रेंडर} 'रिएक्ट-डोम' से; 'MOBX-REACT' से आयात {प्रदाता}; './counter' से आयात काउंटर; आयात {काउंटरस्टोर} से './counterstore' से; const app = () => ( प्रदाता> ); रेंडर (, document.getElementByid ('रूट'));

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

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

४। MOBX
• का उपयोग करने के लाभ

1। सादगी ]

२। स्वचालित री-रेंडरिंग

] ३। ठीक दाने वाली अवलोकन

import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './CounterStore';

const Counter = observer(() => {
  return (
    

      
Count: {counterStore.value}
       counterStore.increment()}>Increment
       counterStore.decrement()}>Decrement
    
  );
});

export default Counter;

४। घोषणात्मक राज्य प्रबंधन

MOBX के साथ, राज्य को घोषणात्मक रूप से प्रबंधित किया जाता है। आपको बस यह परिभाषित करने की आवश्यकता है कि राज्य को कैसे व्यवहार करना चाहिए, और MOBX बाकी को संभालता है।

५। निष्कर्ष

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

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import { counterStore } from './CounterStore';

const App = () => (
  
    
  
);

render(, document.getElementById('root'));