👂 Listening for Actions in @ngrx/store 👂

The Problem

You need to run some code after a particular action has been fired.

For example, you want to reset a form after the ADD_STORY_SUCCESS action has been fired.

The Solutions

🤖 Add New Key

Add one more key to your state.

isSuccess: boolean

Then you can listen to changes like this:

this.store.select(state => state.story.isSuccess)
.filter(v => !!v)
.subscribe(() => this.form.reset())

I do not like this solution because I have to maintain another key in my store and every time worry about resetting it.

🙄 Subscribe to Effect

If you are working with ngrx/effects you can inject the effect into your component and subscribe to him.

For example:

@Effect() addStory$ = this.actions$
.switchMap(action => this.storyService.add(action.payload)
.map(story => ({

Then in your component:

constructor( private storyEffects : StoryEffects) {}
.filter(action => action.type === 'ADD_STORY_SUCCESS')
.subscribe(res => this.form.reset());

There are two dilemmas with this approach:

  1. Maybe you do not work with ngrx/effects.

2. You need to use the share operator. Otherwise, you will have two subscriptions. (i.e., two HTTP calls in this case)

@Effect() addStory$ = this.actions$
.switchMap(action => this.postsService.add(action.payload)
.map(story => ({

💪 Subscribe to the Dispatcher

You may not know that, but every action goes through a service called Dispatcher. The Dispatcher is a Subject which means it is observable.

If we want to be notified when actions are fired, we can subscribe to the Dispatcher in our component.

constructor(private dispatcher: Dispatcher) {}
dispatcher.filter(action => action.type === 'ADD_STORY_SUCCESS')
.subscribe(() => this.form.reset())

I took a step further and created a more comfortable syntax.

export class AppActions {
_actions = new Subject<Action>();

ofType( type : string ) {
return this._actions.filter(( action : Action )
=> action.type === type);

nextAction( action : Action ) {


export class MyDispacther extends Dispatcher {
constructor( private actions: AppActions ) {

next( action: Action ) {

I am extending the original Dispatcher and using a new Subject to create a slightly cleaner syntax.

We also need to tell Angular to use our Dispatcher instead of the original.

providers: [{ provide: Dispatcher, useClass: MyDispacther }]

Now in our component we can write the following code:

constructor( private actions : AppActions) {}
.subscribe(() => this.form.reset())

We will see in a future article, how it can help us when I talk about connecting your forms to ngrx/store.


On this occasion, I would like to present you with a new tool that I have been working on lately that will save you the headache of all the Redux boilerplate.