Adding NgRx to the Angular Application

Syed Tabarak Ulla — Sat, 15 Apr 2023 17:11:28 +0000

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.

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

npm install @ngrx/store

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

npm install @ngrx/store-devtools

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,
    })
  ]
});

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');

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!',
  }))
);

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

import { InitialState } from './model';

export interface AppState {
  readonly app: InitialState;
}

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;

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,
  }),

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

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

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>

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!.

Create Angular project with Jest Testing Framework

Syed Tabarak Ulla — Sat, 11 Mar 2023 22:23:46 +0000

STEP:1

npm install -g @angular/cli

STEP:2

ng new my-app-name

STEP:3

cd my-app-name
ng serve --open

STEP:4

npm install jest @types/jest jest-preset-angular --save-dev

STEP:5

npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter

If the above code didn't removed the packages related to Karma and Jasmine, you can remove it manually from the package.json file. And then run the npm install to update the package-lock.json file.

STEP:6
Remove test from the angular.json file

STEP:7
Replace test with jest on the scripts in package.json
"test": "jest",

STEP:8
Create new file as setupJest.ts on root level and add below code in it

import 'jest-preset-angular/setup-jest';

STEP:9
Remove if these files exist in the project
karma.conf.js and test.ts

STEP:10
Update the types value in the tsconfig.spec.json file

"types": [
      "jest",
      "node"
    ]

STEP:11
Add below code on the package.json

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "globals": {
      "ts-jest": {
        "tsconfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
   }
}

Finally now we can test the application by running the below command on terminal.

npm run test

If you need boilerplate code for Angular app with Jest test framework, please checkout my GitHub repo Angular-with-Jest

DEV Community: Syed Tabarak Ulla

Adding NgRx to the Angular Application

Create Angular project with Jest Testing Framework