Maison > interface Web > js tutoriel > RxJS simplifié avec Reactables

RxJS simplifié avec Reactables

Barbara Streisand
Libérer: 2024-10-10 06:19:02
original
1116 Les gens l'ont consulté

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.
RxJS simplified with Reactables

Installer RxJS et Reactables

npm i rxjs @reactables/core
Copier après la connexion

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

*/

Copier après la connexion

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

Copier après la connexion

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;


Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal