title: React Redux cant get reducer to pick up actions
body: <p>I've been learning redux &amp; react and am building a todo list. I've been reading and looking at different articles but cant figure out what I'm missing in my setup.</p>
  
  <p>Currently you can add a todo via the input. On pushing enter it sends a <code>addTodo</code> action with the todo text.</p>
  
  <p>I'm expecting the reducer to see the action type and update the state but it never does. What am I missing?</p>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { createStore } from 'redux';
  import { Provider } from 'react-redux';
  import reducer from './reducer.js';
  import TodoList from './containers/container.js';
  
  const store = createStore(reducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;TodoList /&gt;
    &lt;/Provider&gt;,
  document.getElementById('app'));
  </code></pre>
  
  <p><strong>actions.js</strong></p>
  
  <pre><code>var uuid = require('node-uuid');
  
  export function addTodo(text) {
    console.log('action addTodo', text);
    return {
      type: 'ADD_TODO',
      payload: {
        id: uuid.v4(),
        text: text
      }
    };
  }
  </code></pre>
  
  <p><strong>TodoListComponent.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import TodoComponent from './TodoComponent.jsx';
  import { addTodo } from '../actions/actions.js'
  
  export default class TodoList extends React.Component {
  
    render () {
      const { todos } = this.props;
  
      return (
        &lt;div&gt;
          &lt;input type='text' placeholder='Add todo' onKeyDown={this.onSubmit} /&gt;
          &lt;ul&gt;
            {todos.map(c =&gt; (
              &lt;li key={t.id}&gt;
                &lt;TodoComponent todo={t} styleName='large' /&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  
    onSubmit(e) {
      const input = e.target;
      const text = input.value;
      const isEnterKey = (e.which === 13);
  
      if (isEnterKey) {
        input.value = '';
        addTodo(text);
      }
    }
  
  }
  </code></pre>
  
  <p><strong>TodoComponent.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import CSSModules from 'react-css-modules';
  import styles from './style.css';
  
  export default class TodoComponent extends React.Component {
  
    render () {
      const { todo } = this.props;
  
      return (
        &lt;div styleName='large'&gt;{todo.text}&lt;/div&gt;
      )
    }
  }
  
  export default CSSModules(TodoComponent, styles);
  </code></pre>
  
  <p><strong>container.js</strong></p>
  
  <pre><code>import { connect } from 'react-redux';
  import TodoList from '../components/TodoListComponent.jsx';
  import { addTodo } from '../actions/actions.js';
  
  const mapStateToProps = (state) =&gt; {
     return {
        todos: state
     }
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
     return {
        addTodo: text =&gt; dispatch(addTodo(text))
     }
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>import { List, Map } from 'immutable';
  
  const init = List([]);
  
  export default function(todos = init, action) {
  
    console.log('reducer action type', action.type);
  
    switch(action.type) {
      case 'ADD_TODO':
        console.log('ADD_TODO');
        return todos.push(Map(action.payload));
      default:
        return todos;
    }
  }
  </code></pre>