RxJS vereinfacht mit Reactables

Einführung

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

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 werden ein einfaches Steuerelement erstellen, das die Benachrichtigungseinstellung eines Benutzers umschaltet.

Außerdem wird die aktualisierte Umschalteinstellung an ein simuliertes 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<ToggleState, ToggleActions> =>
  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 Zustandsänderungen abonnieren kann.

2. Ein Objekt von Aktionsmethoden, die die Benutzeroberfläche aufrufen kann, um Zustandsä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<ToggleState, ToggleActions> =>
  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,
      }),
    },
  });

Vollständiges Beispiel auf StackBlitz ansehen für:
Reagieren | Eckig

Binden wir unser Reactable an die Ansicht. 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 (
    <div className="notification-settings">
      {showSuccessMessage && (
        <div className="success-message">
          Success! Notifications are {notificationsOn ? 'on' : 'off'}.
        </div>
      )}
      <p>Notifications Setting:</p>
      <button onClick={() => toggle(!notificationsOn)}>
        {notificationsOn ? 'On' : 'Off'}
      </button>
    </div>
  );
}

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 Reduzierfunktionen 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 sich erweitern und noch viel mehr tun! Weitere Beispiele finden Sie in der Dokumentation, einschließlich deren Verwendung zum Verwalten von Formularen!

Das obige ist der detaillierte Inhalt vonRxJS vereinfacht mit Reactables. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!