D3 Examples - JS Bin // source http://jsbin.com/wugayu

xxxxxxxxxx
 
<!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: https://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: https://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>
    