ബാഹ്യ ഡാറ്റയ്‌ക്കായി റിയാക്ടിന്റെ experimental_useSubscription ഉപയോഗപ്പെടുത്താം: ഒരു സമഗ്രമായ ഗൈഡ്

യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ വ്യാപകമായി ഉപയോഗിക്കുന്ന ഒരു ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ റിയാക്ട്, നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നു. ഇതിലെ ഏറ്റവും പുതിയതും ഇപ്പോഴും പരീക്ഷണാത്മകവുമായ കൂട്ടിച്ചേർക്കലുകളിൽ ഒന്നാണ് experimental_useSubscription എപിഐ. ഈ ശക്തമായ ഉപകരണം, നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റുകളിൽ ബാഹ്യ ഡാറ്റാ സ്രോതസ്സുകളിലേക്കുള്ള സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിന് കൂടുതൽ കാര്യക്ഷമവും നിലവാരമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഈ ഗൈഡ് experimental_useSubscription-ന്റെ വിശദാംശങ്ങളിലേക്ക് കടന്നുചെല്ലുകയും, അതിന്റെ പ്രയോജനങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയും, നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഇത് ഫലപ്രദമായി സംയോജിപ്പിക്കാൻ സഹായിക്കുന്ന പ്രായോഗിക ഉദാഹരണങ്ങൾ നൽകുകയും ചെയ്യും.

ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകളുടെ ആവശ്യകത മനസ്സിലാക്കാം

experimental_useSubscription-ന്റെ പ്രത്യേകതകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, അത് പരിഹരിക്കാൻ ശ്രമിക്കുന്ന പ്രശ്നം മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ പലപ്പോഴും വിവിധ ബാഹ്യ സ്രോതസ്സുകളിൽ നിന്നുള്ള ഡാറ്റയെ ആശ്രയിക്കുന്നു, ഉദാഹരണത്തിന്:

• ഡാറ്റാബേസുകൾ: PostgreSQL, MongoDB, അല്ലെങ്കിൽ MySQL പോലുള്ള ഡാറ്റാബേസുകളിൽ നിന്ന് ഡാറ്റ എടുക്കുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യുക.
• തത്സമയ എപിഐകൾ: WebSockets അല്ലെങ്കിൽ Server-Sent Events (SSE) പോലുള്ള സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് തത്സമയ എപിഐകളിൽ നിന്ന് അപ്‌ഡേറ്റുകൾ സ്വീകരിക്കുന്നു. സ്റ്റോക്ക് വിലകൾ, ലൈവ് സ്പോർട്സ് സ്കോറുകൾ, അല്ലെങ്കിൽ സഹകരണപരമായ ഡോക്യുമെന്റ് എഡിറ്റിംഗ് എന്നിവയെക്കുറിച്ച് ചിന്തിക്കുക.
• സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലൈബ്രറികൾ: Redux, Zustand, അല്ലെങ്കിൽ Jotai പോലുള്ള ബാഹ്യ സ്റ്റേറ്റ് മാനേജ്മെന്റ് സൊല്യൂഷനുകളുമായി സംയോജിപ്പിക്കുക.
• മറ്റ് ലൈബ്രറികൾ: റിയാക്ടിന്റെ സാധാരണ കമ്പോണന്റ് റീ-റെൻഡറിംഗ് പ്രവാഹത്തിന് പുറത്ത് മാറുന്ന ഡാറ്റ.

പരമ്പരാഗതമായി, റിയാക്ടിൽ ഈ ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിന് വിവിധ സമീപനങ്ങൾ ഉൾപ്പെടുന്നു, ഇത് പലപ്പോഴും സങ്കീർണ്ണവും കാര്യക്ഷമമല്ലാത്തതുമായ കോഡിലേക്ക് നയിക്കുന്നു. സാധാരണ പാറ്റേണുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• മാനുവൽ സബ്സ്ക്രിപ്ഷനുകൾ: useEffect ഉപയോഗിച്ച് കമ്പോണന്റുകളിൽ നേരിട്ട് സബ്സ്ക്രിപ്ഷൻ ലോജിക് നടപ്പിലാക്കുകയും സബ്സ്ക്രിപ്ഷൻ ലൈഫ് സൈക്കിൾ സ്വമേധയാ കൈകാര്യം ചെയ്യുകയും ചെയ്യുക. ഇത് പിശകുകൾക്ക് സാധ്യതയുണ്ടാക്കുകയും ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്തില്ലെങ്കിൽ മെമ്മറി ലീക്കുകൾക്ക് കാരണമാവുകയും ചെയ്യും.
• ഹയർ-ഓർഡർ കമ്പോണന്റുകൾ (HOCs): ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി കമ്പോണന്റുകളെ HOC-കൾ ഉപയോഗിച്ച് പൊതിയുക. പുനരുപയോഗിക്കാമെങ്കിലും, HOC-കൾ കമ്പോണന്റ് കോമ്പോസിഷനിൽ സങ്കീർണ്ണതകൾ ഉണ്ടാക്കുകയും ഡീബഗ്ഗിംഗ് കൂടുതൽ വെല്ലുവിളി നിറഞ്ഞതാക്കുകയും ചെയ്യും.
• റെൻഡർ പ്രോപ്പുകൾ: കമ്പോണന്റുകൾക്കിടയിൽ സബ്സ്ക്രിപ്ഷൻ ലോജിക് പങ്കിടാൻ റെൻഡർ പ്രോപ്പുകൾ ഉപയോഗിക്കുക. HOC-കളെപ്പോലെ, റെൻഡർ പ്രോപ്പുകളും കോഡിന് കൂടുതൽ വാചാലത നൽകും.

