Коли я повинен створити нову підписку для конкретного побічного ефекту?

Минулого тижня я відповів на запитання RxJS, де потрапив на дискусію з іншим членом спільноти з приводу: "Чи варто створити підписку на кожен конкретний побічний ефект чи слід намагатися мінімізувати підписки взагалі?" Я хочу знати, яку методологію використовувати в умовах повного підходу до реактивного застосування або коли переходити з одного на інший. Це допоможе мені і, можливо, іншим уникнути непотрібних дискусій.

Інформація про налаштування

• Усі приклади є у TypeScript
• Для кращого зосередження уваги на запитанні без використання життєвих циклів / конструкторів для передплати, а також залишатись у рамках не пов'язаними
  • Уявіть: підписки додаються в init конструктора / життєвого циклу
  • Уявіть собі: скасування підписки робиться в процесі знищення життєвого циклу

Що таке побічний ефект (кутовий зразок)

• Оновлення / введення в інтерфейсі (наприклад value$ | async)
• Вихід / вихідний компонент (наприклад @Output event = event$)
• Взаємодія між різними службами в різних ієрархіях

Зразковий футляр:

• Дві функції: foo: () => void; bar: (arg: any) => void
• Дві джерела спостереження: http$: Observable<any>; click$: Observable<void>
• fooвикликається після того, http$як викинуто і не потребує значення
• barвикликається після click$випромінювання, але потребує поточного значенняhttp$

Випадок: Створіть підписку для кожного конкретного побічного ефекту

const foo$ = http$.pipe(
  mapTo(void 0)
);

const bar$ = http$.pipe(
  switchMap(httpValue => click$.pipe(
    mapTo(httpValue)
  )
);

foo$.subscribe(foo);
bar$.subscribe(bar);

Випадок: мінімізуйте підписки загалом

http$.pipe(
  tap(() => foo()),
  switchMap(httpValue => click$.pipe(
    mapTo(httpValue )
  )
).subscribe(bar);

Моя власна думка коротше

Я можу зрозуміти той факт, що підписки спочатку ускладнюють ландшафти Rx, тому що ви повинні подумати про те, як підписники повинні впливати на трубу чи не, наприклад (поділитися вашим спостережуваним чи ні). Але чим більше ви розділяєте свій код (тим більше ви зосереджуєтесь: що відбувається, коли), тим простіше підтримувати (перевірити, налагодити, оновити) свій код у майбутньому. Зважаючи на це, я завжди створюю єдине спостережуване джерело та одну підписку для будь-яких побічних ефектів у своєму коді. Якщо два або більше побічних ефектів, які я маю, викликані саме таким джерелом, який можна спостерігати, я поділяю свої спостережувані та підписуюсь на кожен побічний ефект окремо, оскільки він може мати різні життєві цикли.

RxJS є цінним ресурсом для управління асинхронними операціями, і його слід використовувати для спрощення коду (включаючи зменшення кількості підписок), де це можливо. Так само за спостережуваним не слід автоматично супроводжуватися підпискою на цю спостережувану, якщо RxJS надає рішення, яке може зменшити загальну кількість підписок у вашій програмі.

Однак є ситуації, коли може бути вигідним створити підписку, яка не є суворо "необхідною":

Приклад винятку - повторне використання спостережуваних даних в одному шаблоні

Дивлячись на ваш перший приклад:

// Component:

this.value$ = this.store$.pipe(select(selectValue));

// Template:

<div>{{value$ | async}}</div>

Якщо значення $ використовується лише один раз у шаблоні, я б скористався асинхронною трубкою та її перевагами для економії коду та автоматичної підписки. Однак відповідно до цієї відповіді слід уникати декількох посилань на одну і ту ж змінну асинхронізації в шаблоні, наприклад:

// It works, but don't do this...

<ul *ngIf="value$ | async">
    <li *ngFor="let val of value$ | async">{{val}}</li>
</ul>

У цій ситуації я б замість цього створив окрему підписку і скористався цією функцією для оновлення змінної без асинхронізації у своєму компоненті:

// Component

valueSub: Subscription;
value: number[];

ngOnInit() {
    this.valueSub = this.store$.pipe(select(selectValue)).subscribe(response => this.value = response);
}

ngOnDestroy() {
    this.valueSub.unsubscribe();
}

// Template

<ul *ngIf="value">
    <li *ngFor="let val of value">{{val}}</li>
</ul>

Технічно можна досягти того ж результату без valueSub, але вимоги програми означають, що це правильний вибір.

Враховуючи роль і тривалість спостережуваного, перш ніж приймати рішення про підписку

Якщо дві або більше спостережуваних даних використовуються лише тоді, коли вони разом узяті, для об'єднання їх в одну підписку слід використовувати відповідні оператори RxJS.

Аналогічно, якщо first () використовується для фільтрації всіх, окрім першої емісії спостережуваного, я думаю, що є більший привід бути економним зі своїм кодом та уникати "зайвих" підписок, ніж для спостережуваного, який виконує постійну роль у сесія.

Якщо будь-яка з окремих спостережень корисна незалежно від інших, гнучкість та чіткість окремих підписок (ів), можливо, варто врахувати. Але відповідно до мого початкового твердження, підписка не повинна створюватися автоматично для кожного спостережуваного, якщо тільки немає чіткої причини для цього.

Щодо скасування підписок:

Точка проти додаткових підписок є те , що всі більше скасовує підписки потрібно. Як ви вже говорили, ми хотіли б припустити, що всі необхідні відписки застосовуються на Deestroy, але реальне життя не завжди йде так гладко! Знову ж таки, RxJS надає корисні інструменти (наприклад, перший () ) для впорядкування цього процесу, що спрощує код і зменшує потенціал для витоку пам'яті. Ця стаття надає релевантну додаткову інформацію та приклади, які можуть бути корисними.

Особисті переваги / багатослівність проти терміновості:

Враховуйте власні переваги. Я не хочу відхилятися від загальної дискусії про багатослівність коду, але метою має бути пошук правильного балансу між занадто великим «шумом» і тим, щоб зробити ваш код надто крикливим. Це, можливо, варто подивитися .

якщо оптимізація підписок - це ваша кінцева гра, чому б не піти на логічну крайність і просто слідувати цій загальній схемі:

 const obs1$ = src1$.pipe(tap(effect1))
 const obs2$ = src2$pipe(tap(effect2))
 merge(obs1$, obs2$).subscribe()

Виключно виконання побічних ефектів під час натискання та активації злиття означає, що у вас є лише одна підписка.

Однією з причин цього не робити є те, що ви втрачаєте багато з того, що робить RxJS корисним. Яка здатність складати спостережувані потоки та передплачувати / скасовувати підписку на потоки за потребою.

Я заперечую, що ваші спостереження повинні складатись логічно, а не забруднювати чи не плутати в ім'я зменшення кількості підписок. Чи слід логічно поєднувати ефект foo з ефектом смуги? Чи один вимагає іншого? Чи я колись, можливо, не захочу триггер foo, коли http $ випускає? Чи створюю я непотрібну зв'язок між непов'язаними функціями? Це все причини, щоб не ставити їх в один потік.

Це все, навіть не враховуючи обробку помилок, якою легше керувати за допомогою декількох IMO підписок