DEV Community

Syed Tabarak Ulla
Syed Tabarak Ulla

Posted on

Adding NgRx to the Angular Application

Greetings to everyone!

In this blog I'm going to show you the steps you'll have to follow integrate the NgRx into your Angular application.

Image description

Step-1: Install the @ngrx/store package into the application.

npm install @ngrx/store
Enter fullscreen mode Exit fullscreen mode

Step-2: To work with the redux dev toolkit will have to install the @ngrx/store-devtools package.

npm install @ngrx/store-devtools 
Enter fullscreen mode Exit fullscreen mode

Stpe-3: Now let's modify the app.module.ts file to link the redux store and the redux dev tool.

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools'; 

@NgModule({ 
  imports: [
    StoreModule.forRoot({ }),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      autoPause: true,
      trace: false,
      traceLimit: 25,
    })
  ]
});
Enter fullscreen mode Exit fullscreen mode

Step-4: Now create store folder for your state management under the app folder. And then under this create these below files

  • action.ts
  • reducer.ts
  • selector.ts
  • state.model.ts

Step-5: Inside the action.ts create actions.

import { createAction } from '@ngrx/store';

export const SampleAction = createAction('[Sample] Message');
Enter fullscreen mode Exit fullscreen mode

Step-6: In the reducer.ts create reducer to update the state whenever the actions get dispatched.

import { MockInterface } from './model';
import * as AppActions from './action';
import { createReducer, on } from '@ngrx/store';

interface InitialState = {
  message: string;
};

const initialState: InitialState = {
  message: '',
};

export const appReducer = createReducer(
  initialState,
  on(AppActions.SampleAction, (state) => ({
    ...state,
    message: 'Hello World!',
  }))
);
Enter fullscreen mode Exit fullscreen mode

Step-7: Will add a interface for our state in the state.model.ts.

import { InitialState } from './model';

export interface AppState {
  readonly app: InitialState;
}
Enter fullscreen mode Exit fullscreen mode

Step-8: Let's add selectors in the selector.ts to fetch the store value

import { AppState } from './state.model';

export const selectApp = (state: AppState) => state.app;
Enter fullscreen mode Exit fullscreen mode

Step-9: Now in the app.module.ts file where we have imported the StoreModule, will need to add the reducer there.

  StoreModule.forRoot({
    app: appReducer,
  }),
Enter fullscreen mode Exit fullscreen mode

Step-9: Let's dispatch the action to update state of the store with the empty message to have some message.

In your app.component.ts file

import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';
import { AppState } from '../store/state.model';
import { SampleAction } from 'src/app/store/action';

@Component({ 
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {
    this.store.dispatch(SampleAction());
  }
}
Enter fullscreen mode Exit fullscreen mode

Step-10: After successfully dispatching the action to update message in the store, now will fetch the store to read the message through the help of the Selector.

Add new variable in the app.component.ts and then update the ngOnInit function to read the message from the store.

export class AppComponent implements OnInit {
  message: string;

  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {
    this.store.dispatch(SampleAction());
    this.store.pipe(select('app')).subscribe((state) => {
      this.message = state.message;
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Step-11: In the app.component.html let's bind the message variable to display the message we have read from the store.

<h1>{{ message }}</h1>
Enter fullscreen mode Exit fullscreen mode

Let me know in the comments if there's any issues/doubts with this article, and if there's any suggestions for me please comment down. Thank you!.

Top comments (0)