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!.
Top comments (0)