RxJS simplifié avec Reactables

Introduction

RxJS est une bibliothèque puissante mais elle est connue pour avoir une courbe d'apprentissage abrupte.

La grande surface d'API de la bibliothèque, associée à un changement de paradigme vers une programmation réactive, peut être écrasante pour les nouveaux arrivants.

J'ai créé une API Reactables pour simplifier l'utilisation de RxJS et faciliter l'introduction du développeur à la programmation réactive.

Exemple

Nous allons créer un contrôle simple qui bascule le paramètre de notification d'un utilisateur.

Il enverra également le paramètre de bascule mis à jour à un backend fictif, puis affichera un message de réussite pour l'utilisateur.

Installer RxJS et Reactables

npm i rxjs @reactables/core

En commençant par une bascule de base.

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 crée un Reactable, qui est un tuple avec deux éléments.

1. Un observable RxJS auquel l'interface utilisateur peut s'abonner pour les changements d'état.

2. Un objet de méthodes d'action que l'interface utilisateur peut appeler pour invoquer des changements d'état.

Pas besoin de sujets lors de l'utilisation de Reactables.

Nous pouvons simplement décrire le comportement que nous souhaitons avec des fonctions de réduction pures.

Reactables utilise des sujets et divers opérateurs sous le capot pour gérer l'état pour le développeur.

Ajout d'un appel API et d'un message de réussite clignotant

Les Reactables gèrent les opérations asynchrones avec des effets qui sont exprimés en tant que fonctions d'opérateur RxJS. Ils peuvent être déclarés avec l'action/réducteur qui déclenche le ou les effets.

Cela nous permet d'exploiter pleinement RxJS dans la gestion de notre logique asynchrone.

Modifions notre exemple de bascule ci-dessus pour incorporer un comportement asynchrone. Nous renoncerons à la gestion des erreurs pour rester bref.

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

Voir l'exemple complet sur StackBlitz pour :
Réagir | Angulaire

Lions notre Reactable à la vue. Vous trouverez ci-dessous un exemple de liaison à un composant React avec un hook useReactable du package @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 (
    <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;

C'est tout !

Conclusion

Reactables aide à simplifier RxJS en nous permettant de construire nos fonctionnalités avec des fonctions de réduction pures plutôt que de plonger dans le monde des sujets.

RxJS est alors réservé à ce qu'il fait de mieux : composer notre logique asynchrone.

Les Reactables peuvent s'étendre et faire bien plus ! Consultez la documentation pour plus d'exemples, notamment comment ils peuvent être utilisés pour gérer les formulaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!