New Twiddle

components.dispatch-saga.js

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

const stateToComputed = state => {
  return {
    number: state.saga.number,
    loading: state.saga.loading
  };
};

const dispatchToActions = dispatch => {
  return {
    demo: () => dispatch({type: 'SAGA_ACTION_ASYNC', data: 'look ma generators!'})
  };
};

const SagaComponent = Ember.Component.extend({
  layout: hbs`
    <button onclick={{action "demo"}}>Dispatch Saga!</button>
{{yield number loading}}
  `
});

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

middleware.index.js

import createSagaMiddleWare from 'redux-saga';
import root from '../sagas/index';

const sagaMiddleware = createSagaMiddleWare();

const setup = () => {
    sagaMiddleware.run(root);
};

export default {
    middleware: [sagaMiddleware],
    setup: setup
};

reducers.index.js

import { combineReducers } from 'redux';

var initialState = {
  number: 0,
  loading: false
}

var saga = ((state, action) => {
  if(action.type === 'LOADING') {
    return Object.assign({}, state, {loading: true});
  }
  if(action.type === 'SAGA_ACTION') {
    var number = state.number + 1;
    return Object.assign({}, state, {number: number, loading: false});
  }
  return state || initialState;
});

export default combineReducers({
  saga
});

sagas.example.js

import { delay } from 'redux-saga';
import { call, put, takeLatest } from 'redux-saga/effects';

function* demoAsync(action) {
  console.log(action.data);
  yield put({type: 'LOADING'});
  yield call(delay, 1000);
  yield put({type: 'SAGA_ACTION'});
}

export function* demo() {
  yield takeLatest('SAGA_ACTION_ASYNC', demoAsync);
}

sagas.index.js

import { fork } from 'redux-saga/effects';
import { demo } from './example';

export default function* root() {
  yield [
    fork(demo)
  ];
}

templates.application.hbs

{{#dispatch-saga as |number loading|}}
  <h1>redux saga run {{number}}x</h1>
  {{#if loading}}
    loading ...
  {{/if}}
{{/dispatch-saga}}

<p>Look at the `sagas/example.js` file to see how you can write async code with redux-saga. To configure redux-saga simply add the file you see here under `middleware/index.js`</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-redux": "3.0.0-beta.1",
    "ember-redux-saga-shim": "1.1.0",
    "ember-maybe-import-regenerator": "0.1.6"
  }
}