guojianwei001/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@15.2.1/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15.2.1/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/react-redux@4.4.5/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();

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;
  }
};

// components/App.js

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

var App = function App(_ref) {
  var isPinging = _ref.isPinging;
  var ping = _ref.ping;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'is pinging: ',
      isPinging.toString()
    ),
    React.createElement(
      'button',
      { onClick: ping },
      'Start PING'
    )
  );
};

App = connect(function (_ref2) {
  var isPinging = _ref2.isPinging;
  return { isPinging: isPinging };
}, { ping: ping })(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(pingEpic);

var store = createStore(pingReducer, 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();

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;
  }
};

// components/App.js

const { connect } = ReactRedux;

let App = ({ isPinging, ping }) => (
  <div>
    <h1>is pinging: {isPinging.toString()}</h1>
    <button onClick={ping}>Start PING</button>
  </div>
);

App = connect(
  ({ isPinging }) => ({ isPinging }),
  { ping }
)(App);

// redux/configureStore.js

const { Provider } = ReactRedux;
const { createStore, applyMiddleware } = Redux;
const { createEpicMiddleware } = ReduxObservable;

const epicMiddleware = createEpicMiddleware(pingEpic);

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

// index.js

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

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

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;
  }
};

// components/App.js

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

var App = function App(_ref) {
  var isPinging = _ref.isPinging;
  var ping = _ref.ping;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'is pinging: ',
      isPinging.toString()
    ),
    React.createElement(
      'button',
      { onClick: ping },
      'Start PING'
    )
  );
};

App = connect(function (_ref2) {
  var isPinging = _ref2.isPinging;
  return { isPinging: isPinging };
}, { ping: ping })(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(pingEpic);

var store = createStore(pingReducer, 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/react@15.2.1/dist/react.min.js"></script>
	<script src="https://unpkg.com/react-dom@15.2.1/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/react-redux@4.4.5/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();

	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;
	}
	};

	// components/App.js

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

	var App = function App(_ref) {
	var isPinging = _ref.isPinging;
	var ping = _ref.ping;
	return React.createElement(
	'div',
	null,
	React.createElement(
	'h1',
	null,
	'is pinging: ',
	isPinging.toString()
	),
	React.createElement(
	'button',
	{ onClick: ping },
	'Start PING'
	)
	);
	};

	App = connect(function (_ref2) {
	var isPinging = _ref2.isPinging;
	return { isPinging: isPinging };
	}, { ping: ping })(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(pingEpic);

	var store = createStore(pingReducer, 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();

	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;
	}
	};

	// components/App.js

	const { connect } = ReactRedux;

	let App = ({ isPinging, ping }) => (
	<div>
	<h1>is pinging: {isPinging.toString()}</h1>
	<button onClick={ping}>Start PING</button>
	</div>
	);

	App = connect(
	({ isPinging }) => ({ isPinging }),
	{ ping }
	)(App);

	// redux/configureStore.js

	const { Provider } = ReactRedux;
	const { createStore, applyMiddleware } = Redux;
	const { createEpicMiddleware } = ReduxObservable;

	const epicMiddleware = createEpicMiddleware(pingEpic);

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

	// index.js

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