Introducción

RxJS es una biblioteca poderosa, pero se sabe que tiene una curva de aprendizaje pronunciada.

La gran superficie API de la biblioteca, junto con un cambio de paradigma hacia la programación reactiva, puede resultar abrumadora para los recién llegados.

Creé API de Reactables para simplificar el uso de RxJS y facilitar la introducción del desarrollador a la programación reactiva.

Ejemplo

Crearemos un control simple que alterna la configuración de notificación de un usuario.

También enviará la configuración de alternancia actualizada a un servidor simulado y luego mostrará un mensaje de éxito para el usuario.

Instalar RxJS y reaccionables

npm i rxjs @reactables/core

Comenzando con un cambio básico.

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 crea un Reactable, que es una tupla con dos elementos.

1. Un observable RxJS al que la interfaz de usuario puede suscribirse para cambios de estado.

2. Un objeto de métodos de acción que la interfaz de usuario puede llamar para invocar cambios de estado.

No se necesitan sujetos cuando se usan Reactables.

Podemos simplemente describir el comportamiento que queremos con funciones reductoras puras.

Reactables utiliza sujetos y varios operadores bajo el capó para administrar el estado para el desarrollador.

Agregar llamada API y mensaje de éxito parpadeante

Los reactivos manejan operaciones asincrónicas con efectos que se expresan como funciones de operador RxJS. Se pueden declarar con la acción/reductor que desencadena el(los) efecto(s).

Esto nos permite aprovechar RxJS al máximo en el manejo de nuestra lógica asincrónica.

Modifiquemos nuestro ejemplo de alternancia anterior para incorporar algún comportamiento asincrónico. Renunciaremos al manejo de errores para que sea breve.

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

Ver ejemplo completo en StackBlitz para:
Reaccionar | Angular

Vinculemos nuestro Reactable a la vista. A continuación se muestra un ejemplo de enlace a un componente React con un gancho useReactable del paquete @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;

¡Eso es todo!

Conclusión

Reactables ayuda a simplificar RxJS al permitirnos construir nuestra funcionalidad con funciones reductoras puras en lugar de sumergirnos en el mundo de los sujetos.

RxJS se reserva para lo que mejor sabe hacer: componer nuestra lógica asincrónica.

¡Reactables puede extenderse y hacer mucho más! Consulte la documentación para obtener más ejemplos, incluido cómo se pueden utilizar para administrar formularios.