Todo React-Redux Demo

A demo demonstrating using Redux with React. Uses React, Redux, and React-Redux. Uses babel to handle some ES6 syntax, and Lodash for some syntactic sugar.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.13.0/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.2/lodash.js"></script>
<div id="container">
  <!-- Yield to React -->
</div>

Babel + JSX

const myarray = [
{name: "bill", checked: false},
{name: "jim", checked: false},
{name: "cyan", checked: false}
]

function checkboxes( state =  myarray, action){
	switch (action.type) {
  	case 'UPDATE_CHECKBOX':
    	return state.map((box, index) =>{
          if(box.name === action.name){
          	return Object.assign({}, box, {checked:                   !box.checked});
          }
      });
  	default:
    	return state; 
  }
}

function randombool( state = {logo: true}, action){
	switch (action.type) {
    case 'BLAH':
    	return state;
  	default:
    	return state; 
  }
}

const rootReducer = Redux.combineReducers({
checkboxes,
randombool
})

// Create Store
var contestantStore = Redux.createStore(rootReducer);

//CheckboxComponent extends React.Component{
const CheckboxComponent = React.createClass({
render(){
   return (
   <label><input type="checkbox" value={this.props.item} />{this.props.item}</label>
   )
 }
});
console.log(contestantStore.getState());
// Presentational Components (No state, only props and render)
function Checkboxes({checkboxes, randombool}) {
	// Use lodash to map values of an object to an array
	var my_checkboxes = _.map(checkboxes, c =>
  <CheckboxComponent item={c.name} />
  );
	return(
  <div>{my_checkboxes}</div>
  );
}



// Map state and dispatch to props
function mapStateToProps (state) {
	return {
  	checkboxes: state.checkboxes,
    randombool: state.randombool
    };
}


 
 // Container components (Pass props into presentational component)

 
 var CheckboxContainer = ReactRedux.connect(mapStateToProps) (Checkboxes);
 // Top-Level Component
 var App = React.createClass({
 	render: function () {
  	return (
    	<div>
        <h3>Blah:</h3>
        <CheckboxContainer />
      </div>
     );
  }
 });

// Render to DOM
var Provider = ReactRedux.Provider; // Injects store into context of all descendents
ReactDOM.render(
	<Provider store={contestantStore}>
  	<App />
  </Provider>,
  document.getElementById('container')
);