title: Redux React Todo Application has no indication of error but doesn't work
body: <p>I'm following egghead.io Redux course by Dan.
  However I've no idea why my todo app is not working. It doesn't output any error and any warning, just doesn't work.</p>
  
  <p>Can you please give me some hint.</p>
  
  <p>This is my jsbin.
  <a href="https://jsbin.com/cozecip/33/edit?js,output" rel="nofollow noreferrer">https://jsbin.com/cozecip/33/edit?js,output</a></p>
  
  <pre><code>const todo = (state, action) =&gt; {
    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;
        }
  
        return {
          id: state.id,
          text: state.text,
          completed: !state.completed
        };
      default:
        return state;
    }
  };
  
  const todos = (state = [], action) =&gt; {
    switch (action.type) {
      case 'ADD_TODO':
        return [
          ...state,
          todo(undefined, action)
        ];
      case 'TOGGLE_TODO':
        return state.map(t =&gt;
          todo(t, action)
        );
      default:
        return state;
    }
  };
  
  const visibilityFilter = (state = 'SHOW_ALL', action) =&gt;
  {
    switch (action.type) {
      case 'SET_VISIBILITY_FILTER':
        return action.filter;
      default:
        return state;
    }
  };
  
  const { combineReducers } = Redux;
  
  const todoApp = combineReducers({
    todos,
    visibilityFilter
  });
  
  const { createStore } = Redux;
  const store = createStore(todoApp);
  
  const { Component } = React;
  
  const FilterLink = ({
      filter,
      currentFilter,
      children,
      onClick
  }) =&gt; {
      if (filter === currentFilter){
        return &lt;span&gt;{children}&lt;/span&gt;
      }
  
      return (
        &lt;a href="#" onClick ={onClick}&gt;{children}&lt;/a&gt;
      );
  };
  
  const Todo = ({
    onClick,
    completed,
    text
  }) =&gt; (
    &lt;li
      onClick={onClick}
      style={{
        textDecoration:
          completed ?
            'line-through' :
            'none'
      }}
    &gt;
      {text}
    &lt;/li&gt;
  );
  
  
  const TodoList = ({
    todos,
    onTodoClick
  }) =&gt; (
    &lt;ul&gt;
      {todos.map(todo =&gt;
        &lt;Todo
          key={todo.id}
          {...todo}
          onClick={() =&gt; onTodoClick(todo.id)}
        /&gt;
      )}
    &lt;/ul&gt;
  )
  
  const AddTodo = ({
    onAddClick
  }) =&gt; {
    let input;
  
    return (
      &lt;div&gt;
      &lt;input ref={node =&gt; {
         input = node;
      }} /&gt;
      &lt;button onClick={() =&gt; {
        onAddClick(input.value)
        input.value = '';
      }}&gt;
      Add Todo
      &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  const Footer = ({
    visibilityFilter,
    onFilterClick
  }) =&gt; (
          &lt;p&gt;
            Show:
            {' '}
            &lt;FilterLink
              filter='SHOW_ALL'
              currentFilter={visibilityFilter}
              onClick={onFilterClick}&gt;
                All
            &lt;/FilterLink&gt;
            {' '}
            &lt;FilterLink
              filter='SHOW_ACTIVE'
              currentFilter={visibilityFilter}
              onClick={onFilterClick}&gt;
              Active
            &lt;/FilterLink&gt;
            {' '}
            &lt;FilterLink
              filter='SHOW_COMPLETED'
              currentFilter={visibilityFilter}
              onClick={onFilterClick}&gt;
              Completed
            &lt;/FilterLink&gt;
          &lt;/p&gt;
  
  )
  
  const getVisibleTodos = (todos, filter) =&gt; {
    switch(filter){
      case 'SHOW_ALL':
        return todos;
      case 'SHOW_COMPLETED':
        return todos.filter(t =&gt; t.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(t =&gt; !t.completed);
      default:
        return todos;
    }
  }
  
  let nextTodoId = 0;
  const TodoApp = ({
    todos,
    visibilityFilter
  }) =&gt; {
    return (
    &lt;div&gt;
      &lt;AddTodo
        onAddClick={
          text =&gt;
            store.dispatch({
              type: 'ADD_TODO',
              text: this.input.value,
              id: nextTodoId++
             })
        }
      /&gt;
      &lt;TodoList
        todos={
          getVisibleTodos(
                 todos,
                 visibilityFilter
          )
        }
        onTodoClick={id =&gt;
          store.dispatch({
            type: 'TOGGLE_TODO',
            id
           })
        }
      /&gt;
      &lt;Footer
        visibilityFilter={visibilityFilter}
        onFilterClick={filter =&gt;
          store.dispatch({
            type: 'SET_VISIBILITY_FILTER',
            filter
          })
        }
      /&gt;
   &lt;/div&gt;
   );
  }
  
  const render = () =&gt; {
    ReactDOM.render(
      // Render the TodoApp Component to the &lt;div&gt; with id 'root'
      &lt;TodoApp
        {...store.getState()}
      /&gt;,
      document.getElementById('root')
    );
  };
  
  store.subscribe(render);
  render();
  </code></pre>