ഈ സമീപനങ്ങൾ പലപ്പോഴും ബോയിലർപ്ലേറ്റ് കോഡ്, മാനുവൽ സബ്സ്ക്രിപ്ഷൻ മാനേജ്മെന്റ്, പ്രകടന പ്രശ്നങ്ങൾ എന്നിവയ്ക്ക് കാരണമാകുന്നു. ബാഹ്യ ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി കൂടുതൽ ലളിതവും കാര്യക്ഷമവുമായ ഒരു പരിഹാരം നൽകാനാണ് experimental_useSubscription ലക്ഷ്യമിടുന്നത്.

experimental_useSubscription പരിചയപ്പെടുത്തുന്നു

ബാഹ്യ ഡാറ്റാ സ്രോതസ്സുകളിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യുന്ന പ്രക്രിയ ലളിതമാക്കാനും ഡാറ്റ മാറുമ്പോൾ കമ്പോണന്റുകൾ സ്വയമേവ റീ-റെൻഡർ ചെയ്യാനും രൂപകൽപ്പന ചെയ്ത ഒരു റിയാക്ട് ഹുക്ക് ആണ് experimental_useSubscription. ഇത് അടിസ്ഥാനപരമായി സബ്സ്ക്രിപ്ഷൻ ലൈഫ് സൈക്കിൾ കൈകാര്യം ചെയ്യുന്നതിനും കമ്പോണന്റുകൾക്ക് എല്ലായ്പ്പോഴും ഏറ്റവും പുതിയ ഡാറ്റയിലേക്ക് ആക്സസ് ഉണ്ടെന്ന് ഉറപ്പാക്കുന്നതിനും ഒരു ബിൽറ്റ്-ഇൻ മെക്കാനിസം നൽകുന്നു.

experimental_useSubscription-ന്റെ പ്രധാന നേട്ടങ്ങൾ

• ലളിതമായ സബ്സ്ക്രിപ്ഷൻ മാനേജ്മെന്റ്: ഡാറ്റാ സ്രോതസ്സുകളിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യുന്നതിനും അൺസബ്സ്ക്രൈബ് ചെയ്യുന്നതിനും ഉള്ള സങ്കീർണ്ണതകൾ ഈ ഹുക്ക് കൈകാര്യം ചെയ്യുന്നു, ഇത് ബോയിലർപ്ലേറ്റ് കോഡും സാധ്യമായ പിശകുകളും കുറയ്ക്കുന്നു.
• ഓട്ടോമാറ്റിക് റീ-റെൻഡറുകൾ: സബ്സ്ക്രൈബ് ചെയ്ത ഡാറ്റ മാറുമ്പോഴെല്ലാം കമ്പോണന്റുകൾ സ്വയമേവ റീ-റെൻഡർ ചെയ്യപ്പെടുന്നു, ഇത് UI എല്ലായ്പ്പോഴും അപ്-ടു-ഡേറ്റ് ആണെന്ന് ഉറപ്പാക്കുന്നു.
• മെച്ചപ്പെട്ട പ്രകടനം: റിയാക്ടിന് മുൻപത്തെയും ഇപ്പോഴത്തെയും ഡാറ്റാ മൂല്യങ്ങൾ താരതമ്യം ചെയ്തുകൊണ്ട് റീ-റെൻഡറുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയും, ഇത് അനാവശ്യ അപ്‌ഡേറ്റുകൾ തടയുന്നു.
• മെച്ചപ്പെട്ട കോഡ് റീഡബിലിറ്റി: ഹുക്കിന്റെ ഡിക്ലറേറ്റീവ് സ്വഭാവം കോഡ് മനസ്സിലാക്കാനും പരിപാലിക്കാനും എളുപ്പമാക്കുന്നു.
• സ്ഥിരത: ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾക്ക് ഒരു സ്റ്റാൻഡേർഡ്, റിയാക്ട് അംഗീകൃത സമീപനം നൽകുന്നു, ഇത് വ്യത്യസ്ത പ്രോജക്റ്റുകളിൽ സ്ഥിരത പ്രോത്സാഹിപ്പിക്കുന്നു.

