decorators-in-react.jsx

//
// app/state/TestCounter.js
//
// Contains partial application state, a bit like a small Redux store.
// It is a standard class with static fields and methods.
//

import { store } from 'app/decorators';

@store
class TestCounter {
  static counter = 0;

  static increaseCounter(increment = 1) {
    return {
      counter: this.counter + increment
    };
  }
}

export { TestCounter };

//
// app/display/Test.js
//
// A standard React component that subscribes to the TestCounter store.
//
// The component will automatically subscribe to, and unsubscribe from, the
// store when the component is mounted and unmounted.
//

import React, { Component } from 'react';

import { TestCounter } from 'app/state/TestCounter';
import { subscribe } from 'app/decorators';

@subscribe(TestCounter)
class Test extends Component {
  componentDidMount() {
    console.log('Test component mounted');
  }
  
  render() {
    return (
      <div onClick={ Layout.increaseCounter() }>
        <h1>Epic state test, { Layout.counter }</h1>
      </div>
    );
  }
}

export { Test };