/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
  <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
  <script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
  <script src="https://unpkg.com/vue-rx@2.1.1/vue-rx.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    <vue-ping/>
  </div>
<script id="jsbin-javascript">
/**
 * IMPORTANT ***************************************************************
 *
 * This example uses the global version of RxJS that includes ALL operators.
 * Inside your app, you will likely need to import the operators you use or
 * import all of them in your index.js entry file.
 *
 * Learn more about this: http://goo.gl/4ZlYeC
 */

'use strict';

console.clear();

// redux/modules/ping.js

var PING = 'PING';
var PONG = 'PONG';

var _ping = function _ping() {
  return { type: PING };
};

var pingEpic = function pingEpic(action$) {
  return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue
  .mapTo({ type: PONG });
};

var pingReducer = function pingReducer(state, action) {
  if (state === undefined) state = { isPinging: false };

  switch (action.type) {
    case PING:
      return { isPinging: true };

    case PONG:
      return { isPinging: false };

    default:
      return state;
  }
};

// redux/store
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

var epicMiddleware = createEpicMiddleware(pingEpic);

var store = createStore(pingReducer, applyMiddleware(epicMiddleware));

// vue/component.js

Vue.component('vue-ping', {
  template: '\n    <div>\n      <h1>is pinging: {{ isPinging }}</h1>\n      <button @click="ping">Start PING</button>\n    </div>\n  ',
  methods: {
    ping: function ping() {
      store.dispatch(_ping());
    }
  },
  subscriptions: function subscriptions() {
    return {
      isPinging: Rx.Observable.from(store).map(function (state) {
        return state.isPinging;
      })
    };
  }
});

// vue/app.js

new Vue({ el: '#app' });
</script>


<script id="jsbin-source-javascript" type="text/javascript">/**
 * IMPORTANT ***************************************************************
 *
 * This example uses the global version of RxJS that includes ALL operators.
 * Inside your app, you will likely need to import the operators you use or
 * import all of them in your index.js entry file.
 *
 * Learn more about this: http://goo.gl/4ZlYeC
 */

console.clear();

// redux/modules/ping.js

const PING = 'PING';
const PONG = 'PONG';

const ping = () => ({ type: PING });

const pingEpic = action$ =>
  action$.ofType(PING)
    .delay(1000) // Asynchronously wait 1000ms then continue
    .mapTo({ type: PONG });

const pingReducer = (state = { isPinging: false }, action) => {
  switch (action.type) {
    case PING:
      return { isPinging: true };

    case PONG:
      return { isPinging: false };

    default:
      return state;
  }
};

// redux/store
const { createStore, applyMiddleware } = Redux;
const { createEpicMiddleware } = ReduxObservable;

const epicMiddleware = createEpicMiddleware(pingEpic);

const store = createStore(pingReducer,
  applyMiddleware(epicMiddleware)
);


// vue/component.js

Vue.component('vue-ping', {
  template:`
    <div>
      <h1>is pinging: {{ isPinging }}</h1>
      <button @click="ping">Start PING</button>
    </div>
  `,
  methods: {
    ping: function(){
      store.dispatch(ping());
    }
  },
  subscriptions(){
    return {
      isPinging: Rx.Observable.from(store)
        .map( state => state.isPinging )
    };
  }
});


// vue/app.js

new Vue({el: '#app'});</script></body>
</html>

## jsbin.valuqebiya.js
/**
 * IMPORTANT ***************************************************************
 *
 * This example uses the global version of RxJS that includes ALL operators.
 * Inside your app, you will likely need to import the operators you use or
 * import all of them in your index.js entry file.
 *
 * Learn more about this: http://goo.gl/4ZlYeC
 */

'use strict';

console.clear();

// redux/modules/ping.js

var PING = 'PING';
var PONG = 'PONG';

var _ping = function _ping() {
  return { type: PING };
};

var pingEpic = function pingEpic(action$) {
  return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue
  .mapTo({ type: PONG });
};

var pingReducer = function pingReducer(state, action) {
  if (state === undefined) state = { isPinging: false };

  switch (action.type) {
    case PING:
      return { isPinging: true };

    case PONG:
      return { isPinging: false };

    default:
      return state;
  }
};

// redux/store
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

var epicMiddleware = createEpicMiddleware(pingEpic);

