Блог

Я только начинаю изучать RxJS и Observables в целом. Я понял идею о том, что часто вы можете создавать «автономные» наблюдаемые, используя «takeUntil()».

В одном онлайн-курсе, который я смотрю, учитель говорит: «Я ни от чего не отказывался за 10 лет, потому что я всегда использую takeUntil() для создания конечных потоков событий». Это его пример:

 var getElementDrags = elmt => elmt
    .mouseDowns.map(() => document.mouseMoves.takeUntil(document.mouseUps))
    .concatAll();
  

Это очень хорошо для «внутренних» наблюдаемых. Но от одного внешнего Observable при «наведении курсора мыши» никогда не отписывается…

Нам все еще нужно отписываться от них? По-прежнему ли хорошей практикой является отказ от подписки / удаления, когда пользователь покидает страницу?

В примере у вас есть — вы ни на что не подписываетесь… RxJS ленив, и он будет подписываться mouseDowns только тогда, когда вы подпишетесь на результирующий наблюдаемый, и, конечно же, он отпишется от подчеркивания наблюдаемых, когда вы отпишетесь от результирующего наблюдаемого.

Но, как правило, — да, хорошая практика — отписываться, когда вы подписываетесь на что-то… Но — при использовании RxJS, как правило, вам не нужно подписываться вручную, и когда вам нужно — скорее всего, вам нужна подписка во время работы приложения (поэтому отписываться не нужно).

Единственными исключениями являются — когда вы разрабатываете собственные операторы или подключаетесь к чему-то внешнему…

Например, если у вас есть компонент react и вы используете блокировки жизненного цикла для подписки на обновления при монтировании и отписываетесь при отключении монтирования.

Вот моя библиотека для этой цели https://github.com/zxbodya/rx-react-container — он объединяет наблюдаемые объекты, объекты и компонент react в новые наблюдаемые объекты с визуализируемыми элементами…

 const app$ = createContainer(
  App, // react component
  {totalCount$}, // observables with data
  {plusOne$, minusOne$} // observers for user actions
);

const appElement = document.getElementById('app');
const appSubscription = app$.forEach(renderApp=>render(renderApp(), appElement));
  

В результате у вас есть только одна подписка для управления для всего приложения ( appSubscription ), и отписываться не нужно — поскольку она используется во время работы приложения.

То же самое, о маршрутизации и отписке при переходе — в упрощенном случае у вас будет чуть flatMapLatest более observable с текущим местоположением, которое вернет observable (как app$ указано выше) для каждого местоположения… И снова вам не нужно подписываться / отписываться вручную — flatMapLatest это будет сделано внутренне.