BACK
Use casesEscape stack — закрываем верхний слой
Use cases · 51

Escape stack — закрываем верхний слой

Паттерн

У пользователя открыт overlay (page), поверх него modal, поверх — dropdown. Escape должен закрыть СНАЧАЛА dropdown, потом modal, потом overlay. По одному, в правильном порядке.

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

Если каждый overlay-компонент слушает Escape сам — они все среагируют одновременно, и закроется ВСЁ за один Escape. Или хуже — закроется нижний слой, а верхний останется. Нужен централизованный stack.

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

  • Subject — принимает actions push/pop и Escape events.
  • scan — держит stack как immutable массив, применяет push/pop как pure reducer.
  • withLatestFrom — на Escape берёт текущий stack и определяет верхний слой.
  • map — формирует команду «закрыть слой X».

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

  • Каждый компонент со своим Escape-handler — рецепт катастрофы. Только централизованный stack.
  • Мутация массива stack in-place ломает OnPush и тестируемость. Только новые массивы.
  • При destroy компонента слой надо удалять из stack явно. Иначе stack будет содержать «призрак» уничтоженного overlay.

Что в итоге получаем

Escape всегда действует на верхний активный слой. Закрытие происходит послойно, как ожидает пользователь.

script.ts // TypeScript
CONSOLE · Console Output
Нажмите на запуск, чтобы увидеть результат...