In the PostListComponent, I am iterating over posts retrieved from the server and displaying them using individual PostItemComponents. NGXS is being used for state management in this scenario. When initiating fetchPosts requests, I set the loading state property to true. After a successful request, it is changed back to false. If a request fails, the error object on the state is updated with message and exception properties.
Current implementation:
`
export class PostListComponent implements OnInit {
private posts$: Observable<any> = this.store.select(state => state.posts);
private isLoading: boolean = false;
private error: object = {};
constructor(
public postsFacade: PostsFacadeService,
public moviesFacade: MoviesFacadeService,
private store: Store) {
}
ngOnInit() {
this.posts$.subscribe(
(state) => this.onLoadingEvent(state)
);
this.posts$.subscribe(
(error) => this.onErrorEvent(error)
)
}
onErrorEvent(error)
{
this.error = error.error;
}
onLoadingEvent(state)
{
this.isLoading = state.loading;
}
`
Store structure:
`
@State<PostStateModel>({
name: 'posts',
defaults: {
posts: [],
loading: false,
error: {
message: "",
error: ""
},
}
})
`
I believe there might be a more efficient way to subscribe to state changes in the store, possibly utilizing the rxjs mergeMap operator. My current approach works, but I'm open to suggestions on how to better handle store changes within my component.