#प्रतिक्रियात्मक तंत्र: Observable

NocoBase 2.0 में, Observable प्रतिक्रियात्मक ऑब्जेक्ट हर जगह मौजूद हैं। यह अंतर्निहित डेटा प्रवाह और UI की प्रतिक्रियाशीलता का मूल है, और FlowContext, FlowModel, FlowStep जैसे घटकों में व्यापक रूप से उपयोग किया जाता है।

#Observable क्यों चुनें?

NocoBase ने Redux, Recoil, Zustand, Jotai जैसे अन्य स्टेट मैनेजमेंट समाधानों के बजाय Observable को चुना, इसके मुख्य कारण निम्नलिखित हैं:

• बेहद लचीला: Observable किसी भी ऑब्जेक्ट, एरे, मैप, सेट आदि को प्रतिक्रियात्मक बना सकता है। यह स्वाभाविक रूप से डीप नेस्टिंग और डायनामिक स्ट्रक्चर को सपोर्ट करता है, जिससे यह जटिल व्यावसायिक मॉडलों के लिए बहुत उपयुक्त है।
• अहस्तक्षेपी: आप एक्शन, रिड्यूसर या अतिरिक्त स्टोर को परिभाषित किए बिना सीधे मूल ऑब्जेक्ट को मैनिपुलेट कर सकते हैं, जिससे एक बेहतरीन डेवलपमेंट अनुभव मिलता है।
• स्वचालित निर्भरता ट्रैकिंग: observer के साथ एक घटक को रैप करके, घटक स्वचालित रूप से उन Observable प्रॉपर्टीज़ को ट्रैक करता है जिनका वह उपयोग करता है। जब डेटा बदलता है, तो UI स्वचालित रूप से रीफ़्रेश हो जाता है, जिसमें मैन्युअल निर्भरता प्रबंधन की आवश्यकता नहीं होती है।
• गैर-रिएक्ट परिदृश्यों के लिए उपयुक्त: Observable प्रतिक्रियात्मक तंत्र न केवल React पर लागू होता है, बल्कि इसे अन्य फ़्रेमवर्क के साथ भी जोड़ा जा सकता है ताकि प्रतिक्रियात्मक डेटा की व्यापक आवश्यकताओं को पूरा किया जा सके।

#observer का उपयोग क्यों करें?

observer Observable ऑब्जेक्ट्स में होने वाले परिवर्तनों को सुनता है और जब डेटा बदलता है तो React घटकों के अपडेट को स्वचालित रूप से ट्रिगर करता है। यह आपके UI को आपके डेटा के साथ सिंक में रखता है, जिसमें setState या अन्य अपडेट विधियों को मैन्युअल रूप से कॉल करने की आवश्यकता नहीं होती है।

#बुनियादी उपयोग

import React from 'react';
import { Input } from 'antd';
import { observer, observable } from '@nocobase/flow-engine';

const obs = observable.deep({
  value: 'aa'
});

const MyComponent = observer(() => {
  return (
    <div>
      <Input
        defaultValue={obs.value}
        onChange={(e) => {
          obs.value = e.target.value;
        }}
      />
      <div>{obs.value}</div>
    </div>
  );
});

export default MyComponent;

प्रतिक्रियात्मक उपयोग के बारे में अधिक जानकारी के लिए, कृपया @formily/reactive दस्तावेज़ देखें।