@aofl/map-state-properties-mixin NPM | npm.io

3.14.1 • Published 2 years ago

Install

Weekly downloads

273

License

MIT

Repository

Last release

2 years ago

@aofl/map-state-properties-mixin

@aofl/map-state-properties-mixin can be used to automatically subscribe mapStateProperties() to storeInstance and unsubscribe when the component is detached from dom. It eliminates the need to replicate the same block of code for every component that needs to react to changes from store.

The class extending mapStatePropertiesMixin(AoflElement) is required to have storeInstance as an instance property and implement mapStateProperties() function.

Api Documentation

Examples

Basic

Installation

$ npm i -S @aofl/map-state-properties-mixin

Usage

import styles from './styles.css';
const NAMESPACE = 'example-namespace';

class MyComponent extends mapStatePropertiesMixin(AoflElement) {
  constructor() {
    super();
    this.storeInstance = storeInstance;
  }

  static get properties() {
    return {
      name: String
    };
  }

  connectedCallback() {
    super.connectedCallback();
    this.mapStateProperties(); // initialize properties based on values in store
  }

  mapStateProperties() { // map properties from store to view
    const state = this.storeInstance.getState();
    this.name = state[NAMESPACE].name;
  }

  _render(context, html) {
    return super._render(html`<h1>Hello ${context.name}</h1>`, [styles])
  }
}

aofljs @aofl/map-state-properties-mixin subscribe map state properties mapStateProperties

@infinitebrahmanuniverse/nolb-_ao @everything-registry/sub-chunk-72 @zalastax/nolb-_ao

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago