Kimserey's blog

Easily ensure that data are loaded with Ngrx store and router guards in Angular Last month, I describe a way to manage global state with ngrx/store . With the store, we manage the overal state of the Angular application in a single global object. Loading and retrieving data affects a single main state object. This simplication gives opportunities to other simplications. Like for example, if we loaded once a collection of items, we wouldn't need to reload it when a component is displayed as it is available in the state. But how can we ensure that and more importantly how can we keep the check logic in a maintainable state. Here enter the Angular router route guard which I also described few weeks ago in my post on how we could create and manage routes with the Angular router . Today I will show how we can use both together to solve the issue of ensuring data is loaded before displaying a route. This post will be composed by 3 parts: 1. Extand the previous sample to load users ...

Managing global state with Ngrx store in Angular The goal of Angular components is to be completely independent. This can lead to mismatch of displayed data where one component isn’t in sync with what other components are displaying. One solution is to have a stateful service shared among all components and delivering global data. This can be problematic when multiple pieces have to be globally accessible among multiple components. In this situation, the need for a global state becomes inevitable. Global state has had a bad reputation since inception due to its unpredictable nature. About two years ago, Redux was introduced as a way to manage this unpredictability by making the state immutable and operations acting on the state synchronous and stateless (a similiar approach can be found in the actor pattern). Since then, its principales has inspired multiple implementations, one of them being the Ngrx store for Angular. Today I will go through the library and build a sample applic...