当前位置: 首页 > Web前端 > HTML5

为什么我们需要在大型Angular应用程序中使用ngrx

时间:2023-04-05 21:48:42 HTML5

?参考ngrx官网:https://ngrx.io/guide/effects...与基于组件的副作用对比在基于服务的应用中,你的组件通过许多不同的服务与数据交互,这些服务通过属性暴露数据和方法。这些服务可能依赖于管理其他数据集的其他服务。您的组件使用这些服务来执行任务,从而赋予您的组件许多职责——违反了设计的单一职责原则。想象一下您的应用程序管理电影。这是一个获取并显示电影列表的组件。@Component({template:`{{movie.name}}`})exportclassMoviesPageComponent{电影:电影[];构造函数(私人电影服务:电影服务){}ngOnInit(){this.movi??eService.getAll()。订阅(电影=>this.movi??es=电影);}}服务实现,负责读取电影:@Injectable({providedIn:'root'})exportclassMoviesService{constructor(privatehttp:HttpClient){}getAll(){returnthis.http.get('/movies');}}这个小组件做了很多事情如下:管理电影的状态。使用该服务执行副作用,访问外部API以获取电影。更改组件内影片的状态。引入Stores和Effects的好处Effects在与Stores一起使用时减少了组件的责任。在较大的应用程序中,这变得更加重要,因为您有多个数据源,需要多个服务来获取此数据,并且服务可能依赖于其他服务。Effects处理外部数据和交互,让你的服务实现状态更少,只执行与外部交互相关的任务。接下来重构组件,将分享的电影数据放入Store。Effects处理电影数据的获取。重构组件实现:@Component({template:`{{movie.name}}

`})exportclassMoviesPageComponent{movies$:Observable=this.store.select(state=>state.movi??es);constructor(privatestore:Store<{movies:Movie[]}>){}ngOnInit(){this.store.dispatch({type:'[MoviesPage]LoadMovies'});电影仍然通过MoviesService获取,但现在组件不关心如何获取和加载电影。它只负责声明加载电影的意图,并使用选择器访问电影列表数据。Effects是获取电影的异步活动发生的地方。您的组件变得更容易测试并对其所需的数据负责。