Introduction To ngrx In Angular

In Angular, ngrx is built on the concept of Redux, a state management container. In ngrx, this state management is achieved by a store.

Any application built on ngrx will have three main components.

Store
Actions
Reducers

Store

A store acts just like a client-side database. Whenever any data is needed, the application gets it from the store.

Reducers

Reducers act as tables in the store. A reducer is a pure function that takes two arguments - one is the state of the store and the second one is any payload data (optional).

A simple reducer can be like this.

export interface Reducer<T> {
(state: T, action: Action): T;
}

Actions

Actions are the source of communication between store and reducers. Any change in the state of the store is done by the actions.

Actions are composed of type and any payload data.

A simple action can be like this.

export interface Action {
type: string;
payload?: any;
}

Effects

In ngrx, any server-side call can be done in effects. Ngrx/effect is the place where we put our async calls.

Angular Set up

Make a blank project of Angular. Now, install the ngrx in your project using the following command.

npm install @ngrx/core @ngrx/effects @ngrx/store –save

After successful installation, let's first define our state of the store. Our application state can be defined as the composition of different models. A state is simply bound to any model. A state is always an interface.

Let’s define the state of the applications. For this, create some model of the state. Navigate to the app folder and create a folder named model and create a TypeScript file like I have made a mode named “authModel”.

Add the following code.

export interface Details
{
part1:Number,
part2:Number,
part3:Number
}

Next is defining the state of this model. Create a folder named state and create “authState”.

import * as AuthModel from '../models/authModel'
export interface AuthState{
data:AuthModel.Details
}

Create a new file named appState. This will contain all of the states of the application.

import { AuthState } from '../state/authState'
export interface AppState {
authState:AuthState
}

Now, our state is ready. Next is to write some actions for the state. Create a folder named Actions in your App folder.

Create a TypeScript file for actions. Add the following code.

import {Action} from '@ngrx/store'
export const GET_AUTH_INFO='GET_AUTH_INFO'
export class GetAuthInfo implements Action {
readonly type=GET_AUTH_INFO;
constructor(public payload:any) { }
}
export type AuthActions = GetAuthInfo;

Let’s create a reducer for this action. Create a folder named reducers and add “authReducer”. Add the following code in it.

import {ActionReducer,Action} from '@ngrx/store';
import * as authActions from '../actions/actions'
import * as authModel from '../models/authModel';
import {AppState} from '../state/appstate';
import {AuthState} from '../state/authState';
const initialState: AuthState= { data : null }
export function authReducer(state : AuthState =initialState, actions:authActions.AuthActions) : any
{
switch (actions.type)
{
case authActions.GET_AUTH_INFO:
state.data.part1=1*actions.payload;
state.data.part2=2+actions.payload;
state.data.part3=3+actions.payload;
return state;
default:
let data = {
part1: 0,
part2: 1,
part3: 2,
}
return Object.assign({}, state, { data });
}
}

This is the simple reducer that is taking some values from the payload and after doing some mathematical operations, changing the state of the store.

By default, it is assigning some values to the state. Now, you can have an action reducer map for mapping different states with the reducers. Create one more file named app.reducer.ts and add the following code.

import { ActionReducerMap } from '@ngrx/store'
import { AppState } from '../state/appstate';
import {AuthState} from '../state/authState'
import * as AuthReducer from './authReducer';
export interface State {
authReducer:AuthState;
}
export const reducers: ActionReducerMap<State> ={
authReducer:AuthReducer.authReducer
}

Now, let's register our reducers and store in app.module.

import {StoreModule} from '@ngrx/store';
import {reducers} from './reducers/app.reducers';

Here, we are importing the store module from ngrx and reducers of the app. Now, register them in imports sections by adding the following line.

StoreModule.forRoot(reducers),

Next, let’s call this store in our app component. Add the following code in your app component.

import { Component } from '@angular/core';
import * as authActions from './actions/actions'
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs';
import {Details} from '../app/models/authModel'
import * as fromRoot from './reducers/app.reducers';
import {authReducer} from './reducers/authReducer'
import {ReducerConstants} from './reducers/reducerConstants'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
number:any;
protected data:Observable<Details>
constructor(public store:Store<any>){
this.store.select('authReducer').subscribe(data=>{
console.log(data);
this.data=data.data;
});
}
valueChanged(num:any)
{
if(!num)
return;
let payload:number=parseInt(num);
this.store.dispatch(new authActions.GetAuthInfo(payload));
}
}

Now, call this function valueChanged in HTML. Place this htm in app.compoment.html.

<input type="text" [(ngModel)]="number" (ngModelChange)="valueChanged(number)"/>
{{data.part1}}
{{data.part2}}
{{data.part3}}

Now, after adding the value, an action will be dispatched from the app component and then, it will update the state of the store.

This code demonstrates a simple app with the implementation of ngrx in Angular.

3 Comments

Join the conversation! Your thoughts help the community grow.

Rizwan Butt9y ago
Nice and concise !
Kiran Maram9y ago
Is ngrx supports Angluar 1.x
- Fatima Khan9y ago
  Ngrx/store is not available in angular1.x. For redux structure you can have a look on following article.http://blog.grossman.io/angular-1-using-redux-architecture/