Redux Example using React

A simple TODO application from Dan Abramov's tutorials. You can click on a TODO to mark it complete and vice versa. Note: You can also filter Completed/Incompleted/All TODOs.

by dingen2010

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<!-- Sample by @SheerPace170 -->
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="root"></div>

JavaScript 1.7

// Individual Reducer
const todoReducer = (state, action) => {
	switch(action.type) {
  	case 'ADD_TODO':
    	return {
          	id: action.id,
            text: action.text,
            completed: false
          };
    case 'TOGGLE_TODO':
    	if (state.id != action.id) return state;
          
      // This not working
      /*
      return {
        ...state,
        completed: !state.completed
      };
      */
      
      //This works
      return Object.assign({}, state, {
        completed: !state.completed
      });
      
      //This also works
      //var newState = {id: state.id, text: state.text, completed: !state.completed};
      //return newState;
    default:
    	return state;
  }
};

// Composed Reducer. That delegates to other reducers.
const todos = (state = [], action) => {
		switch(action.type) {
    	case 'ADD_TODO':
       return [
          ...state,
          todoReducer(null, action)
       ];
       case 'TOGGLE_TODO':
       	return state.map(t => todoReducer(t, action));
      default: 'SET_VISIBILITY_FILTER'
      debugger;
      	return state;
    }
};

// Reducer
const visibilityFilter = (state = 'SHOW_ALL', action) => {
	switch(action.type) {
  	case 'SET_VISIBILITY_FILTER':
    	return action.filter;
    default:
    	return state;
  }
};

const { combineReducers } = Redux;
const { createStore } = Redux;

//Combined Reducer
const todoApp = combineReducers({
	todos,
  visibilityFilter
})

//Store
const store = createStore(todoApp);

// Individual Reducer
const getVisibleTodosReducer = (todos, filter) => {
	switch(filter) {
  	case 'SHOW_ALL':
    	return todos;
    case 'SHOW_COMPLETED':
    	return todos.filter(t => t.completed);
    case 'SHOW_ACTIVE':
    	return todos.filter(t => !t.completed);
  }
};

const { Component } = React;
let nextTodoId = 0;
const TodoApp = React.createClass({
	render() {
  	const visibleTodos = getVisibleTodosReducer(
    	this.props.todos,
    	this.props.visibilityFilter
    );
    
  	return...