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:
Library | Version | Notes |
---|---|---|
Node | 10.9.0 | Recommended NodeJS version |
NPM | 6.5.0 | Recommended NPM version |
Angular | ~7.1.x | JavaScript-based open-source front-end SPA framework |
Angular CLI | 7.1.x | Set of development tools for Angular |
RxJS | ~6.3.3 | JavaScript library for reactive programming using Observables |
@ngrx/store | ~7.0.0 | Manage reactive state for Angular |
@ngrx/effects | ~7.0.0 | Implement side-effects like http requests, logging, notifications |
@ngrx/store-devtools | ~7.0.0 | Development tool to monitor and debug NGRX actions, state, effects and also enables a powerful time-travelling debugger |
@ngrx/entity | ~7.0.0 | Manage state and CRUD operations for object collection and array |
@ngrx/router-store | ~7.0.0 | Connects the Angular Router to ngrx store to manage state for angular router |
ngrx-store-freeze | ~0.2.4 | Meta-reducer that prevents state from being mutated |
angular-in-memory-web-api | ~0.8.0 | An in-memory web api for Angular demos and tests that emulates CRUD operations over a RESTy API. |
To launch the demo application, you can try below steps yourself on your computer, or launch the application on StackBlitz, by clicking here.
-
Clone repository and checkout the
master
branchgit clone https://github.com/kumaran-is/ngrx-demo.git cd demos git checkout master cd ngrx-demo
-
Install NPM dependencies
npm install
-
Run linting and unit test
ng lint ng test
-
Start application in development mode
ng serve -o
-
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.
-
Demo 1 - To show-case basic usage of NgRx to publish and read state from NgRx Store
-
Demo 2 - To show-case how to lazy load state for lazy loaded feature modules
-
Demo 3 - To show-case how to deal with API calls using
@ngrx/effects
-
Demo 4 - To show-case how to implement Search functionality using
Angular Reactive Forms
with NgRx -
Demo 5 - To show-case how to implement Search functionality using
@ngrx/entity
-
Demo 6 - To show-case how to implement CRUD operations using
@ngrx/entity
-
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:
-
Implemented meta-reducer to clear store when user logs out.
-
Implemented meta-reducer to log actions/state events to the browser console for debugging
-
Added third-party meta-reducer library ngrx-store-freeze@~0.2.4 to prevent state from being mutated
-
Added util function action-unique.ts to ensure that each action is unique. This prevents any double actions being dispatched.
-
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 -
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. -
Implemented smart(container) and dump(presentation) component pattern with NgRx to optimize page rendering using Angular
OnPush
ChangeDetectionStrategy