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.

by michae1

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="root">
  <!-- Yield to React -->
</div>

Babel + JSX

function todoReducer (currentState, action) {
	currentState = currentState || {}; // Initial State
  
  switch (action.type) {
  	case 'ADD_TODO':
    	if (action.id && action.text) {
      	let newTodo = {};
        newTodo[action.id] = {id: action.id, text: action.text};
      	return Object.assign({}, currentState, newTodo);
      } else {
      	return currentState;
      }
    case 'REMOVE_TODO':
    	if (action.id) {
      	let nextState = Object.assign({}, currentState);
        delete nextState[action.id];
        return nextState;
      } else {
      	return currentState;
      }
    default:
    	return currentState; // Always return the state
  }
}

// Action Creators:
var _idSeq = 0;
function addTodo (text) {
	return {type: 'ADD_TODO', text: text, id: ++_idSeq};
}

function removeTodo (id) {
	return {type: 'REMOVE_TODO', id: id};
}

// Create Store
var todoStore = Redux.createStore(todoReducer);

// Presentational Components (No state, only props and render)
function TodoList({todos, removeTodo}) {
	// Use lodash to map values of an object to an array
	var todoItems = _.map(todos, todo => <TodoItem key={todo.id} todo={todo} removeTodo={removeTodo}/>);
	return <ul>{todoItems}</ul>;
}

function TodoItem({todo, removeTodo}) {
	return <li>{todo.text} <button onClick={ () => {removeTodo(todo.id);} }>Remove</button></li>;
}

var TodoForm = React.createClass({
	_onSubmit: function (e) {
  	e.preventDefault();
    var text = this.refs.text.value;
    this.props.addTodo(text);
    this.refs.form.reset();
  },
  render: function () {
  	return (
    	<form onSubmit={this._onSubmit} ref='form'>
      	<input type='text' ref='text' />
        <input type='submit' value='Add Todo' />
      </form>
    );
  }
});

// Map state and dispatch to props
function mapStateToProps (state) {
	return {
  	todos: state
    };
}

function mapDispatchToProps (dispatch) {
	return Redux.bindActionCreators({
  	removeTodo: removeTodo,
    addTodo: addTodo
  }, dispatch);
 }
 
 //...