New Twiddle

components.customize-me.js

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

const stateToComputed = state => {
  return {
    name: state.data.name,
    loading: state.data.loading
  };
};

const dispatchToActions = dispatch => {
  return {
    legit: () => {
      dispatch({type: 'LOADING'});
      return new Ember.RSVP.Promise(resolve => {
        Ember.run.later(() => {
          dispatch({type: 'LEGIT_ACTION'});
          resolve();
        }, 600);
      });
    },
    fail: () => dispatch({type: 'FAIL_ACTION'})
  };
};

const SagaComponent = Ember.Component.extend({
  layout: hbs`
    {{#if loading}}
      <p>demo: {{name}} <strong>loading ...</strong></p>
    {{else}}
      <p>demo: {{name}}</p>
    {{/if}}
    <button onclick={{action "legit"}}>Good Action!</button>
    <button onclick={{action "fail"}}>SideEffect Action!</button>
  `
});

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

reducers.index.js

import { combineReducers } from 'redux';

var initialState = {
  name: 'try me!',
  number: 0,
  loading: false
}

var data = ((state, action) => {
  if(action.type === 'LEGIT_ACTION') {
    var number = state.number + 1;
    var text = 'good work! ' + number;
    return Object.assign({}, state, {name: text, number: number, loading: false});
  }
  if(action.type === 'FAIL_ACTION') {
    state.name = 'side effect! doh!';
    return state;
  }
  if(action.type === 'LOADING') {
    return Object.assign({}, state, {loading: true});
  }
  return state || initialState;
});

export default combineReducers({
  data
});

services.redux.js

import redux from 'redux';
import ReduxService from 'ember-redux/services/redux';
import reducers from '../reducers/index';
import enhancers from '../enhancers/index';
import thunk from 'redux-thunk';
import { freeze } from 'ember-redux-freeze';

const { createStore, applyMiddleware, compose } = redux;

const makeStoreInstance = ({reducers, enhancers}) => {
  const middleware = applyMiddleware(thunk, freeze);
  const createStoreWithMiddleware = compose(middleware, enhancers)(createStore);
  return createStoreWithMiddleware(reducers);
};

export default ReduxService.extend({
  reducers,
  enhancers,
  makeStoreInstance
});

templates.application.hbs

<h2>Customize Ember Redux</h2>

{{customize-me}}

<p>Look at the `services/redux.js` file to see how you can hand wire the createStore</p>

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",
    "ember-redux-freeze": "1.0.0"
  }
}