@aofl/map-state-properties-mixin

Subscribe mapStateProperties() to storeInstance. Unsubscribes when the component detaches from dom

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
251Jun 15, 2021Aug 23, 2018Minified + gzip package size for @aofl/map-state-properties-mixin in KB

Readme

@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

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])
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.