Async redux-saga example

HTML

<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
<script src="https://unpkg.com/react-redux@5.0.6/dist/react-redux.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/redux-saga@0.15.6/dist/redux-saga.min.js"></script>
<div id="root"></div>

Babel + JSX

const {Provider, connect} = ReactRedux;
const {createStore, applyMiddleware} = Redux;
const createSagaMiddleware = ReduxSaga.default;
const {put, call} = ReduxSaga.effects;

const reducer = (state, action) => ({msg: action.payload});

// Sagas
function* saga() {
  yield call(function* () {
    const ret = yield Promise.resolve(50);
    yield put({type: "*", payload: `ret is ${ret}`});
  });
}

// Component
class App extends React.Component {
  render () {
    return (<div>{this.props.msg}</div>);
  }
}
const ConnectedApp = connect((state) => {
  return state;
})(App);

// Store
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(saga);


// Container component
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.getElementById('root')
);