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 slym12

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

// Author: Harry Ganz
// Date: Aug. 12 2016
// Description: A very simple React-Redux application to create a todo list
// Libraries: React, React-DOM, Redux, React-Redux, babel-polyfill (for es6 syntax), lodash

// Reducer: Handles state transitions for the store
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>;
}






class TodoForm extends React.Component {
	constructor(props){
	super(props);
	console.log('c');
	}
	render() {
		console.log('r');
	return (<div></div>)
	}
}

function logProps(WrappedComponent) {
  return class extends WrappedComponent {

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}






// Map state and dispatch to props
function...