ngRx ------effectors

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

Effects

Effects 是 RxJS的副作用模型，在外部的作用下，如 网络请求， web socket信息 和基于时间的事件 Effects 用 流提供 action的数据源处理state。

介绍

在一个基于服务的Angular程序中，component负责通过service直接与外部资源交互， 而 effect 提供了一种思路 使与这些服务的交互独立于component。effect 是你处理任务如请求数据 长时间运行的任务生产的多种事件，和其他的外部交互的地方， 而且你的component不必了解这些交互的细节知识。

关键概念

• Effects 剥离了component的旁支作用， 让component的功能更加纯粹，只负责select state 或者分发actions。

• Effects 是一个长时间运行的服务，它监听每一个从store 分发的action的observable对象。

• Effects 从这些action中过滤出它感兴趣的action， 这通过使用 operator实现。

• Effects 执行任务，这些任务是同步或者异步的，它们会返回一个新的actions

例子

movie.effects.ts

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { EMPTY } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';

@Injectable()
export class MovieEffects {

  @Effect()
  loadMovies$ = this.actions$
    .pipe(
      ofType('[Movies Page] Load Movies'),
      mergeMap(() => this.moviesService.getAll()
        .pipe(
          map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
          catchError(() => EMPTY)
        ))
      )
    );

  constructor(
    private actions$: Actions,
    private moviesService: MoviesService
  ) {}
}