परिचय

RxJS एक शक्तिशाली पुस्तकालय है लेकिन इसे तीव्र सीखने की अवस्था के लिए जाना जाता है।

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

मैंने RxJS के उपयोग को सरल बनाने और प्रतिक्रियाशील प्रोग्रामिंग के लिए डेवलपर के परिचय को आसान बनाने के लिए Reactables API बनाया।

उदाहरण

हम एक सरल नियंत्रण बनाएंगे जो उपयोगकर्ता की अधिसूचना सेटिंग को टॉगल करेगा।

यह अपडेटेड टॉगल सेटिंग को मॉक बैकएंड पर भी भेजेगा और फिर उपयोगकर्ता के लिए एक सफलता संदेश फ्लैश करेगा।

RxJS और रिएक्टेबल्स स्थापित करें

npm i rxjs @reactables/core

एक बुनियादी टॉगल से शुरू करना।

import { RxBuilder, Reactable } from '@reactables/core';

export type ToggleState = {
  notificationsOn: boolean;
};

export type ToggleActions = {
  toggle: (payload: boolean) => void;
};

export const RxNotificationsToggle = (
  initialState = {
    notificationsOn: false,
  } as ToggleState
): Reactable =>
  RxBuilder({
    initialState,
    reducers: {
      toggle: (state) => ({
        notificationsOn: !state.notificationsOn,
      }),
    },
  });


const [state$, actions] = RxToggleNotifications();

state$.subscribe((state) => {
  console.log(state.notificationsOn);
});

actions.toggle();

/*
OUTPUT

false
true

*/

RxBuilder एक रिएक्टेबल बनाता है, जो दो आइटमों वाला एक टपल है।

1. एक RxJS ऑब्जर्वेबल यूआई राज्य परिवर्तनों के लिए सदस्यता ले सकता है।

2. क्रिया विधियों का एक ऑब्जेक्ट जिसे यूआई राज्य परिवर्तन लागू करने के लिए कॉल कर सकता है।

रिएक्टेबल्स का उपयोग करते समय विषयों की कोई आवश्यकता नहीं है।

हम केवल उस व्यवहार का वर्णन कर सकते हैं जो हम शुद्ध रेड्यूसर फ़ंक्शन के साथ चाहते हैं।

रिएक्टेबल्स डेवलपर के लिए राज्य का प्रबंधन करने के लिए हुड के तहत विषयों और विभिन्न ऑपरेटरों का उपयोग करता है।

एपीआई कॉल जोड़ना और सफलता संदेश फ्लैश करना

रिएक्टेबल्स एसिंक्रोनस ऑपरेशंस को उन प्रभावों के साथ संभालते हैं जिन्हें आरएक्सजेएस ऑपरेटर फ़ंक्शंस के रूप में व्यक्त किया जाता है। उन्हें उस क्रिया/रेड्यूसर के साथ घोषित किया जा सकता है जो प्रभाव को ट्रिगर करता है।

यह हमें अपने अतुल्यकालिक तर्क को संभालने में RxJS का पूरा लाभ उठाने की अनुमति देता है।

आइए कुछ अतुल्यकालिक व्यवहार को शामिल करने के लिए उपरोक्त हमारे टॉगल उदाहरण को संशोधित करें। हम इसे छोटा रखने के लिए त्रुटि प्रबंधन को छोड़ देंगे।

import { RxBuilder, Reactable } from '@reactables/core';
import { of, concat } from 'rxjs';
import { debounceTime, switchMap, mergeMap, delay } from 'rxjs/operators';

export type ToggleState = {
  notificationsOn: boolean;
  showSuccessMessage: boolean;
};
export type ToggleActions = {
  toggle: (payload: boolean) => void;
};

export const RxNotificationsToggle = (
  initialState = {
    notificationsOn: false,
    showSuccessMessage: false,
  }
): Reactable =>
  RxBuilder({
    initialState,
    reducers: {
      toggle: {
        reducer: (_, action) => ({
          notificationsOn: action.payload as boolean,
          showSuccessMessage: false,
        }),
        effects: [
          (toggleActions$) =>
            toggleActions$.pipe(
              debounceTime(500),
              // switchMap to unsubscribe from previous API calls if a new toggle occurs
              switchMap(({ payload: notificationsOn }) =>
                of(notificationsOn)
                  .pipe(delay(500)) // Mock API call
                  .pipe(
                    mergeMap(() =>
                      concat(
                        // Flashing the success message for 2 seconds
                        of({ type: 'updateSuccess' }),
                        of({ type: 'hideSuccessMessage' }).pipe(delay(2000))
                      )
                    )
                  )
              )
            ),
        ],
      },
      updateSuccess: (state) => ({
        ...state,
        showSuccessMessage: true,
      }),
      hideSuccessMessage: (state) => ({
        ...state,
        showSuccessMessage: false,
      }),
    },
  });

स्टैकब्लिट्ज़ पर पूरा उदाहरण देखें:
प्रतिक्रिया | कोणीय

आइए अपने रिएक्टेबल को दृश्य से बांधें। नीचे @reactables/react पैकेज से उपयोग करने योग्य हुक के साथ रिएक्ट घटक से बाइंडिंग का एक उदाहरण दिया गया है।

import { RxNotificationsToggle } from './RxNotificationsToggle';
import { useReactable } from '@reactables/react';

function App() {
  const [state, actions] = useReactable(RxNotificationsToggle);
  if (!state) return;

  const { notificationsOn, showSuccessMessage } = state;
  const { toggle } = actions;

  return (
    

      {showSuccessMessage && (
        

          Success! Notifications are {notificationsOn ? 'on' : 'off'}.
        
      )}
      
Notifications Setting:
       toggle(!notificationsOn)}>
        {notificationsOn ? 'On' : 'Off'}
      
    
  );
}

export default App;

इतना ही!

निष्कर्ष

रिएक्टेबल्स हमें विषयों की दुनिया में गोता लगाने के बजाय शुद्ध रिड्यूसर फ़ंक्शंस के साथ हमारी कार्यक्षमता बनाने की अनुमति देकर आरएक्सजेएस को सरल बनाने में मदद करता है।

RxJS को उसके सर्वोत्तम कार्य के लिए आरक्षित किया गया है - हमारे अतुल्यकालिक तर्क की रचना करना।

रिएक्टेबल्स विस्तार कर सकते हैं और बहुत कुछ कर सकते हैं! अधिक उदाहरणों के लिए दस्तावेज़ीकरण देखें, जिसमें यह भी शामिल है कि उनका उपयोग फ़ॉर्म प्रबंधित करने के लिए कैसे किया जा सकता है!