14. map: DTO в ViewModel

Реальный кейс: DTO → ViewModel

В Angular-приложениях данные с сервера обычно приходят в одной форме (это называют DTO — Data Transfer Object), а компоненту удобнее работать с другой (это часто называют ViewModel). map — стандартный инструмент для такого преобразования.

Правило чистой трансформации

map должен быть чистой функцией: получил значение → вернул новое значение. Никаких console.log, изменений внешних переменных, отправки аналитики и т.п. Если нужны побочные эффекты — для них есть отдельный оператор tap, мы изучим его позже.

Глоссарий

• DTO — структура данных, которую отдаёт сервер.
• ViewModel — структура, удобная для отображения в UI (готовые строки, флаги, классы).
• Чистая функция — функция без побочных эффектов: одинаковый вход всегда даёт одинаковый выход, и она ничего не меняет вокруг себя.

const { from, map } = Rx;

const users = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Linus' }
];

const labels$ = from(users).pipe(
  map(user => 'User #' + user.id + ': ' + user.name)
);

labels$.subscribe(label => console.log(label));