为什么在大型 Angular 应用里我们需要使用 ngrx

参考 ngrx 官网:https://ngrx.io/guide/effects#registering-root-effects

Comparison with component-based side effects

在基于服务的应用程序中,您的组件通过许多不同的服务与数据交互,这些服务通过属性和方法公开数据。 这些服务可能依赖于管理其他数据集的其他服务。 您的组件使用这些服务来执行任务,从而赋予您的组件许多职责——违反了设计的单一职责原理。

想象一下,您的应用程序管理电影。 这是一个获取并显示电影列表的组件。

@Component({
  template: `
    <li *ngFor="let movie of movies">
      {{ movie.name }}
    </li>
  `
})
export class MoviesPageComponent {
  movies: Movie[];
 
  constructor(private movieService: MoviesService) {}
 
  ngOnInit() {
    this.movieService.getAll().subscribe(movies => this.movies = movies);
  }
}

service 实现,负责读取 movies:

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

  getAll() {
    return this.http.get('/movies');
  }
}

这一个小小的 Component,就做了如下许多事情:

  • 管理电影的状态。
  • 使用该服务执行副作用,访问外部 API 以获取电影。
  • 更改组件内电影的状态。

引入 Store 和 Effect 的好处

与 Store 一起使用时,Effects 会减少 Component 的责任。 在更大的应用程序中,这变得更加重要,因为您有多个数据源,需要多个服务来获取这些数据,而服务可能依赖于其他服务。

Effects 处理外部数据和交互,允许您的服务实现达到 less stateful 的效果,并且只执行与外部交互相关的任务。 接下来,重构组件以将共享的电影数据放入 Store。 Effects 处理电影数据的获取。

重构后的 Component 实现:

@Component({
  template: `
    <div *ngFor="let movie of movies$ | async">
      {{ movie.name }}
    </div>
  `
})
export class MoviesPageComponent {
  movies$: Observable<Movie[]> = this.store.select(state => state.movies);
 
  constructor(private store: Store<{ movies: Movie[] }>) {}
 
  ngOnInit() {
    this.store.dispatch({ type: '[Movies Page] Load Movies' });
  }
}

电影仍然通过 MoviesService 获取,但现在组件不再关心如何获取和加载电影。 它只负责声明其加载电影的意图,并使用 selector 访问电影列表数据。

Effects 是获取电影的异步活动发生的地方。 您的组件变得更容易测试并且对它需要的数据负责。

上一篇:第5集 算数逻辑单元


下一篇:计算机的组成