Dispatch Strongly Typed Action Objects to an ngrx Store in Angular
Actions in an ngrx application are fundamentally very simple with a type property and usually a payload property. As a result, actions can be expressed as object literals with their types being nothing more than a simple string. This presents some serious logistical challenges as your application starts to grow in complexity by increasing the chance of action type collisions and opaque information when it is time to debug. This is where strongly typed action objects come into play as we replace our generic action objects with typesafe actions that pull their types from a strongly typed enum with clear information about what that action does. We will see how this makes our application a lot more readable and gives us better information in our developer tools.
My question is around checking the cached data and dispatching the action only if there is no cached data.
I have a 'products' observable which is streamed from the products that were retrieved from the server and stored in the store. The code looks like before. I saw a few different solutions like check the store state before dispatching or check the state inside the effect etc... What do you suggest?
<b>ngOnInit() {
this.products = this.store.pipe(select(ProductSelectors.selectAllProducts));
// Dispatch only if this.products$ does not emit any data
this.store.dispatch(ProductActions.LoadProducts());
}</b>Hi Varghese - it would be fairly easy to check if your selector returns anything and if not, dispatch an action to pull remote data. If you wanted to implement a more sophisticated caching strategy, I would recommend implementing that logic inside of an effect.
Thank you. I finally implemented in the effect itself. I answered my own question in stackoverflow
I have a contact application where I list the contact information as names as a master list. Then the individual item can be clicked and the details will be shown. I'm planning to download some 500 to 100 contacts and their details like address, email address, biography to the store which is a reasonably large document from the mongodb.
What does your experience say when it comes to download large amounts of data to the browser? Is there any size that I need to worry about when it comes to how much data I can keep in a ngrx store which correlates to the browser memory?
This depends on a variety of factors but typically when I find performance issues because of too much data in the browser are generally an indication of a larger UX issue. How many records can a user comfortably parse at any given time? Maybe 20 or 30... but definitely not 500. With large datasets, I generally implement a paging mechanism and scope the data set to what is comfortable to the user. You could also store a subset of data such as id, firstName, lastName and then lazy load the rest of the record when a user interacts with that contact. The point being that when you optimize for the user experience, performance issues tend to become a secondary concern.
I agree to what you said. I should download 10 or 20 contacts at a time. But I have a few other reasons which I did not mention in the previous message.
One reason I wanted to download all of them at once was to avoid making server calls. I get the data from the Microsoft CosmosDB, so there is charge for every API call. The other reason is that I want to cache the data in the browser IndexedDB so the app can work without internet connection. From an implementation perspective, download all of them at once is the easiest implementation, and then retrieve the data from the local or the ngrx store and not from the backend database.