experimental_useSubscription എങ്ങനെ പ്രവർത്തിക്കുന്നു

experimental_useSubscription ഹുക്ക് ഒരൊറ്റ ആർഗ്യുമെന്റ് സ്വീകരിക്കുന്നു: ഒരു source ഒബ്ജക്റ്റ്. ഈ source ഒബ്ജക്റ്റ്, റിയാക്ട് സബ്സ്ക്രിപ്ഷൻ കൈകാര്യം ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഒരു പ്രത്യേക ഇന്റർഫേസ് (താഴെ വിവരിച്ചിരിക്കുന്നു) നടപ്പിലാക്കേണ്ടതുണ്ട്.

source ഒബ്ജക്റ്റിന്റെ പ്രധാന ഉത്തരവാദിത്തങ്ങൾ ഇവയാണ്:

1. സബ്സ്ക്രൈബ് ചെയ്യുക: ഡാറ്റ മാറുമ്പോഴെല്ലാം വിളിക്കപ്പെടുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ രജിസ്റ്റർ ചെയ്യുക.
2. സ്നാപ്പ്ഷോട്ട് നേടുക: ഡാറ്റയുടെ നിലവിലെ മൂല്യം തിരികെ നൽകുക.
3. സ്നാപ്പ്ഷോട്ടുകൾ താരതമ്യം ചെയ്യുക (ഓപ്ഷണൽ): ഒരു റീ-റെൻഡർ ആവശ്യമുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ നിലവിലെയും മുൻപത്തെയും ഡാറ്റാ മൂല്യങ്ങൾ കാര്യക്ഷമമായി താരതമ്യം ചെയ്യുന്നതിനുള്ള ഒരു ഫംഗ്ഷൻ നൽകുക. പ്രകടന ഒപ്റ്റിമൈസേഷന് ഇത് നിർണായകമാണ്.

Source ഒബ്ജക്റ്റ് ഇന്റർഫേസ്

• subscribe(callback: () => void): () => void: കമ്പോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ (അല്ലെങ്കിൽ ഹുക്ക് ആദ്യമായി വിളിക്കുമ്പോൾ) റിയാക്ട് ഈ മെത്തേഡ് വിളിക്കുന്നു. ഇത് ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ ആർഗ്യുമെന്റായി എടുക്കുന്നു. ഡാറ്റ മാറുമ്പോഴെല്ലാം ഈ കോൾബാക്ക് ഫംഗ്ഷൻ വിളിക്കാൻ source ഒബ്ജക്റ്റ് രജിസ്റ്റർ ചെയ്യണം. ഈ മെത്തേഡ് ഒരു അൺസബ്സ്ക്രൈബ് ഫംഗ്ഷൻ തിരികെ നൽകണം. കമ്പോണന്റ് അൺമൗണ്ട് ചെയ്യുമ്പോൾ (അല്ലെങ്കിൽ ഡിപൻഡൻസികൾ മാറുമ്പോൾ) റിയാക്ട് ഈ അൺസബ്സ്ക്രൈബ് ഫംഗ്ഷൻ വിളിക്കും.
• getSnapshot(source: YourDataSourceType): YourDataType: ഡാറ്റയുടെ നിലവിലെ മൂല്യം ലഭിക്കാൻ റിയാക്ട് ഈ മെത്തേഡ് വിളിക്കുന്നു. ഇത് ഡാറ്റയുടെ ഒരു സ്നാപ്പ്ഷോട്ട് തിരികെ നൽകണം. `source` ആർഗ്യുമെന്റ് (നിങ്ങൾ അത് ഉപയോഗിക്കാൻ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ) നിങ്ങളുടെ `Source` ഒബ്ജക്റ്റ് ഉണ്ടാക്കുമ്പോൾ നിങ്ങൾ പാസ് ചെയ്ത യഥാർത്ഥ ഡാറ്റാ സ്രോതസ്സ് മാത്രമാണ്. `getSnapshot`, `subscribe` എന്നിവയ്ക്കുള്ളിൽ നിന്ന് അടിസ്ഥാന സ്രോതസ്സിലേക്ക് ആക്സസ് ചെയ്യുന്നതിനുള്ള സൗകര്യത്തിനാണിത്.
• areEqual(prev: YourDataType, next: YourDataType): boolean (optional): ഈ മെത്തേഡ് ഒരു *ഓപ്ഷണൽ* ഒപ്റ്റിമൈസേഷൻ ആണ്. ഇത് നൽകിയിട്ടുണ്ടെങ്കിൽ, റിയാക്ട് ഡാറ്റയുടെ മുൻപത്തെയും ഇപ്പോഴത്തെയും മൂല്യങ്ങൾ താരതമ്യം ചെയ്യാൻ ഈ മെത്തേഡ് വിളിക്കും. മെത്തേഡ് `true` തിരികെ നൽകിയാൽ, റിയാക്ട് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കും. നൽകിയിട്ടില്ലെങ്കിൽ, റിയാക്ട് സ്നാപ്പ്ഷോട്ട് മൂല്യങ്ങളുടെ ഒരു ഷാലോ കംപാരിസൺ നടത്തും, അത് എല്ലായ്പ്പോഴും മതിയാകണമെന്നില്ല. മാറ്റങ്ങളെ കൃത്യമായി പ്രതിഫലിപ്പിക്കാത്ത സങ്കീർണ്ണമായ ഡാറ്റാ ഘടനകളുമായി നിങ്ങൾ ഇടപെടുകയാണെങ്കിൽ ഇത് നടപ്പിലാക്കുക. അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നതിന് ഇത് നിർണായകമാണ്.

