我的目标:使用“ NgRx”处理方式更新我的服务文件。
我正在执行GET请求以从服务中获取菜单数据,一旦调用发生,我希望它在NgRx中设置我的“菜单”状态,以便可以在任何地方访问菜单数据。
我不确定解决此问题的最佳方法是什么。
我当前的代码:
Menu.service.ts
constructor(private http: HttpClient, private store: Store<fromApp.AppState>) { }
public getMenu(): Observable<Restaurant> {
// not sure where to run this code:
// this.store.dispatch(new MenuActions.SetMenu(menu));
return this.http.get<Menu>('http://localhost:1234/api/menu');
}
问题:
1.)分发服务中的菜单项是最佳实践吗?
2.)在进行调用以调度更新后,是否应该使用“管道”运算符?
3.)如果我使用NgRx,则感觉不需要订阅getMenu()
,因为状态将在此文件中设置,并且我可以访问通常订阅该服务的状态。在这里使用服务文件是否有效,或者我对ngrx使用错误的方法?如果这是不正确的,那有什么选择呢?
谢谢!
在服务中分派菜单项是最佳实践吗?
您可以,但我不建议您这样做,因为NGRX对此有效。效果代表副作用,进行一些逻辑计算。
进行调用以调度更新后,是否应该使用“管道”运算符?
你不应该。
如果我使用的是NgRx,则感觉不需要订阅getMenu(),因为状态将在此文件中设置,并且我可以访问通常订阅该服务的状态。在这里使用服务文件是否有效,或者我对ngrx使用错误的方法?如果这是不正确的,那有什么选择呢?
你不应该。而是在组件中这样订阅
例
我有这样的服务
getPosts(): Observable<any> {
return this.http.get("https://jsonplaceholder.typicode.com/posts");
}
然后我的效果叫api
getPosts$ = createEffect(() =>
this.actions$.pipe(
ofType(PostActions.LoadPosts),
switchMap(_ => {
return this.postService
.getPosts()
.pipe(
map(
(posts: IPost[]) => PostActions.LoadPostsSuccess({ posts }),
catchError(errors => of(PostActions.LoadPostsFail(errors)))
)
);
})
)
);
所以在我的容器组件中
public posts$: Observable<IPost[]>;
constructor(private store: Store<PostState>) {}
ngOnInit() {
this.store.dispatch(LoadPosts());
this.posts$ = this.store.pipe(select(selectAllPosts));
}
<div class="row">
<div class="col-3" *ngFor="let post of posts$ | async">
<div class="card card-container">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.body }}</p>
<a
class="btn btn-outline-primary"
[routerLink]="['/posts/',post.id]"
role="button"
>Go to detail</a
>
</div>
</div>
</div>
</div>
当然,您将需要选择器来获取组件中的数据
export const selectPostState = createFeatureSelector<PostState>(
POST_FEATURE.storekey
);
export const selectPostsEntities = createSelector(
selectPostState,
posts => posts.entities //object look up
);
export const selectAllPosts = createSelector(
selectPostsEntities,
posts => Object.keys(posts).map(key => posts[key]) // use *ngFor
);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句