Effects

NgRx Effects реализуют побочные эффекты, работающие на основе библиотеки RxJS, применительно к хранилищу. Отслеживая поток действий, отправляемых в Store, они могут генерировать новые действия, например, на основе результатов выполнения HTTP-запросов или сообщений, полученных через Web Sockets.

Цели и функции NgRx Effects:

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

NgRx Effects устанавливаются отдельно.

npm i @ngrx/effects

Чтобы полностью осознать все преимущества использования NgRx Effects, посмотрим на пример без них.

articles.service.ts

@Injectable({ providedIn: 'root' })
export class ArticlesService {
  constructor(private http: HttpClient) {}

  getArticles() {
    return this.http.get('/api/articles');
  }
}

articles.component.ts

@Component({
  selector: 'app-articles',
  template: `
    <ul>
      <li
        *ngFor="let item of articles"
        [textContent]="item.title"
      ></li>
    </ul>
  `,
})
export class ArticlesComponent {
  articles: Article[] = [];

  constructor(private articlesService: ArticlesService) {
    this.getArticles();
  }

  getArticles() {
    this.articles = [];

    this.articlesService.getArticles().subscribe(
      (items) => (this.articles = items),
      (err) => console.log(err)
    );
  }
}

А теперь изменим пример внедрением NgRx Effects (ArtilcesService остается неизменным).

articles.component.ts

@Component({
  selector: 'app-articles',
  template: `
    <ul>
      <li
        *ngFor="let item of articles"
        [textContent]="item.title"
      ></li>
    </ul>
  `,
})
export class ArticlesComponent {
  articles$: Observable = this.store.pipe(
    select(selectArticlesList)
  );

  constructor(private store: Store) {
    this.store.dispatch(new LoadArticles());
  }
}

articles.actions.ts

export enum ArticlesActions {
  LoadArticles = '[Articles Page] Load Articles',
  ArticlesLoadedSuccess = '[Articles Page] Articles Loaded Success',
  ArticlesLoadedError = '[Articles Page] Articles Loaded Error',
}

export interface Article {
  id: number;
  author: string;
  title: string;
}

export class LoadArticles implements Action {
  readonly type = ArticlesActions.LoadArticles;
}

export class ArticlesLoadedSuccess implements Action {
  readonly type = ArticlesActions.ArticlesLoadedSuccess;

  constructor(public payload: { articles: Article[] }) {}
}

export class ArticlesLoadedError implements Action {
  readonly type = ArticlesActions.ArticlesLoadedError;
}

export type ArticlesUnion =
  | LoadArticles
  | ArticlesLoadedSuccess
  | ArticlesLoadedError;

articles.reducer.ts

export interface ArticlesState {
  list: Article[];
}

const initialState: ArticlesState = {
  list: [],
};

export function articlesReducer(
  state: State = initialState,
  action: ArticlesUnion
) {
  switch (action.type) {
    case ArticlesActions.ArticlesLoadedSuccess:
      return {
        ...state,
        list: action.payload.articles,
      };
    case ArticlesActions.ArticlesLoadedError:
      return {
        ...state,
        list: [],
      };
    default:
      return state;
  }
}

const selectArticles = (state: State) => state.articles;

export const selectArticlesList = createSelector(
  selectArticles,
  (state: ArticlesState) => state.list
);

articles.effects.ts

@Injectable()
export class ArticlesEffects {
  @Effect()
  loadArticles$ = this.actions$.pipe(
    ofType(ArticlesActions.LoadArticles),
    mergeMap(() =>
      this.articlesService.getArticles().pipe(
        map(
          (articles) =>
            new ArticlesLoadedSuccess({
              articles: articles,
            })
        ),
        catchError(() => of(new ArticlesLoadedError()))
      )
    )
  );

  constructor(
    private actions$: Actions,
    private articlesService: ArticlesService
  ) {}
}

app.module.ts

