Discussion on: From React to Web Components: using mobx

[Luiz Américo]

I'm interested if you could clarify what you mean by your last comment:

See the code below:

github.com/blikblum/lit-element-mo...

I would write as:

  connectedCallback() {
    super.connectedCallback()
    // this could be removed
  }

  shouldUpdate(changedProperties) {

    // probably also not necessary here since route change could be handled elsewhere 

    if (changedProperties.has('username')) {
      this.trigger('username:change', this.username)
    }

    if (changedProperties.has('pathname')) {
      this.trigger('pathname:change', this.pathname)
    }
    return true
  }

The responsibility to call e.g. articlesStore.loadArticles() should be in a layer above what many call the orchestrator layer. I like having the route as this layer (not component based) but can be separated classes.

With this architecture is easier to test the component (just ensure calls the events when appropriate).

This is the core principle of data down, events up pattern

Other things to improve decoupling: move the stores to a instance property instead of a context property and listen to route changes elsewhere

The architecture of the demo is contaminated by React thinking that everything is handled in a component (routing, data loading etc) one of the things why i don't like React.

You can look what i mean by using route like the orchestrator here