Handling Toast Notifications with Mat-Snackbar and Redux

toast notifications can be handled directly through mat-snackbar as a component but if you're using redux, it can be neatly tied into the redux store, making it available to use on its own or as a response to other effects. this makes it a very powerful tool in handling the responses from your effects.

as with redux, there's a bunch of code to set up.

you need 4 files for toast itself

toast.effects.ts
toast.actions.ts
toast.selectors.ts
toast.reducer.ts

now, you can use these actions directly - simply dispatch a openToast action with the required params

or, you can tie it up with the success / fail actions of other entities

simply add toast-success and toast-fail css classes to your global stylesheet and you're good to go with a powerful tool that you can reuse in your effects.

what's next?

to extend this class,  you could implement the following to give you even more configurability

• instead of the hard 2000ms delay, make it dynamic.
• error toasts only dismiss on click