Manual refresh — кнопка обновления + initial load

Паттерн

Страница грузит данные при открытии, и у неё есть кнопка «Обновить». Логика одинаковая: «загрузить данные». Не хочется дублировать HTTP-код в двух местах.

Какую проблему решаем

Если разделить логику на initial-load (в ngOnInit) и refresh-click (в обработчике кнопки) — рано или поздно они разойдутся. Один поправит loading state, другой — нет. Один добавит retry, другой забудет. Code drift.

Операторы и зачем они нужны

• Subject — моделирует кнопку Refresh.
• startWith('initial') — добавляет первый триггер автоматически, без отдельного вызова метода. Initial load и refresh — один и тот же поток.
• switchMap — если пользователь нажал кнопку, пока летит ответ — отменяем старый запрос, грузим заново.
• map — формирует VM для шаблона.

Подводные камни

• mergeMap — два параллельных refresh, ответы могут прийти не по порядку. UI будет мигать старыми данными.
• concatMap — каждый клик встанет в очередь. Нажмёте 5 раз подряд — будет 5 последовательных запросов, хотя нужен только последний.
• Без startWith страница будет пустая до первого клика. Initial load не сработает.