Notifications in Angular NgRx inside Effects as a side Actions

Managing Angular NgRx Toastr Notifications

The end

For those who are very impatient here is the link with the code on StackBlitz & GitHub

ackuser/angular-ngrx-ngx-toastr

The end with the final code…

Introduction

Are you using NGRX and you don’t know how to manage your notifications in an elegant way? I mean, leaving your applications in a more understandable way and not doing any spaghettis notifications in your clean code?

I will show you how you can treat the notifications in your app as a side actions from effects of another actions.

Our use case

If you arrive here, searching for something related with NGRX you already know for sure or you have already seen the counter use case as the common “hello world”.

Well, I will put you the base code in here so you will be able to get confortable with its Store, State, Action and Reducers; one of the simplest.

Notification system

First of all, we are going to choose our candidate to be a notifications system of our app… There are several good choices, I won’t do a research here, so I mention a couple of them:

SnackBars from Angular Material, one of the best choice of course

• https://material.angular.io/components/snack-bar/overview

Angular Toastr based on Toastr, which I really like.

• https://ngx-toastr.netlify.app

In our case and its simplicity I decided to use the last one.

Installing Dependencies

So, let’s set up Angular Toastr (I am with angular 8.x and the right version is 11.3.3)

$ npm install ngx-toastr@11.3.3 --save

In your angular.json

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css"
]

In your app.module

import { ToastrModule } from ‘ngx-toastr’;
...
@NgModule({
declarations: ...,
imports: [
...
ToastrModule.forRoot({
positionClass: "toast-bottom-full-width",
//preventDuplicates: true
})
...

Very easy as you can see, we also put how to style it and how you can prevent showing more than once together (it is not the case).

Find more about the installation in https://github.com/scttcper/ngx-toastr

The Magic

Create actions that will be dispatched any time you notify something in your other actions

https://github.com/ackuser/angular-ngrx-ngx-toastr/blob/master/src/app/counter.actions.ts

Say to the app how the state will be after all…

https://github.com/ackuser/angular-ngrx-ngx-toastr/blob/master/src/app/counter.reducer.ts

In our case, states returned are going to be the same because actions don’t affect to the Store

Our notify effects are making use of the library itself without firing any other actions. Just calling the service

https://github.com/ackuser/angular-ngrx-ngx-toastr/blob/master/src/app/counter.effects.ts

For sure, there are so many concepts around NGRX and Redux. The learning curve is so hard, although step by step things are getting less curve

The end (again)

ackuser/angular-ngrx-ngx-toastr

Conclusion

The benefits are considerable when you use this kind of actions connected to other actions through effects. They keep all your code in the entire application more dry and therefore cleaner in controllers, which are the main piece in components. Imagine, if you have an app with more than 20 components in angular, let’s leave aside the spaghettis.

To conclude, this kind of effects are essentials in your app brightening you to be a better developer. I hope I could write more articles related to NGRX and problems you easily find in your day by day.

Let’s reserves the 👏👏👏 for those whore really deserve 😄 !!!