Adding NgRx to the Angular Application
Tags: angular, ngrx, redux, typescript
Published: 2023-04-15 17:11:28

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts0ee6x6b919amtyrcdy.png)

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