參考 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 是獲取電影的異步活動發生的地方。 您的組件變得更容易測試并且對它需要的數據負責。

總結

以上是生活随笔為你收集整理的为什么在大型 Angular 应用里我们需要使用 ngrx的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。