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


2723.14.13 months ago4 years agoMinified + gzip package size for @aofl/map-state-properties-mixin in KB



@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



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


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

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

  static get properties() {
    return {
      name: String

  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.