Introdução

RxJS é uma biblioteca poderosa, mas é conhecida por ter uma curva de aprendizado acentuada.

A grande superfície de API da biblioteca, juntamente com uma mudança de paradigma para a programação reativa, pode ser esmagadora para os recém-chegados.

Eu criei a API Reactables para simplificar o uso do RxJS e facilitar a introdução do desenvolvedor à programação reativa.

Exemplo

Criaremos um controle simples que alterna a configuração de notificação do usuário.

Ele também enviará a configuração de alternância atualizada para um back-end simulado e, em seguida, exibirá uma mensagem de sucesso para o usuário.

Instale RxJS e reacionáveis

npm i rxjs @reactables/core

Começando com uma alternância básica.

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 cria um Reactable, que é uma tupla com dois itens.

1. Um observável RxJS que a UI pode assinar para mudanças de estado.

2. Um objeto de métodos de ação que a IU pode chamar para invocar mudanças de estado.

Não há necessidade de assuntos ao usar Reactables.

Podemos apenas descrever o comportamento que desejamos com funções redutoras puras.

Reactables usa assuntos e vários operadores internos para gerenciar o estado para o desenvolvedor.

Adicionando chamada de API e mensagem de sucesso intermitente

Reactables lidam com operações assíncronas com efeitos que são expressos como funções de operador RxJS. Eles podem ser declarados com a ação/redutor que aciona o(s) efeito(s).

Isso nos permite aproveitar ao máximo o RxJS no tratamento de nossa lógica assíncrona.

Vamos modificar nosso exemplo de alternância acima para incorporar algum comportamento assíncrono. Abandonaremos o tratamento de erros para mantê-lo 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,
      }),
    },
  });

Veja o exemplo completo no StackBlitz para:
Reagir | Angular

Vamos vincular nosso Reactable à visualização. Abaixo está um exemplo de ligação a um componente React com um gancho useReactable do pacote @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;

É isso!

Conclusão

Reactables ajuda a simplificar o RxJS, permitindo-nos construir nossa funcionalidade com funções redutoras puras em vez de mergulhar no mundo dos assuntos.

RxJS é então reservado para o que faz de melhor - compor nossa lógica assíncrona.

Reactables podem estender e fazer muito mais! Confira a documentação para mais exemplos, incluindo como eles podem ser usados ​​para gerenciar formulários!