es2015 class syntax (ember redux)

components.number-count.js

import Ember from 'ember';
import { connect } from 'ember-redux';
import hbs from 'htmlbars-inline-precompile';

const stateToComputed = state => ({
  number: state.number
});

const dispatchToActions = dispatch => ({
  add: () => dispatch({type: 'ADD'})
});

class MyClazz extends Ember.Component {
  get layout() {
    return hbs`
      <div>number: {{number}}</div>
      <div>color: {{color}}</div>
      <button onclick={{action "add"}}>add</button>
    `
  }
  constructor() {
    super(...arguments);
    this.color = 'blue';
    // ember 3.6+ use init instead of constructor
    // super.init(...arguments);
    // https://github.com/emberjs/rfcs/pull/337
  }
}

export default connect(stateToComputed, dispatchToActions)(MyClazz);

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

reducers.index.js

import { combineReducers } from 'redux';

const number = ((state, action) => {
  if(action.type === 'ADD') {
    return state + 1;
  }
  return state || 0;
});

export default combineReducers({
  number
});

templates.application.hbs

<h2>es2015 class syntax with ember redux!</h2>

{{number-count}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-redux": "4.0.0"
  }
}