In this demo repo, we'll see by examples how to use NgRx with Angular to manage application state.

This project was generated with Angular CLI version 7.0.6

This repository is integrated with packtracker.io, which provids webpack bundle analysis and statistics on every pull request basis and establish performance budgets for your asset profile. To view the webpack bundle analysis and statistics, visit packtracker.io

Table of contents:

1. Prerequisites and Installation
2. Quick Start
3. Demo UI
4. Build Tasks and Commands
5. Changelog
6. References

To launch the demo application, you can try below steps yourself on your computer, or launch the application on StackBlitz, by clicking here.

1. Clone repository and checkout the master branch

   git clone https://github.com/kumaran-is/ngrx-demo.git
   cd demos
   git checkout master
   cd ngrx-demo

2. Install NPM dependencies

   npm install

3. Run linting and unit test

   ng lint
   ng test

4. Start application in development mode

   ng serve -o

5. Application opens in browser http://localhost:4200

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run ng e2e to execute the end-to-end tests via Protractor.

The goal of this demo application is to show-case on how you can use NgRx in your Angular application to manage application state.

Demo UI screen is organized into 7 pages with separate menus in the top navigation bar. Each screen will show case common usecase by examples as mentioned below.

1. Demo 1 - To show-case basic usage of NgRx to publish and read state from NgRx Store

2. Demo 2 - To show-case how to lazy load state for lazy loaded feature modules

3. Demo 3 - To show-case how to deal with API calls using @ngrx/effects

4. Demo 4 - To show-case how to implement Search functionality using Angular Reactive Forms with NgRx

5. Demo 5 - To show-case how to implement Search functionality using @ngrx/entity

6. Demo 6 - To show-case how to implement CRUD operations using @ngrx/entity

7. Demo 7 - To show-case how to optimize and encapsulate NgRx coding using Facade pattern

Also added following features to the demo applications at global level:

1. Implemented meta-reducer to clear store when user logs out.

2. Implemented meta-reducer to log actions/state events to the browser console for debugging

3. Added third-party meta-reducer library ngrx-store-freeze@~0.2.4 to prevent state from being mutated

4. Added util function action-unique.ts to ensure that each action is unique. This prevents any double actions being dispatched.

5. Added ngrx/router-store to bind router states like route param, route queryParam and route url to store. Also added selectors to query route param, route queryParam and route url from store

6. Integrated Redux DevTools provided by NGRX library @ngrx/store-devtools to monitor and debug store in non-production environments using Google Chrome Redux DevTools Plugin or Firefox Redux DevTools Extension.

7. Implemented smart(container) and dump(presentation) component pattern with NgRx to optimize page rendering using Angular OnPush ChangeDetectionStrategy

Follow this link for change history

• https://ngrx.io/

• https://redux.js.org/introduction/three-principles

• https://blog.angularindepth.com/search?q=ngrx

• https://medium.com/search?q=ngrx