cdaringe/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
  <script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="root"></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();

// actions
var BING = 'BING';
var BONG = 'BONG';
var INCRIMENT = 'INCRIMENT';

// action creators
var bing = function bing() {
  return { type: BING };
};
var bong = function bong() {
  return { type: BONG };
};

// reducer
var bingReducer = function bingReducer(state, action) {
  if (state === undefined) state = 0;

  switch (action.type) {
    case INCRIMENT:
      return state + 1;
    default:
      return state;
  }
};

// epic
var bingEpic = function bingEpic(action$) {
  return action$.ofType('BING').switchMap(function () {
    return Rx.Observable.interval(100).mapTo({ type: INCRIMENT }).takeUntil(action$.ofType(BONG));
  });
};

// components/App.js

var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;

var App = function App(_ref) {
  var value = _ref.value;
  var bing = _ref.bing;
  var bong = _ref.bong;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'Value: ',
      value
    ),
    React.createElement(
      'button',
      { onClick: bing },
      'BING/start'
    ),
    React.createElement(
      'button',
      { onClick: bong },
      'BONG/stop'
    )
  );
};

App = connect(function (state) {
  return { value: state };
}, { bing: bing, bong: bong })(App);

// redux/configureStore.js
var _ReactRedux2 = ReactRedux;
var Provider = _ReactRedux2.Provider;
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

var epicMiddleware = createEpicMiddleware(bingEpic);

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

// index.js
ReactDOM.render(React.createElement(
  Provider,
  { store: store },
  React.createElement(App, null)
), document.getElementById('root'));
</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();

// actions
const BING = 'BING'
const BONG = 'BONG'
const INCRIMENT = 'INCRIMENT'

// action creators
const bing = () => ({ type: BING });
const bong = () => ({ type: BONG });

// reducer
const bingReducer = (state = 0, action) => {
  switch (action.type) {
    case INCRIMENT:
      return state + 1
    default:
      return state
  }
};

// epic
const bingEpic = action$ =>
  action$.ofType('BING')
  .switchMap(() => {
    return Rx.Observable.interval(100)
    .mapTo({ type: INCRIMENT })
    .takeUntil(action$.ofType(BONG))
  })


// components/App.js

const { connect } = ReactRedux;

let App = ({ value, bing, bong }) => (
  <div>
    <h1>Value: {value}</h1>
    <button onClick={bing}>BING/start</button>
      <button onClick={bong}>BONG/stop</button>
  </div>
);

App = connect(
  state => ({ value: state }),
  { bing, bong }
)(App);


// redux/configureStore.js
const { Provider } = ReactRedux;
const { createStore, applyMiddleware } = Redux;
const { createEpicMiddleware } = ReduxObservable;

const epicMiddleware = createEpicMiddleware(bingEpic);

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

// index.js
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
</script></body>
</html>

## jsbin.wugayu.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();

// actions
var BING = 'BING';
var BONG = 'BONG';
var INCRIMENT = 'INCRIMENT';

// action creators
var bing = function bing() {
  return { type: BING };
};
var bong = function bong() {
  return { type: BONG };
};

// reducer
var bingReducer = function bingReducer(state, action) {
  if (state === undefined) state = 0;

  switch (action.type) {
    case INCRIMENT:
      return state + 1;
    default:
      return state;
  }
};

// epic
var bingEpic = function bingEpic(action$) {
  return action$.ofType('BING').switchMap(function () {
    return Rx.Observable.interval(100).mapTo({ type: INCRIMENT }).takeUntil(action$.ofType(BONG));
  });
};

// components/App.js

var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;

var App = function App(_ref) {
  var value = _ref.value;
  var bing = _ref.bing;
  var bong = _ref.bong;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'Value: ',
      value
    ),
    React.createElement(
      'button',
      { onClick: bing },
      'BING/start'
    ),
    React.createElement(
      'button',
      { onClick: bong },
      'BONG/stop'
    )
  );
};