experimental_useSubscription ഉപയോഗിക്കുന്നതിനുള്ള പ്രായോഗിക ഉദാഹരണങ്ങൾ

ഉദാഹരണം 1: ഒരു തത്സമയ എപിഐയുമായി (WebSockets) സംയോജിപ്പിക്കുന്നു

ഒരു WebSocket എപിഐയിൽ നിന്ന് തത്സമയ സ്റ്റോക്ക് വില അപ്‌ഡേറ്റുകൾ സ്വീകരിക്കുന്ന ഒരു സ്റ്റോക്ക് ടിക്കർ ആപ്ലിക്കേഷൻ നിങ്ങൾ നിർമ്മിക്കുകയാണെന്ന് കരുതുക.

            
import React, { useState, useEffect } from 'react';
import { experimental_useSubscription as useSubscription } from 'react';

// Mock WebSocket implementation (replace with your actual WebSocket connection)
const createWebSocket = () => {
  let ws;
  let listeners = [];
  let currentValue = { price: 0 };

  const connect = () => {
    ws = new WebSocket('wss://your-websocket-api.com'); // Replace with your actual WebSocket URL

    ws.onopen = () => {
      console.log('Connected to WebSocket');
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      currentValue = data;
      listeners.forEach(listener => listener());
    };

    ws.onclose = () => {
      console.log('Disconnected from WebSocket');
      setTimeout(connect, 1000); // Reconnect after 1 second
    };

    ws.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  };

  connect();

  return {
    subscribe: (listener) => {
      listeners.push(listener);
      return () => {
        listeners = listeners.filter(l => l !== listener);
      };
    },
    getCurrentValue: () => currentValue
  };
};

const webSocket = createWebSocket();

const StockPriceSource = {
  subscribe(callback) {
    return webSocket.subscribe(callback);
  },
  getSnapshot(webSocket) {
    return webSocket.getCurrentValue();
  },
  areEqual(prev, next) {
    // Efficiently compare stock prices
    return prev.price === next.price; // Only re-render if the price changes
  }
};

function StockPrice() {
  const stockPrice = useSubscription(StockPriceSource);

  return (
    
Current Stock Price: ${stockPrice.price}
  );
}

