NGRX – State management for Angular.


Inspired by Redux, Store is RxJS powered state management for Angular applications. Store is a container for state of the application.

Refer to documentation at –

Key components

I have a sample application posted at


Unique events generated from components and services.

#v8 Onwards
export const login = createAction('[Login Initiatied] Login',
  props<{ principal: IPrincipal }>()
#Older way of creating actions is still valid.
import { Action } from '@ngrx/store';

export class Login implements Action {
  readonly type = '[Login Page] Login';
  constructor(public principal: IPrincipal) {}

You can dispatch an action like below

import * as appActions from '../actions/login.action';
principal = {
      email: this.username.value,
      password: this.password.value
    };{ principal }));

Example Actions


export const login = createAction('[Login Initiatied] Login',
  props<{ principal: IPrincipal }>()

export const loginSuccess = createAction('[Login Success] Login',
  props<{ userProfile: IUserProfile }>()

export const loginFailure = createAction('[Login Failure] Login',
  props<{ message: any }>()

export const logout = createAction('[Logout initiated] logout', 
props<{ userName: string}>()


Pure functions that manipulate the state.

const loginReducer =
    on(LoginActions.login, (state, { principal }) => {
      return {
          loggedIn: false,
          userProfile: {
            user: principal,
            details: null,
            profile: null


Selectors are pure functions to select, derive, compose pieces of state.

export const selectTheState = createSelector(selectState, state => state);
Flow of state
Flow of state



In my sample application my pacakge.json looks something like this for NGRX specific libraries

"@ngrx/effects": "^8.2.0",
"@ngrx/router-store": "^8.2.0",
"@ngrx/store": "^8.2.0",
"@ngrx/store-devtools": "^8.2.0",

One has to first install the basic store

npm install @ngrx/store --save



Leave a Reply

Your email address will not be published. Required fields are marked *