Einführung

RxJS ist eine leistungsstarke Bibliothek, aber es ist bekannt, dass sie eine steile Lernkurve aufweist.

Die große API-Oberfläche der Bibliothek, gepaart mit einem Paradigmenwechsel hin zur reaktiven Programmierung, kann für Neueinsteiger überwältigend sein.

Ich habe die Reactables-API erstellt, um die RxJS-Nutzung zu vereinfachen und dem Entwickler den Einstieg in die reaktive Programmierung zu erleichtern.

Beispiel

Wir erstellen ein einfaches Steuerelement, das die Benachrichtigungseinstellung eines Benutzers umschaltet.

Außerdem wird die aktualisierte Umschalteinstellung an ein Schein-Backend gesendet und dann eine Erfolgsmeldung für den Benutzer angezeigt.

Installieren Sie RxJS und Reactables

npm i rxjs @reactables/core

Beginnen Sie mit einem einfachen Umschalten.

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 erstellt ein Reactable, das ein Tupel mit zwei Elementen ist.

1. Ein RxJS-Observable, das die Benutzeroberfläche für Statusänderungen abonnieren kann.

2. Ein Objekt von Aktionsmethoden, die die Benutzeroberfläche aufrufen kann, um Statusänderungen aufzurufen.

Bei Verwendung von Reactables sind keine Subjekte erforderlich.

Wir können das gewünschte Verhalten einfach mit reinen Reduzierfunktionen beschreiben.

Reactables verwendet Subjekte und verschiedene Operatoren unter der Haube, um den Status für den Entwickler zu verwalten.

API-Aufruf und blinkende Erfolgsmeldung hinzugefügt

Reactables verarbeiten asynchrone Operationen mit Effekten, die als RxJS-Operatorfunktionen ausgedrückt werden. Sie können mit der Aktion/dem Reduzierer deklariert werden, die den/die Effekt(e) auslöst.

Dadurch können wir RxJS bei der Handhabung unserer asynchronen Logik optimal nutzen.

Ändern wir unser obiges Umschaltbeispiel, um asynchrones Verhalten zu integrieren. Um es kurz zu halten, verzichten wir auf die Fehlerbehandlung.

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,
      }),
    },
  });

Siehe vollständiges Beispiel auf StackBlitz für:
Reagieren | Eckig

Lassen Sie uns unser Reactable an die Ansicht binden. Unten finden Sie ein Beispiel für die Bindung an eine React-Komponente mit einem useReactable-Hook aus dem @reactables/react-Paket.

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;

Das ist es!

Abschluss

Reactables trägt dazu bei, RxJS zu vereinfachen, indem es uns ermöglicht, unsere Funktionalität mit reinen Reduktionsfunktionen aufzubauen, anstatt in die Welt der Subjekte einzutauchen.

RxJS ist dann für das reserviert, was es am besten kann – die Erstellung unserer asynchronen Logik.

Reactables können viel mehr erweitern und tun! Weitere Beispiele finden Sie in der Dokumentation, einschließlich deren Verwendung zum Verwalten von Formularen!