export default StockPrice;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• ഞങ്ങൾ ഒരു മോക്ക് WebSocket ഇമ്പ്ലിമെന്റേഷൻ ഉണ്ടാക്കുന്നു, `wss://your-websocket-api.com` എന്നതിന് പകരം നിങ്ങളുടെ യഥാർത്ഥ WebSocket API എൻഡ്‌പോയിന്റ് ഉപയോഗിക്കുക. ഈ മോക്ക് ഇമ്പ്ലിമെന്റേഷൻ കണക്റ്റുചെയ്യുന്നതും, സന്ദേശങ്ങൾ സ്വീകരിക്കുന്നതും, വിച്ഛേദിക്കുമ്പോൾ വീണ്ടും കണക്റ്റുചെയ്യുന്നതും കൈകാര്യം ചെയ്യുന്നു.
• ഞങ്ങൾ subscribe, getSnapshot, areEqual മെത്തേഡുകൾ നടപ്പിലാക്കുന്ന ഒരു StockPriceSource ഒബ്ജക്റ്റ് നിർവചിക്കുന്നു.
• subscribe മെത്തേഡ്, WebSocket-ൽ നിന്ന് ഒരു പുതിയ സ്റ്റോക്ക് വില അപ്‌ഡേറ്റ് ലഭിക്കുമ്പോഴെല്ലാം വിളിക്കപ്പെടുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ രജിസ്റ്റർ ചെയ്യുന്നു.
• getSnapshot മെത്തേഡ് നിലവിലെ സ്റ്റോക്ക് വില തിരികെ നൽകുന്നു.
• areEqual മെത്തേഡ് മുൻപത്തെയും ഇപ്പോഴത്തെയും സ്റ്റോക്ക് വിലകൾ താരതമ്യം ചെയ്യുകയും വില മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രം false (ഒരു റീ-റെൻഡറിന് കാരണമാകുന്നു) തിരികെ നൽകുകയും ചെയ്യുന്നു. ഡാറ്റാ ഒബ്ജക്റ്റിലെ മറ്റ് ഫീൽഡുകൾ മാറിയാലും വില അതേപടി തുടരുകയാണെങ്കിൽ അനാവശ്യ റീ-റെൻഡറുകൾ തടയാൻ ഈ ഒപ്റ്റിമൈസേഷൻ സഹായിക്കുന്നു.
• StockPrice കമ്പോണന്റ്, StockPriceSource-ലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യാനും സ്റ്റോക്ക് വില മാറുമ്പോഴെല്ലാം സ്വയമേവ റീ-റെൻഡർ ചെയ്യാനും experimental_useSubscription ഉപയോഗിക്കുന്നു.

പ്രധാനപ്പെട്ടത്: മോക്ക് WebSocket ഇമ്പ്ലിമെന്റേഷനും URL-നും പകരം നിങ്ങളുടെ യഥാർത്ഥ API വിശദാംശങ്ങൾ ഉപയോഗിക്കാൻ ഓർമ്മിക്കുക.

ഉദാഹരണം 2: Redux-മായി സംയോജിപ്പിക്കുന്നു

ഒരു Redux സ്റ്റോറുമായി നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റുകൾ കാര്യക്ഷമമായി സംയോജിപ്പിക്കാൻ experimental_useSubscription ഉപയോഗിക്കാം.

            
import React from 'react';
import { experimental_useSubscription as useSubscription } from 'react';
import { useSelector, useDispatch } from 'react-redux';

// Assume you have a Redux store configured (e.g., using Redux Toolkit)
import { increment, decrement } from './counterSlice'; // Example slice actions

const reduxSource = {
  subscribe(callback) {
    // Get the store from the Redux Context using useSelector.
    // This forces a re-render when the context changes and guarantees the subscription is fresh
    useSelector((state) => state);
    const unsubscribe = store.subscribe(callback);
    return unsubscribe;
  },
  getSnapshot(store) {
    return store.getState().counter.value; // Assuming a counter slice with a 'value' field
  },
  areEqual(prev, next) {
    return prev === next; // Only re-render if the counter value changes
  }
};

