NGRX – State management for Angular.

admin

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 – https://ngrx.io/guide/store

Key components

I have a sample application posted at https://www.github.com

Actions

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
    };

this.store.dispatch(appActions.login({ principal }));

Example Actions

Action-Reducer-State

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}>()
);

Reducers

Pure functions that manipulate the state.

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

Selectors

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

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

Example

Installation

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 *