var store = createStore(pingReducer, applyMiddleware(epicMiddleware));

// vue/component.js

Vue.component('vue-ping', {
  template: '\n    <div>\n      <h1>is pinging: {{ isPinging }}</h1>\n      <button @click="ping">Start PING</button>\n    </div>\n  ',
  methods: {
    ping: function ping() {
      store.dispatch(_ping());
    }
  },
  subscriptions: function subscriptions() {
    return {
      isPinging: Rx.Observable.from(store).map(function (state) {
        return state.isPinging;
      })
    };
  }
});

// vue/app.js

new Vue({ el: '#app' });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
	<script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script>
	<script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
	<script src="https://unpkg.com/vue-rx@2.1.1/vue-rx.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app">
	<vue-ping/>
	</div>
	<script id="jsbin-javascript">
	/**
	* IMPORTANT ***************************************************************
	*
	* This example uses the global version of RxJS that includes ALL operators.
	* Inside your app, you will likely need to import the operators you use or
	* import all of them in your index.js entry file.
	*
	* Learn more about this: http://goo.gl/4ZlYeC
	*/

	'use strict';

	console.clear();

	// redux/modules/ping.js

	var PING = 'PING';
	var PONG = 'PONG';

	var _ping = function _ping() {
	return { type: PING };
	};

	var pingEpic = function pingEpic(action$) {
	return action$.ofType(PING).delay(1000) // Asynchronously wait 1000ms then continue
	.mapTo({ type: PONG });
	};

	var pingReducer = function pingReducer(state, action) {
	if (state === undefined) state = { isPinging: false };

	switch (action.type) {
	case PING:
	return { isPinging: true };

	case PONG:
	return { isPinging: false };

	default:
	return state;
	}
	};

	// redux/store
	var _Redux = Redux;
	var createStore = _Redux.createStore;
	var applyMiddleware = _Redux.applyMiddleware;
	var _ReduxObservable = ReduxObservable;
	var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

	var epicMiddleware = createEpicMiddleware(pingEpic);

	var store = createStore(pingReducer, applyMiddleware(epicMiddleware));

	// vue/component.js

	Vue.component('vue-ping', {
	template: '\n <div>\n <h1>is pinging: {{ isPinging }}</h1>\n <button @click="ping">Start PING</button>\n </div>\n ',
	methods: {
	ping: function ping() {
	store.dispatch(_ping());
	}
	},
	subscriptions: function subscriptions() {
	return {
	isPinging: Rx.Observable.from(store).map(function (state) {
	return state.isPinging;
	})
	};
	}
	});

	// vue/app.js

	new Vue({ el: '#app' });
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">/**
	* IMPORTANT ***************************************************************
	*
	* This example uses the global version of RxJS that includes ALL operators.
	* Inside your app, you will likely need to import the operators you use or
	* import all of them in your index.js entry file.
	*
	* Learn more about this: http://goo.gl/4ZlYeC
	*/

	console.clear();

	// redux/modules/ping.js

	const PING = 'PING';
	const PONG = 'PONG';

	const ping = () => ({ type: PING });

	const pingEpic = action$ =>
	action$.ofType(PING)
	.delay(1000) // Asynchronously wait 1000ms then continue
	.mapTo({ type: PONG });

	const pingReducer = (state = { isPinging: false }, action) => {
	switch (action.type) {
	case PING:
	return { isPinging: true };

	case PONG:
	return { isPinging: false };

	default:
	return state;
	}
	};

	// redux/store
	const { createStore, applyMiddleware } = Redux;
	const { createEpicMiddleware } = ReduxObservable;

	const epicMiddleware = createEpicMiddleware(pingEpic);

	const store = createStore(pingReducer,
	applyMiddleware(epicMiddleware)
	);


	// vue/component.js

	Vue.component('vue-ping', {
	template:`
	<div>
	<h1>is pinging: {{ isPinging }}</h1>
	<button @click="ping">Start PING</button>
	</div>
	`,
	methods: {
	ping: function(){
	store.dispatch(ping());
	}
	},
	subscriptions(){
	return {
	isPinging: Rx.Observable.from(store)
	.map( state => state.isPinging )
	};
	}
	});


	// vue/app.js

	new Vue({el: '#app'});</script></body>
	</html>