function Counter() {
  const count = useSubscription(reduxSource);
  const dispatch = useDispatch();

  return (
    

      
Count: {count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

export default Counter;



            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• നിങ്ങൾക്ക് ഇതിനകം ഒരു Redux സ്റ്റോർ കോൺഫിഗർ ചെയ്തിട്ടുണ്ടെന്ന് ഞങ്ങൾ അനുമാനിക്കുന്നു. ഇല്ലെങ്കിൽ, അത് സജ്ജീകരിക്കുന്നതിന് Redux ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക (ഉദാഹരണത്തിന്, ലളിതമായ സജ്ജീകരണത്തിനായി Redux Toolkit ഉപയോഗിക്കുക).
• ആവശ്യമായ മെത്തേഡുകൾ നടപ്പിലാക്കുന്ന ഒരു reduxSource ഒബ്ജക്റ്റ് ഞങ്ങൾ നിർവചിക്കുന്നു.
• subscribe മെത്തേഡിൽ, Redux സ്റ്റോർ ആക്സസ് ചെയ്യാൻ ഞങ്ങൾ `useSelector` ഉപയോഗിക്കുന്നു. ഇത് Redux കോൺടെക്സ്റ്റ് മാറുമ്പോഴെല്ലാം ഒരു റീ-റെൻഡർ ഉറപ്പാക്കും, ഇത് Redux സ്റ്റോറിലേക്കുള്ള ഒരു സാധുവായ സബ്സ്ക്രിപ്ഷൻ നിലനിർത്തുന്നതിന് പ്രധാനമാണ്. Redux സ്റ്റോറിൽ നിന്നുള്ള അപ്‌ഡേറ്റുകൾക്കായി ഒരു കോൾബാക്ക് യഥാർത്ഥത്തിൽ രജിസ്റ്റർ ചെയ്യുന്നതിന് നിങ്ങൾ `store.subscribe(callback)` എന്നും വിളിക്കണം.
• getSnapshot മെത്തേഡ് Redux സ്റ്റോറിൽ നിന്ന് നിലവിലെ കൗണ്ടർ മൂല്യം തിരികെ നൽകുന്നു.
• areEqual മെത്തേഡ് മുൻപത്തെയും ഇപ്പോഴത്തെയും കൗണ്ടർ മൂല്യങ്ങൾ താരതമ്യം ചെയ്യുകയും മൂല്യം മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രം ഒരു റീ-റെൻഡർ ട്രിഗർ ചെയ്യുകയും ചെയ്യുന്നു.
• Counter കമ്പോണന്റ്, Redux സ്റ്റോറിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യാനും കൗണ്ടർ മൂല്യം മാറുമ്പോൾ സ്വയമേവ റീ-റെൻഡർ ചെയ്യാനും experimental_useSubscription ഉപയോഗിക്കുന്നു.

ശ്രദ്ധിക്കുക: ഈ ഉദാഹരണം, നിങ്ങൾക്ക് `value` ഫീൽഡുള്ള `counter` എന്ന് പേരുള്ള ഒരു Redux സ്ലൈസ് ഉണ്ടെന്ന് അനുമാനിക്കുന്നു. നിങ്ങളുടെ Redux സ്റ്റോറിൽ നിന്ന് പ്രസക്തമായ ഡാറ്റ ആക്സസ് ചെയ്യുന്നതിന് getSnapshot മെത്തേഡ് അതനുസരിച്ച് ക്രമീകരിക്കുക.

ഉദാഹരണം 3: പോളിംഗ് ഉപയോഗിച്ച് ഒരു എപിഐയിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നു

ചിലപ്പോൾ, അപ്‌ഡേറ്റുകൾ ലഭിക്കുന്നതിന് നിങ്ങൾ ഒരു എപിഐയെ ഇടയ്ക്കിടെ പോൾ ചെയ്യേണ്ടതുണ്ട്. experimental_useSubscription ഉപയോഗിച്ച് ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ഇതാ.

            
import React, { useState, useEffect } from 'react';
import { experimental_useSubscription as useSubscription } from 'react';

const API_URL = 'https://api.example.com/data'; // Replace with your API endpoint

const createPollingSource = (url, interval = 5000) => {
  let currentValue = null;
  let listeners = [];
  let timerId = null;

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      currentValue = data;
      listeners.forEach(listener => listener());
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return {
    subscribe(callback) {
      listeners.push(callback);
      if (!timerId) {
        fetchData(); // Initial fetch
        timerId = setInterval(fetchData, interval);
      }
      return () => {
        listeners = listeners.filter(l => l !== callback);
        if (listeners.length === 0 && timerId) {
          clearInterval(timerId);
          timerId = null;
        }
      };
    },
    getSnapshot() {
      return currentValue;
    },
    areEqual(prev, next) {
      // Implement a more robust comparison if needed, e.g., using deep equality checks
      return JSON.stringify(prev) === JSON.stringify(next); // Simple comparison for demonstration
    }
  };
};

const pollingSource = createPollingSource(API_URL);

function DataDisplay() {
  const data = useSubscription(pollingSource);

  if (!data) {
    return 
Loading...
;
  }

  return (
    

      
Data: {JSON.stringify(data)}
    
  );
}

export default DataDisplay;


            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ:

• ഞങ്ങൾ API URL-ഉം പോളിംഗ് ഇടവേളയും ആർഗ്യുമെന്റുകളായി എടുക്കുന്ന ഒരു createPollingSource ഫംഗ്ഷൻ ഉണ്ടാക്കുന്നു.
• ഈ ഫംഗ്ഷൻ ഇടയ്ക്കിടെ എപിഐയിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കാൻ setInterval ഉപയോഗിക്കുന്നു.
• subscribe മെത്തേഡ്, പുതിയ ഡാറ്റ ലഭ്യമാകുമ്പോഴെല്ലാം വിളിക്കപ്പെടുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ രജിസ്റ്റർ ചെയ്യുന്നു. പോളിംഗ് ഇടവേള ഇതിനകം പ്രവർത്തിക്കുന്നില്ലെങ്കിൽ അത് ആരംഭിക്കുകയും ചെയ്യുന്നു. തിരികെ നൽകുന്ന അൺസബ്സ്ക്രൈബ് ഫംഗ്ഷൻ പോളിംഗ് ഇടവേള നിർത്തുന്നു.
• getSnapshot മെത്തേഡ് നിലവിലെ ഡാറ്റ തിരികെ നൽകുന്നു.
• areEqual മെത്തേഡ്, ഒരു ലളിതമായ താരതമ്യത്തിനായി JSON.stringify ഉപയോഗിച്ച് മുൻപത്തെയും ഇപ്പോഴത്തെയും ഡാറ്റ താരതമ്യം ചെയ്യുന്നു. കൂടുതൽ സങ്കീർണ്ണമായ ഡാറ്റാ ഘടനകൾക്കായി, കൂടുതൽ ശക്തമായ ഒരു ഡീപ്പ് ഇക്വാലിറ്റി ചെക്ക് ലൈബ്രറി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• DataDisplay കമ്പോണന്റ്, പോളിംഗ് സ്രോതസ്സിലേക്ക് സബ്സ്ക്രൈബ് ചെയ്യാനും പുതിയ ഡാറ്റ ലഭ്യമാകുമ്പോൾ സ്വയമേവ റീ-റെൻഡർ ചെയ്യാനും experimental_useSubscription ഉപയോഗിക്കുന്നു.

പ്രധാനപ്പെട്ടത്: https://api.example.com/data എന്നതിന് പകരം നിങ്ങളുടെ യഥാർത്ഥ API എൻഡ്‌പോയിന്റ് ഉപയോഗിക്കുക. പോളിംഗ് ഇടവേളയെക്കുറിച്ച് ശ്രദ്ധിക്കുക - വളരെ ഇടയ്ക്കിടെയുള്ള പോളിംഗ് എപിഐക്ക് ഭാരമാകും.

മികച്ച രീതികളും പരിഗണനകളും

• പിശകുകൾ കൈകാര്യം ചെയ്യൽ: ബാഹ്യ ഡാറ്റാ സ്രോതസ്സുകളിൽ നിന്നുള്ള സാധ്യമായ പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യാൻ നിങ്ങളുടെ സബ്സ്ക്രിപ്ഷൻ ലോജിക്കിൽ ശക്തമായ പിശക് കൈകാര്യം ചെയ്യൽ നടപ്പിലാക്കുക. ഉപയോക്താവിന് ഉചിതമായ പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുക.
• പ്രകടന ഒപ്റ്റിമൈസേഷൻ: ഡാറ്റാ മൂല്യങ്ങൾ കാര്യക്ഷമമായി താരതമ്യം ചെയ്യാനും അനാവശ്യ റീ-റെൻഡറുകൾ തടയാനും areEqual മെത്തേഡ് ഉപയോഗിക്കുക. പ്രകടനം കൂടുതൽ ഒപ്റ്റിമൈസ് ചെയ്യാൻ മെമ്മോയിസേഷൻ ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. ഡാറ്റാ പുതുമയും API ലോഡും സന്തുലിതമാക്കാൻ എപിഐകൾക്കുള്ള പോളിംഗ് ഇടവേള ശ്രദ്ധാപൂർവ്വം തിരഞ്ഞെടുക്കുക.
• സബ്സ്ക്രിപ്ഷൻ ലൈഫ് സൈക്കിൾ: മെമ്മറി ലീക്കുകൾ തടയുന്നതിന് കമ്പോണന്റുകൾ അൺമൗണ്ട് ചെയ്യുമ്പോൾ ഡാറ്റാ സ്രോതസ്സുകളിൽ നിന്ന് ശരിയായി അൺസബ്സ്ക്രൈബ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക. experimental_useSubscription ഇത് സ്വയമേവ ചെയ്യാൻ സഹായിക്കുന്നു, പക്ഷേ നിങ്ങളുടെ source ഒബ്ജക്റ്റിൽ അൺസബ്സ്ക്രൈബ് ലോജിക് ശരിയായി നടപ്പിലാക്കേണ്ടതുണ്ട്.
• ഡാറ്റാ ട്രാൻസ്ഫോർമേഷൻ: നിങ്ങളുടെ കമ്പോണന്റുകൾക്ക് ആവശ്യമുള്ള ഫോർമാറ്റിൽ ഡാറ്റ ഉണ്ടെന്ന് ഉറപ്പാക്കാൻ getSnapshot മെത്തേഡിനുള്ളിൽ ഡാറ്റാ ട്രാൻസ്ഫോർമേഷൻ അല്ലെങ്കിൽ നോർമലൈസേഷൻ നടത്തുക.
• അസിൻക്രണസ് ഓപ്പറേഷൻസ്: റേസ് കണ്ടീഷനുകളോ അപ്രതീക്ഷിത പെരുമാറ്റങ്ങളോ ഒഴിവാക്കാൻ സബ്സ്ക്രിപ്ഷൻ ലോജിക്കിനുള്ളിൽ അസിൻക്രണസ് ഓപ്പറേഷനുകൾ ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്യുക.
• ടെസ്റ്റിംഗ്: ഡാറ്റാ സ്രോതസ്സുകളിലേക്ക് ശരിയായി സബ്സ്ക്രൈബ് ചെയ്യുന്നുണ്ടെന്നും അപ്‌ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുന്നുണ്ടെന്നും ഉറപ്പാക്കാൻ experimental_useSubscription ഉപയോഗിക്കുന്ന നിങ്ങളുടെ കമ്പോണന്റുകൾ സമഗ്രമായി പരിശോധിക്കുക. `subscribe`, `getSnapshot`, `areEqual` മെത്തേഡുകൾ പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ source ഒബ്ജക്റ്റുകൾക്കായി യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതുക.
• സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR): സെർവർ-സൈഡ് റെൻഡർ ചെയ്ത ആപ്ലിക്കേഷനുകളിൽ experimental_useSubscription ഉപയോഗിക്കുമ്പോൾ, ഡാറ്റ സെർവറിൽ ശരിയായി ലഭ്യമാക്കി സീരിയലൈസ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഡാറ്റാ സ്രോതസ്സും നിങ്ങൾ ഉപയോഗിക്കുന്ന SSR ഫ്രെയിംവർക്കും (ഉദാ. Next.js, Gatsby) അനുസരിച്ച് ഇതിന് പ്രത്യേക കൈകാര്യം ചെയ്യൽ ആവശ്യമായി വന്നേക്കാം.
• പരീക്ഷണാത്മക സ്റ്റാറ്റസ്: experimental_useSubscription ഇപ്പോഴും ഒരു പരീക്ഷണാത്മക എപിഐ ആണെന്ന് ഓർക്കുക. അതിന്റെ പെരുമാറ്റവും എപിഐയും ഭാവിയിലെ റിയാക്ട് റിലീസുകളിൽ മാറിയേക്കാം. ആവശ്യമെങ്കിൽ നിങ്ങളുടെ കോഡ് ക്രമീകരിക്കാൻ തയ്യാറാകുക. ഏറ്റവും പുതിയ വിവരങ്ങൾക്കായി എപ്പോഴും ഔദ്യോഗിക റിയാക്ട് ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക.
• ബദലുകൾ: experimental_useSubscription നിങ്ങളുടെ പ്രത്യേക ആവശ്യകതകൾ നിറവേറ്റുന്നില്ലെങ്കിൽ, ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ബദൽ സമീപനങ്ങൾ പര്യവേക്ഷണം ചെയ്യുക, അതായത് നിലവിലുള്ള സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലൈബ്രറികളോ കസ്റ്റം ഹുക്കുകളോ ഉപയോഗിക്കുക.
• ഗ്ലോബൽ സ്റ്റേറ്റ്: ഒന്നിലധികം കമ്പോണന്റുകളിൽ പങ്കിടുന്നതോ പേജ് നാവിഗേഷനുകളിൽ നിലനിർത്തേണ്ടതോ ആയ ഡാറ്റയ്ക്കായി ഒരു ഗ്ലോബൽ സ്റ്റേറ്റ് മാനേജ്മെന്റ് സൊല്യൂഷൻ (Redux, Zustand, അല്ലെങ്കിൽ Jotai പോലുള്ളവ) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. തുടർന്ന് നിങ്ങളുടെ കമ്പോണന്റുകളെ ഗ്ലോബൽ സ്റ്റേറ്റിലേക്ക് ബന്ധിപ്പിക്കുന്നതിന് experimental_useSubscription ഉപയോഗിക്കാം.

ഉപസംഹാരം

ബാഹ്യ ഡാറ്റാ സബ്സ്ക്രിപ്ഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിന് കൂടുതൽ കാര്യക്ഷമവും നിലവാരമുള്ളതുമായ ഒരു മാർഗ്ഗം നൽകിക്കൊണ്ട്, റിയാക്ട് ഇക്കോസിസ്റ്റത്തിലെ ഒരു വിലയേറിയ കൂട്ടിച്ചേർക്കലാണ് experimental_useSubscription. അതിന്റെ തത്വങ്ങൾ മനസ്സിലാക്കുകയും ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ experimental_useSubscription ഫലപ്രദമായി സംയോജിപ്പിക്കാനും കൂടുതൽ കരുത്തുറ്റതും മികച്ച പ്രകടനമുള്ളതുമായ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും. ഇത് ഇപ്പോഴും പരീക്ഷണാത്മകമായതിനാൽ, എപിഐയിലെ ഏതെങ്കിലും അപ്‌ഡേറ്റുകൾക്കോ മാറ്റങ്ങൾക്കോ വേണ്ടി ഭാവിയിലെ റിയാക്ട് റിലീസുകൾ ശ്രദ്ധിക്കാൻ ഓർമ്മിക്കുക.