Dispatcher

There are cases when states of not related components, which has different places in state tree, should change e.g: when list item is selected filter should collapse. This is where dispatcher kicks in. Dispatcher is design to send and receive messages between components.

First create a message

export class UpdateMessage extends Message {
  constructor(payload?: any) {
    super('MessageName', payload);
  }
}

Publish message

and publish message from B component

Dispatcher.publish(new UpdateMessage('payload'));
// or
Dispatcher.publish('UPDATE_MESSAGE', 'payload');

Receive message

Then in A component subscribe to dispatcher like this:

Dispatcher.subscribe(UpdateMessage as any, (payload: any) => {
    this.actions.update....
});

// or

Dispatcher.subscribe('UPDATE_MESSAGE', (payload: any) => {
  this.actions.update....
});

or you can listen for messages in A component like this:

Dispatcher.listenTo<OptionalPayloadType>(UpdateMessage as any)
    .pipe(takeUntil(this.unsubscriber))
    .subscribe((payload: any) => {
        ...
    });

// or 

Dispatcher.listenTo<OptionalPayloadType>('UPDATE_MESSAGE')
    .pipe(takeUntil(this.unsubscriber))
    .subscribe((payload: any) => {
        ...
    });