इस लेख में देखेंगे कि वैश्विक स्तर पर रिएक्ट में घटकों के बीच डेटा कैसे भेजा जाए, यहां तक ​​कि विभिन्न ब्राउज़र टैब में भी।

कहानी

कल्पना करें आपके पास आइटमों की एक सूची है, जैसे उपयोगकर्ता।

प्रत्येक उपयोगकर्ता को संशोधन के लिए एक मोडल विंडो में खोला जा सकता है।

आपके पास बैकएंड के लिए कोई सदस्यता नहीं है, जिसका अर्थ है कि यदि कोई उपयोगकर्ता बदलता है तो उपयोगकर्ताओं की सूची स्वचालित रूप से बैकएंड के साथ सिंक्रनाइज़ नहीं होगी।

इसलिए, एक बार उपयोगकर्ता की प्रोफ़ाइल अपडेट हो जाने पर, आप मोडल विंडो के तहत उपयोगकर्ताओं की सूची को स्वचालित रूप से ताज़ा करना चाहते हैं (यहां तक ​​कि आपकी वेबसाइट के अन्य सभी टैब में भी)।

हम इन असंबंधित घटकों और टैब में डेटा को सिंक्रनाइज़ करने के लिए क्या करेंगे?

समाधान

मोडल विंडो और उपयोगकर्ताओं की सूची घटनाओं और डेटा का आदान-प्रदान करने में सक्षम होनी चाहिए।

इस प्रकार, यदि कोई क्रिया मोडल विंडो में की जाती है, तो ईवेंट को इस प्रकार की कार्रवाई की प्रतीक्षा कर रहे सभी घटकों (उदाहरण के लिए उपयोगकर्ताओं की सूची) को भेजा जाना चाहिए, ताकि वे इस ईवेंट पर प्रतिक्रिया कर सकें, उदाहरण के लिए, द्वारा डेटा सिंक्रनाइज़ करना.

आइए एक छोटे पैकेज उपयोग-ऐप-इवेंट का उपयोग करके "यूजरलिस्ट" और "यूजरप्रोफाइलमॉडल" घटकों के बीच ऐसा संचार स्थापित करें:

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return Save changes;
};

? मॉडल विंडो

? उपयोगकर्ताओं की सूची

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events एक छोटा ओपन-सोर्स पैकेज है जिसमें कोई निर्भरता और जोखिम नहीं है, यह सक्रिय रूप से बनाए रखा जाता है और उपयोग करने के लिए सुरक्षित है।

इस बिंदु पर, UserProfileModal में उपयोगकर्ता प्रोफ़ाइल का अपडेट स्वचालित रूप से UserList जैसे सभी श्रोताओं को सूचित करेगा, जो UserList में उपयोगकर्ताओं की सूची को ताज़ा करेगा, जिसके परिणामस्वरूप एक बेहतर UX होगा।

इससे कोई फर्क नहीं पड़ता कि UserList और UserProfileModal को घटक ट्री में कहां रखा गया है, वे अभी भी एक दूसरे के बीच डेटा भेजने में सक्षम होंगे, यहां तक ​​कि विभिन्न ब्राउज़र टैब में भी।

निष्कर्ष

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

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