@NgModule({
  imports: [EffectsModule.forRoot([ArtilcesEffects])],
})
export class AppModule {}

Создание NgRx Effect начинается c отслеживания потока событий, который представлен сервисом Actions и предваряется декоратором @Effect(). Далее с помощью оператор ofType() задается тип действия, при возникновении которого будет выполнен побочный эффект, который в свою очередь должен возвращать новое действие, передаваемое далее в хранилище. Также не забывайте обрабатывать ошибки.

Сначала действие обрабатывается редюсером, а только потом попадает в поток сервиса Actions.

Сравнив два примера, сразу станет очевидно, что применение NgRx Effects избавило компонент от необходимости самостоятельно обращаться к сервису и контролировать результат его работы.

Все NgRx Effects должны регистрироваться в приложении с помощью модуля EffectsModule. Если вы определяете эффекты на уровне корневого модуля, то необходимо использовать метод forRoot(), если на уровне второстепенного - forFeature(). Оба метода принимают массив эффектов к качестве параметра.

Если в приложении все NgRx Effects определены для второстепенных модулей, то в корневом модуле обязательно должен быть импортирован без аргументов метод EffectsModule.forRoot().

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

Если вам необходимо реализовать побочный эффект, но новое действие генерировать не нужно, передайте декоратору @Effect() объект с указанием значения false для свойства dispatch.

В случае задания {dispatch: false}, действие, инициирующее выполнение эффекта, никогда не будет передано редюсеру.

@Effect({dispatch: false})

Жизненный цикл NgRx Effects

После регистрации всех эффектов в корневом модуле, происходит генерация действия ROOT_EFFECTS_INIT, для обработки которого может быть создан отдельный NgRx Effects.

@Effect()
initEffects$ = this.actions$.pipe(
    ofType(ROOT_EFFECTS_INIT),
    //...
);

NgRx предоставляет возможность управлять жизненным циклом эффекта с помощью реализации интерфейсов:

• OnInitEffects - возвращает действие сразу после того, как эффект был зарегистрирован в приложении;
• OnRunEffects - позволяет управлять началом и окончанием работы эффекта (по умолчанию начинается и заканчивается вместе с работой приложения);
• OnIdentifyEffects - позволяет регистрировать NgRx Effects несколько раз (по умолчанию эффект регистрируется в Angular приложении один раз, независимо от того, сколько раз загружается сам класс эффекта).

@Injectable()
export class ArticlesEffects
  implements OnInitEffects, OnRunEffects {
  @Effect()
  loadArticles$ = this.actions$.pipe(
    ofType(ArticlesActions.LoadArticles),
    startWith(new LoadArticles()),
    mergeMap(() =>
      this.articlesService.getArticles().pipe(
        map(
          (articles) =>
            new ArticlesLoadedSuccess({
              articles: articles,
            })
        ),
        catchError(() => of(new ArticlesLoadedError()))
      )
    )
  );

  constructor(
    private actions$: Actions,
    private articlesService: ArticlesService
  ) {}

  ngrxOnInitEffects(): Action {
    return new ArticlesEffectsInit();
  }

  ngrxOnRunEffects(
    resolvedEffects$: Observable<EffectNotification>
  ) {
    return this.actions$.pipe(
      ofType(ArticlesActions.ArticlesEffectsInit),
      exhaustMap(() =>
        resolvedEffects$.pipe(
          takeUntil(
            this.actions$.pipe(
              ofType(ArticlesActions.ArticlesLoadedSuccess)
            )
          )
        )
      )
    );
  }
}

Здесь для демонстрации работы OnInitEffects и OnRunEffects было введено дополнительное действие ArticlesEffectsInit, которое генерируется в момент регистрации эффекта и тем самым инициирует отслеживание потока действий.

В пределах одного класса может быть реализовано сразу несколько эффектов.

@Injectable()
export class ArticlesEffects{
    @Effect()
    loadArticles$ = ...

    @Effect()
    loadAuthors$ = ...
}