Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
   <script src="https://fb.me/react-0.14.0.js"></script>
  <script src="https://fb.me/react-dom-0.14.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></script>
</head>
<body>
  <div id='root'></div>
</body>
</html>
 
const { Component } = React;
//const ReactDOM from React-DOM
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;
// React component
class Counter extends React.Component {
  render () {
    const { value, data, onIncreaseClick } = this.props
    return (
      <div>
        <span>Roll: {value}</span>
        <ul>
          {data.map(function(item, i){
            return (
              <li key={i}><h1>{item}</h1></li>
            );
          })}
        </ul>
        <button onClick={() => onIncreaseClick()}>DEAL</button>
      </div>
    )
  }
}
/*
Counter.propTypes = {
  data: PropTypes.array.isRequired,
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
}
*/
// Action
// ==============================
// const increaseAction = {type: 'increase'}
const increaseAction = function(){
  return {
      type: 'increase',
  }
}
// =================================================================================
// Reducer
// =================================================================================
function Card() {
  this.card = (Math.random()*4).toFixed(0);
}
Card.prototype = {
  getRandom: function(){
    var card;
    //console.log(this.card)
    switch (this.card) {
      case '1':
      card = 'heart';
      break;
      case '2':
      //card = 'diamonds';
      card = 'heart'; // weight the odds abit
      break;
      case '3':
      card = 'club';
      break;
      case '4':
      card = 'spade';
      break;
      default:
      card = 'heart';
      break;
    }
    return card;
  }
}
var dealer = {
  deal: function(){
    var results = [];
    for(var i = 0; i <4; i++){
      var card = new Card();
      results.push(card.getRandom());
    }
    console.log(results);
    return results;
  }
}
const initialState = {
  count: 0,
  data: []
}
function counter (state = initialState, action) {
  let count = state.count
  switch (action.type) {
    case 'increase':
      return Object.assign({}, state, {
        data: dealer.deal(),
        count: state.count+1
      })
    default:
      return state
  }
}
// Store
let store = createStore(counter)
// Map Redux state to component props
function mapStateToProps (state) {
  return {
    value: state.count,
    data: state.data
  }
}
// Map Redux actions to component props
function mapDispatchToProps (dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction())
  }
}
// Connected Component
let App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers