参考 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,就做了如下许多事情:
引入 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 是获取电影的异步活动发生的地方。 您的组件变得更容易测试并且对它需要的数据负责。 |
|