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

JerryWang_汪子熙 - 2021-10-27 06:29:00

---

参考 ngrx 官网：https://ngrx.io/guide/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 是获取电影的异步活动发生的地方。 您的组件变得更容易测试并且对它需要的数据负责。

Tags 标签

angulartypescriptjavascript前端html5

扩展阅读