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>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="//fb.me/react-0.14.5.js"></script>
<script src="//fb.me/react-dom-0.14.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.6/react-redux.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery.min.js"></script> -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">-->
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app"></div>
</div>
</body>
</html>
 
// Action Creators
​
function startTimer(baseTime = 0) {
  return {
    type: "START_TIMER",
    baseTime: baseTime,
    now: new Date().getTime()
  };
}
​
function stopTimer() {
  return {
    type: "STOP_TIMER",
    now: new Date().getTime()
  };
}
​
function resetTimer() {
  return {
    type: "RESET_TIMER",
    now: new Date().getTime()
  }
}
​
​
// Reducer / Store
​
const initialState = {
  startedAt: undefined,
  stoppedAt: undefined,
  baseTime: undefined
};
​
function reducer(state = initialState, action) {
  switch (action.type) {
    case "RESET_TIMER":
      return {
        ...state,
        baseTime: 0,
        startedAt: state.startedAt ? action.now : undefined,
        stoppedAt: state.stoppedAt ? action.now : undefined
      };
    case "START_TIMER":
      return {
        ...state,
        baseTime: action.baseTime,
        startedAt: action.now,
        stoppedAt: undefined
      };
    case "STOP_TIMER":
      return {
        ...state,
        stoppedAt: action.now
      }
    default:
      return state;
  }
}
​
const store = Redux.createStore(reducer);
​
​
// Helper function that takes store state
// and returns the current elapsed time
function getElapsedTime(baseTime, startedAt, stoppedAt = new Date().getTime()) {
  if (!startedAt) {
    return 0;
  } else {
    return stoppedAt - startedAt + baseTime;
  }
}
​
​
// Components
​
class Application extends React.Component {
  render() {
    return (
      <div>
        <Timer updateInterval={33} />
        <Timer updateInterval={1000} />
      </div>
    );
  }
}
​
class Timer extends React.Component {
  componentDidMount() {
    this.interval = setInterval(this.forceUpdate.bind(this), this.props.updateInterval);
  }
​
  componentWillUnmount() {
    clearInterval(this.interval);
  }
​
  render() {
    const { baseTime, startedAt, stoppedAt } = this.props;
    const elapsed = getElapsedTime(baseTime, startedAt, stoppedAt);
​
    return (
      <div>
        <div>Time: {elapsed}</div>
        <div>
          <button onClick={() => this.props.startTimer(elapsed)}>Start</button>
          <button onClick={() => this.props.stopTimer()}>Stop</button>
          <button onClick={() => this.props.resetTimer()}>Reset</button>
        </div>
      </div>
    );
  }
}
​
function mapStateToProps(state) {
  const { baseTime, startedAt, stoppedAt } = state;
  return { baseTime, startedAt, stoppedAt };
}
​
Timer = ReactRedux.connect(mapStateToProps, { startTimer, stopTimer, resetTimer })(Timer);
​
​
// Entry
​
ReactDOM.render((
  <ReactRedux.Provider store={store}>
    <Application />
  </ReactRedux.Provider>
), document.getElementById("app"));
Output

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

Dismiss x
public
Bin info
BinaryMusepro
0viewers