परिचय

बड़े वेब ऐप्स बनाना मुश्किल हो सकता है, खासकर तब जब आपके पास ट्रैक रखने के लिए बहुत सारी अलग-अलग जानकारी हो। लेकिन चिंता न करें, RxJS मदद के लिए यहाँ है! यह वास्तव में एक अच्छा टूल है जो आपके सभी डेटा को एक ही स्थान पर प्रबंधित करने में आपकी सहायता करता है।

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

इस लेख में, हम आपको दिखाएंगे कि ऐसे वेब ऐप्स बनाने के लिए RxJS का उपयोग कैसे करें जिन्हें प्रबंधित करना वास्तव में आसान है और बढ़िया काम करते हैं। लेख के अंत तक, आप जानेंगे कि अपने सभी डेटा को प्रबंधित करने और बड़े और बेहतर वेब ऐप्स बनाने के लिए RxJS का उपयोग कैसे करें!

राज्य प्रबंधन के लिए RxJS क्यों?

अरे, क्या आप कभी भ्रमित हो जाते हैं जब आप एक बड़ा वेब ऐप बना रहे होते हैं और आपके पास ट्रैक करने के लिए बहुत सारी अलग-अलग जानकारी होती है? यहीं पर RxJS आता है! यह वास्तव में एक शानदार लाइब्रेरी की तरह है जो आपके सभी डेटा को एक ही स्थान पर प्रबंधित करने में आपकी सहायता करती है।

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

RxJS आपके ऐप को छोटे-छोटे टुकड़ों में तोड़ने में भी मदद करता है, जो आपके घर में अलग-अलग चीज़ों के लिए अलग-अलग कमरे रखने जैसा है। इस तरह, हर चीज़ को व्यवस्थित रखना और आपको जो चाहिए उसे ढूंढना आसान है।

कुल मिलाकर, RxJS बड़े वेब ऐप्स में डेटा प्रबंधित करने के लिए एक बेहतरीन टूल है। चाहे आप एक साधारण ऐप बना रहे हों या वास्तव में बड़ा ऐप, RxJS आपको सब कुछ नियंत्रण में रखने में मदद कर सकता है!

एक कार्य सूची का उदाहरण

किसी नई तकनीक या अवधारणा के नए प्रमाण को लागू करने का सबसे आसान तरीका एक कार्य सूची बनाना है।

स्टोर:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

यह कोड RxJS का उपयोग करके कार्य सूची को प्रबंधित करने के लिए एक सरल स्टोर को परिभाषित करता है। स्टोर को एक विषय का उपयोग करके कार्यान्वित किया जाता है और कार्यों को जोड़ने, हटाने और पूरा करने के तरीके प्रदान करता है।

इनिट फ़ंक्शन सब्जेक्ट.नेक्स्ट(स्टेट) का उपयोग करके विषय की वर्तमान स्थिति को प्रकाशित करके स्टोर को आरंभ करता है। यह फ़ंक्शन आम तौर पर तब कॉल किया जाता है जब ऐप पहली बार लोड किया जाता है ताकि यह सुनिश्चित किया जा सके कि स्टोर अद्यतित है।

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

कुल मिलाकर, इस कोड में init और subscribe दो महत्वपूर्ण कार्य हैं जो डेवलपर्स को RxJS का उपयोग करके टू-डू सूची की स्थिति का प्रबंधन करने में सक्षम बनाते हैं।

उपयोग:

इस तरह के राज्य प्रबंधन को लागू करना बहुत आसान है, बस इसे उच्चतम स्तर पर करें:

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

यह कोड एक स्टोर की सदस्यता लेने और आरंभ करने के लिए रिएक्ट हुक का उपयोग करता है जो RxJS का उपयोग करके कार्य सूची का प्रबंधन करता है।

यूज़स्टेट हुक उस स्थिति को अद्यतन करने के लिए कार्यों नामक एक राज्य चर और सेटटास्क नामक एक फ़ंक्शन बनाता है। [] यूज़स्टेट को दिया गया तर्क कार्यों के प्रारंभिक मान को एक खाली सरणी में सेट करता है।

useEffect हुक का उपयोग todoStore की सदस्यता लेने और आरंभ करने के लिए किया जाता है। TodoStore.subscribe(setTasks) लाइन स्टोर में परिवर्तनों के लिए setTasks फ़ंक्शन की सदस्यता लेती है। इसका मतलब यह है कि जब भी स्टोर अपडेट किया जाता है, सेटटास्क को अपडेटेड स्थिति के साथ कॉल किया जाएगा, और कार्यों को तदनुसार अपडेट किया जाएगा।

todoStore.init() फ़ंक्शन, सब्जेक्ट.नेक्स्ट(स्टेट) का उपयोग करके विषय की वर्तमान स्थिति को प्रकाशित करके स्टोर को आरंभ करता है।

निष्कर्ष

तो यह बात है! हमने सीखा है कि टू-डू सूची एप्लिकेशन बनाने के लिए RxJS और React का उपयोग कैसे करें। हमने एप्लिकेशन की स्थिति को प्रबंधित करने और उपयोगकर्ता को वर्तमान स्थिति प्रदर्शित करने के लिए रिएक्ट करने के लिए RxJS का उपयोग किया।

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

RxJS और React का एक साथ उपयोग करके, हमने एक अच्छा ऐप बनाया है जिसका उपयोग करना और रखरखाव करना आसान है। और हमने कुछ सचमुच मूल्यवान कौशल सीखे हैं जिनका उपयोग हम भविष्य में और भी अधिक अद्भुत वेब एप्लिकेशन बनाने के लिए कर सकते हैं!

यदि आपको लगता है कि लेख बहुत अस्पष्ट है, तो इन्हें देखें:

• स्रोत कोड: https://github.com/starneit/rxjs-state-poc
• डेमो: https://rxjs-poc.web.app/