Препарируем RxJS операторы

Препарируем RxJS операторы

Галушко Кирилл

1. t.me/qeireal
2. medium.com/@qeireal
3. github.com/qeireal
4. twitter.com/qeireal

О чем поговорим

1. Что у Subscribable сущностей под капотом?
2. Что внутри у стандартных операторов?
3. Чего не хватает?
4. Как это можно реализовать?
5. И чем можно воспользоваться?

github.com/ReactiveX/rxjs/

Subscribable

subscribe()

lift()

pipe()

pipeFromArray()

Операторы

take()

Теперь, когда мы разобрались...

Ctrl+C Ctrl+V

• tap(() => this.changeDetectorRef.markForCheck())
• filter(value => !!value)
• tap(() => this.changeDetectorRef.detectChanges())
• tap(value => console.log('Professional debug mode. Value: ', value)
tap(() => this.changeDetectorRef.markForCheck())
tap(() => this.changeDetectorRef.detectChanges())
filter(value => !!value)
tap(value => console.log('Professional debug mode. Value: ', value)
tap(() => this.changeDetectorRef.markForCheck())
tap(() => this.changeDetectorRef.detectChanges())
filter(value => !!value)
tap(value => console.log('Professional debug mode. Value: ', value)

Кастомный оператор
Часть 1: Создание

Правила создания

• Операторы должны всегда возвращать Observable
• Оператор должнен иметь подписку на исходный Observable внутри возвращаемого
• Обрабатывайте исключения
• Не допускайте утечки памяти

truthyFilter()

truthyFilter()

Типы возвращаемых значений

MonoTypeOperatorFunction - тип не меняется.

OperatorFunction - тип меняется.

Кастомный оператор
Часть 2: Использование

Использование

Кастомный оператор
Часть 3: Тестирование

Тестирование

Marbles тестирование

cdrChecking()

consoleLog()

Преобразование lodash в rxjs операторы

Готовые решения

"rxjs-etc" Nicholas Jamieson

• ✅ RxJS Core team maintainer
• ✅ Observables и операторы, которые не попали в rxjs
• ✅ Или попадут (например, endWith)
• ⛔ Много узконаправленных операторов

"ngx-take-until-destroy" Netanel Basal

• ✅ "Guy that you obviously know" maintainer
• ✅ Простота
• ️️⛔ Нужно всегда инициализировать ngOnDestroy