Implementing NgRx - Add The Store In To Our Application

In my previous article, I tried to explain NgRx framework for state management, Creation of Reducer method, Add Action, etc.

You can find my previous article from below links.

• State Management in Angular using NgRx
• Implementing NgRx - Understand and Add Reducer function
• Implementing NgRx - Understand And Add Actions In Our Application

In this article, we will add the store into our application and fetch the data from the store and display it on the browser. 

Let's do it!.

Open the app module ts file and import the storeModule from @ngrx/Store 

Then, add the StoreModule into the imports array in the @NgModule section.

We need to tell ngrx that what makes up our store, which reducers are involved.

To do this we use the forRoot() method.

Inside forRoot() method, we will pass a javascript object with an identifier as a key and Reducer method as the value.

Please refer to the screenshot below

Here, you can see the users is the identifier and userListReducer is the reducer method we defined in the user-list.reducer.ts file.

With that, we informed the ngrx where to find the reducer.

When the app restarts, ngrx will take the reducer and setup an application store for us where it registers the reducer.

Next, we need to use the store in our app component and load the user data from store instead of user array created earlier.

Open app.compoent.ts file 

We are using an array to store the user names.

We need to replace this array with our ngrx store to keep our user names.

For this, we should inject the store to the constructor function.

Please refer to the screenshot below.

Here you can see, the store type is an object with key and value.

Please note, the key name ‘users’ is the same name we have given in the app.module.ts file while reducer registration.

Please refer to the screenshot below.

The value is also an object with key and value. Its structure should be the same as the structure of initial state we defined in the reducer file.

Please refer to the screenshot below.

Here we are specifying that the type of data from the store area we require in this app component is an object with key userList and its value is a string array.

Next, we need to fetch the user list data from the store on the initial load.

For this, we added the logic in ngOnInit () method.

Here we use the select() function to fetch the required data from store area.

The select() function help us to select the slice of our state. That slice can be specified by the string ‘users’

Please refer to the screenshot below.

The statement this.store.select(‘users’)  will return an observable. 

To assign an observable result into our userList variable, we should change its type to observable.

Since the Observable is a generic type, we will provide the format as same as the format of our state object. ie, an object with key ‘userList’ and value as string array.

Finally, the component class changes are completed.

Please refer to the below screenshot to understand all the component class changes

Next, we should make some changes in the template file to display the user data on the screen.

Look at the app.component template file. Here we are looping through the list of users in the user list array.

But this will not work now, because we changed the userList array to an observable.

No worries! Angular has a solution for this. We can use the async pipe to subscribe the userList observable.

Here, Angular will manage the subscription for us and once it is resolved, we can use the value.

Once it got resolved, we can loop through its result.

Please refer to the screenshot below.

Save the files and check the browser to see the results.

You will get a result as below screenshot.

Please note that the 2 names listed under User List are getting from our store! 

Now, the default names(because we added a default case in reducer function to return the initial state as it is) in the store is correctly listed on screen.

But, Add User feature will not work. Because we didn’t add the code to dispatch our action yet.

Let’s do that next.

To update the store, we dispatch actions.

We can use this.store.dispatch() method to dispatch action. Inside the dispatch() method, we should pass the action.

In our case, we created an action class UserListAction. So, import the class ‘UserListAction’  from user-list.action.ts file.

Then use the below statement dispatch the action.

this.store.dispatch(new UserListAction(name) )

Here, we are passing the user name a constructor parameter.

So, we added the constructor for the ‘UserListAction’ class.

Please refer to the code snippet below.

constructor(public payload:string){}

The public variable inside the constructor is a Typescript trick to create a public class variable and assign a value to it. This will eliminate the statements like create a class variable first and assign the value inside the constructor etc.

Please refer to the screenshot below.

Now, Add this.store.dispatch(new UserListAction(name) ) statement inside the button click event method ‘addNewUser()’

Please refer the complete changes we made in the app.component.ts file below.

Save all changes and check the browser for result.

The default name will come as earlier. But if type any name in textbox and click Add User button, the name will be added to the store and get displayed on browser.

Please refer to the screenshot below.

Success!

We have successfully implemented the Angular store in our application.

Summary

In this article, we have learned how to how to implement NgRx in an Angular application 

Happy Learning