Retaining State of The Angular App When Page Refresh With NGRX
Rehydrate ngrx/store With an Example Project
Most of the web applications are written with SPA frameworks such as Angular, React, Vue.js, etc. The problem with these SPAs is that the single page is loaded in the browser once and then the framework will take care of all the routing among pages and gives the impression to the user that it is a multi-page application. When you refresh your page in the browser that single page called index.html is reloaded and you will lose the entire state of the application.
There are ways you can retain the state of the application in those cases. One way is to make the necessary API calls to the backend server and retrieve the data again. This works well if you have a small number of calls but, it strains the server. Another way is to design your application in such a way that when you put the data in the local storage and retain it as soon as the page is loaded in the browser.
In this post, we will see how we can retain the state of the application in Angular apps with the help of NGRX store and local storage.
- Prerequisites
- Example Project
- Problem
- Solution
- Implementation
