We like Redux idea to reference every action with a key.

We think it’s very useful to have one single place in the code where we can list all the side-effects that can change states.

However we are not fond of store.dispatch(action) :

it requires that the store is accessible everywhere… which isn’t the case in our framework with isolated states

dispatch is a clear reference to the dispatchEvent method where we prefer the channel messaging API

Why the Channel messaging API ?

For multiple reasons :

the same syntax is used to send information from a context to another (Web workers, service workers)

it’s very close to an RxJS subject on which you can push next values (equivalent to post) and subscribe (equivalent to on)

Implementation

javascript
export class Channel {

    private _subject = new Subject<any>();

    post({type:string, message: any}) {
        this._subject.next({type, message});
    }

    from(type:string): Observable<any> {
        return this._subject.asObservable().filter(({t,m})=>(t===type));
    }
}

That is why we decided to implement an actions$ channel in the main that will act as a hub for multiple component and states.

The process is the following

actions = new Channel();

the element calls actions.post(ActionID, event) with ActionID being imported from and Actions.js

the component that needs to catch that event can call

actions$.from(ActionID).pipe({map(

Click should have an impact on state.

We are going to

Building a channel in RxJS

Why the Channel messaging API ?

Implementation