 |
| Photo by Branko Stancevic on Unsplash |
When you need to send an API call, be it GET, POST or any other http request call, you can incorporate the use of State Management implementation, such as NGXS.
NGXS is a state management pattern + library for Angular. It acts as a single
source of truth for your application's state, providing simple rules for predictable
state mutations - NGXS documentation.
Here is the example of sending a GET request through a service call.
ngOnInit(): void {
this.spinnerLoading = true;
this.dataSource$ = this.postListService.getPosts();
this.getPostsData();
this.spinnerLoading = false;
}
getPostsData() {
this.dataSource$.subscribe(
(res) => ((this.posts = res), console.log('posts', this.posts))
);
}
Here we
subscribe to dataSource observable that tracks a GET request to the server.
This is the usual way of sending or receiving an http request data. However,
it's not likely that you would only have one or two API calls in your application.
If your applicaton is a bit more complex, you might need to get or post data to
the server quite often.
To avoid having multiple calls to the same API, which makes our application
faster and less prone to errors, we can use the NGXS state management. NGXS actions
are a great way to make a desired http request, and then simply dispatch that
action anytime you need to make a call to the server. It's actually pretty easy
and a perfect example of how DRY principle can be used. No need to write same
logic for a service call every time you have to make an http request. Instead,
you just dispatch an appropriate action. Nice, don't you think?
Here is an example:
@Action(GetPostById)
getPostById(
{ getState, setState }: StateContext<BlogPostStateModel>,
{ id }: GetPostById
) {
return this.blogPostService.getPostById(id).pipe(
tap((result: Post) => {
const state = getState();
setState({
...state,
selectedPost: result,
});
})
);
}
Another big plus of State Management is that you always have your data available in the State. And, you can get any data you need and work with it throughout your application. As said previously, no need to get the data through an API call, because you already have it saved in state. So, just pull it out when you need it:
if (editMode) {
this.store
.dispatch(new GetPostById(this.selectedPostId))
.subscribe((res) => {
this.editPost = true;
this.editSelectedPost(res.post.selectedPost.data);
});
}
Another example:
Here we subscribe to the service call and use the data to map values to the table:
ngOnInit(): void {
this.spinnerLoading = true;
this.dataSource$ = this.postListService.getPosts();
this.getPostsData();
this.spinnerLoading = false;
}
getPostsData() {
this.dataSource$.subscribe(
(res) => ((this.posts = res), console.log('posts', this.posts))
);
}
div class="table-wrapper" *ngIf="posts">
<table mat-table [dataSource]="posts.data">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>Id</th>
<td mat-cell *matCellDef="let post">{{ post.id }}</td>
</ng-container>
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let post">{{ post.attributes.title }}</td>
</ng-container>
With NGXS action, there is less code:
getPostsData() {
this.store.dispatch(new GetPosts()).subscribe((res) => {
(this.posts = res.post.posts), console.log('posts', this.posts);
});
}
Read more about NGXS in their official documentation:
Comments
Post a Comment