Введение

RxJS — мощная библиотека, но, как известно, ее необходимо долго изучать.

Большая поверхность API библиотеки в сочетании со сдвигом парадигмы в сторону реактивного программирования может сбить с толку новичков.

Я создал Reactables API, чтобы упростить использование RxJS и облегчить разработчикам введение в реактивное программирование.

Пример

Мы создадим простой элемент управления, который будет переключать настройки уведомлений пользователя.

Он также отправит обновленную настройку переключателя на макетный сервер, а затем покажет пользователю сообщение об успехе.

Установите RxJS и Reactables

npm i rxjs @reactables/core

Начнем с базового переключателя.

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 создает Reactable, который представляет собой кортеж с двумя элементами.

1. Наблюдаемый объект RxJS, на который пользовательский интерфейс может подписаться для изменения состояния.

2. Объект методов действий, которые пользовательский интерфейс может вызывать для вызова изменений состояния.

При использовании Reactables нет необходимости в субъектах.

Мы можем просто описать желаемое поведение с помощью чистых функций редуктора.

Reactables использует субъекты и различные операторы для управления состоянием разработчика.

Добавление вызова API и мигание сообщения об успехе

Reactables обрабатывают асинхронные операции с эффектами, которые выражаются в виде операторных функций RxJS. Их можно объявить с помощью действия/редуктора, который запускает эффект(ы).

Это позволяет нам в полной мере использовать RxJS при обработке нашей асинхронной логики.

Давайте изменим приведенный выше пример переключения, чтобы включить в него асинхронное поведение. Чтобы сделать текст кратким, мы откажемся от обработки ошибок.

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

Полный пример см. на StackBlitz:
Реагировать | Угловой

Давайте свяжем наш Reactable с представлением. Ниже приведен пример привязки к компоненту React с помощью перехватчика useReactable из пакета @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;

Вот и все!

Заключение

Reactables помогает упростить RxJS, позволяя нам создавать функциональность с помощью чистых функций редуктора, а не погружаться в мир предметов.

Затем RxJS резервируется для того, что он делает лучше всего — для составления нашей асинхронной логики.

Reactables могут расширяться и делать гораздо больше! Ознакомьтесь с документацией для получения дополнительных примеров, в том числе о том, как их можно использовать для управления формами!