App = connect(function (state) {
  return { value: state };
}, { bing: bing, bong: bong })(App);

// redux/configureStore.js
var _ReactRedux2 = ReactRedux;
var Provider = _ReactRedux2.Provider;
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _ReduxObservable = ReduxObservable;
var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

var epicMiddleware = createEpicMiddleware(bingEpic);

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

// index.js
ReactDOM.render(React.createElement(
  Provider,
  { store: store },
  React.createElement(App, null)
), document.getElementById('root'));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
	<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/react-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>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="root"></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();

	// actions
	var BING = 'BING';
	var BONG = 'BONG';
	var INCRIMENT = 'INCRIMENT';

	// action creators
	var bing = function bing() {
	return { type: BING };
	};
	var bong = function bong() {
	return { type: BONG };
	};

	// reducer
	var bingReducer = function bingReducer(state, action) {
	if (state === undefined) state = 0;

	switch (action.type) {
	case INCRIMENT:
	return state + 1;
	default:
	return state;
	}
	};

	// epic
	var bingEpic = function bingEpic(action$) {
	return action$.ofType('BING').switchMap(function () {
	return Rx.Observable.interval(100).mapTo({ type: INCRIMENT }).takeUntil(action$.ofType(BONG));
	});
	};

	// components/App.js

	var _ReactRedux = ReactRedux;
	var connect = _ReactRedux.connect;

	var App = function App(_ref) {
	var value = _ref.value;
	var bing = _ref.bing;
	var bong = _ref.bong;
	return React.createElement(
	'div',
	null,
	React.createElement(
	'h1',
	null,
	'Value: ',
	value
	),
	React.createElement(
	'button',
	{ onClick: bing },
	'BING/start'
	),
	React.createElement(
	'button',
	{ onClick: bong },
	'BONG/stop'
	)
	);
	};

	App = connect(function (state) {
	return { value: state };
	}, { bing: bing, bong: bong })(App);

	// redux/configureStore.js
	var _ReactRedux2 = ReactRedux;
	var Provider = _ReactRedux2.Provider;
	var _Redux = Redux;
	var createStore = _Redux.createStore;
	var applyMiddleware = _Redux.applyMiddleware;
	var _ReduxObservable = ReduxObservable;
	var createEpicMiddleware = _ReduxObservable.createEpicMiddleware;

	var epicMiddleware = createEpicMiddleware(bingEpic);

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

	// index.js
	ReactDOM.render(React.createElement(
	Provider,
	{ store: store },
	React.createElement(App, null)
	), document.getElementById('root'));
	</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();

	// actions
	const BING = 'BING'
	const BONG = 'BONG'
	const INCRIMENT = 'INCRIMENT'

	// action creators
	const bing = () => ({ type: BING });
	const bong = () => ({ type: BONG });

	// reducer
	const bingReducer = (state = 0, action) => {
	switch (action.type) {
	case INCRIMENT:
	return state + 1
	default:
	return state
	}
	};

	// epic
	const bingEpic = action$ =>
	action$.ofType('BING')
	.switchMap(() => {
	return Rx.Observable.interval(100)
	.mapTo({ type: INCRIMENT })
	.takeUntil(action$.ofType(BONG))
	})


	// components/App.js

	const { connect } = ReactRedux;

	let App = ({ value, bing, bong }) => (
	<div>
	<h1>Value: {value}</h1>
	<button onClick={bing}>BING/start</button>
	<button onClick={bong}>BONG/stop</button>
	</div>
	);

	App = connect(
	state => ({ value: state }),
	{ bing, bong }
	)(App);


	// redux/configureStore.js
	const { Provider } = ReactRedux;
	const { createStore, applyMiddleware } = Redux;
	const { createEpicMiddleware } = ReduxObservable;

	const epicMiddleware = createEpicMiddleware(bingEpic);

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

	// index.js
	ReactDOM.render(
	<Provider store={store}>
	<App />
	</Provider>,
	document.getElementById('root')
	);
	</script></body>
	</html>