Effects и побочные эффекты

В Angular effects применяются не только в контексте анимаций, но и в управлении потоками данных и состоянием приложения через библиотеку NgRx. Effects позволяют реагировать на действия (actions) и запускать асинхронные операции, не вмешиваясь напрямую в редьюсеры.

Основные принципы работы effects:

  • Не мутируют состояние — эффект генерирует новые действия на основе входного действия.
  • Асинхронные операции — сетевые запросы, таймеры, локальное хранилище.
  • Подписка на поток действий — через Actions сервис из NgRx.

Пример эффекта в NgRx:

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { EMPTY } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { DataService } from './data.service';
import * as DataActions from './data.actions';

@Injectable()
export class DataEffects {

  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(DataActions.loadData),
      mergeMap(() => this.dataService.getAll()
        .pipe(
          map(data => DataActions.loadDataSuccess({ data })),
          catchError(() => EMPTY)
        ))
    )
  );

  constructor(
    private actions$: Actions,
    private dataService: DataService
  ) {}
}

Здесь эффект loadData$ слушает действие loadData, запускает асинхронный запрос через сервис и, по завершении, диспатчит новое действие loadDataSuccess или игнорирует ошибку через EMPTY.

Эффекты позволяют разгружать компоненты, вынося побочные операции в отдельный слой, что обеспечивает чистоту архитектуры и предсказуемость состояния приложения.

Взаимодействие анимаций и эффектов

Angular позволяет комбинировать анимации с эффектами для создания сложных пользовательских интерфейсов. Примеры использования:

  • Анимация загрузочного индикатора при выполнении асинхронного запроса через NgRx effect.
  • Плавное появление данных после успешного ответа сервера.
  • Динамическое управление стилями компонентов на основе состояния приложения, полученного через эффекты.

Такое сочетание timing functions, keyframes и NgRx effects обеспечивает высокую интерактивность, плавность визуальных переходов и строгое управление состоянием приложения без дублирования логики.

Оглавление