Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
 <script src="https://fb.me/react-0.14.0.min.js"></script>
  <script src="https://fb.me/react-dom-0.14.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
  <script src="https://npmcdn.com/xstream@9.0.0/dist/xstream.min.js"></script>
  <script src="https://npmcdn.com/@cycle/xstream-run@4.0.0/dist/cycle.min.js"></script>
  
<script>
const xs = xstream.default;
function createCycleMiddleware () {
  let store = null;
  let actionListener = null;
  let stateListener = null;
​
  const cycleMiddleware = _store => {
    store = _store;
    return next => {
      return action => {
        let result = next(action)
        if (actionListener) {
          actionListener.next(action);
        }
        if (stateListener) {
          stateListener.next(store.getState());
        }
        return result
      }
    }
  }
​
  cycleMiddleware.makeActionDriver = () => {
    return function actionDriver(outgoing$) {
      outgoing$.addListener({
        next: outgoing => {
          if (store) {
            store.dispatch(outgoing);
          }
        },
        error: () => {},
        complete: () => {},
      });
​
      return xs.create({
        start: listener => {
          actionListener = listener;
        },
        stop: () => {},
      });
    }
  }
​
  cycleMiddleware.makeStateDriver = () => {
    const isSame = {};
    const getCurrent = store.getState;
    return function stateDriver() {
      return xs.create({
        start: listener => {
          stateListener = listener;
        },
        stop: () => {},
      })
      .fold((prevState, currState) => {
        if (prevState === getCurrent) {
          prevState = getCurrent();
        }
        if (prevState === currState) {
          return isSame;
        }
        return currState;
      }, getCurrent)
      .map(state => state === getCurrent ? getCurrent() : state)
      .filter(state => state !== isSame);
    }
  }
​
  return cycleMiddleware;
}
</script>
</head>
  
<body>
  <div id='root'></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers