title: Redux - reducer not getting called
body: <p>I'm trying to learn Redux. I followed an online tutorial and used their example and it worked fine. Then I made another small test app and it worked fine. Now I'm trying another small test app and I'm stuck on this error and have no idea why.</p>
  
  <p>The app is simply a input box and a button, and when you click the button it adds whatever's in the box to a list that is displayed below.</p>
  
  <p>However, the reducer isn't updating the state. I've looked at the common problems that cause this and can't seem to find those errors in mine, my reducer doesn't change the state and I've bound the dispatch and so on. Maybe I've just mispelled something somewhere (or something small and stupid like that) but I just can't get it working. </p>
  
  <p>So I tried to change it so that it just displays whatever you type in the box below and it STILL doesn't work. Anyone know why the reducer isn't activating?</p>
  
  <p><strong>index.js</strong> (main)</p>
  
  <pre class="lang-js prettyprint-override"><code>import 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import {Provider} from 'react-redux';
  import {createStore, applyMiddleware} from 'redux';
  import thunk from 'redux-thunk';
  import promise from 'redux-promise';
  import createLogger from 'redux-logger';
  import allReducers from './reducers';
  import App from './components/App';
  
  const logger = createLogger();
  const store = createStore(
      allReducers,
      applyMiddleware(thunk, promise, logger)
  );
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import NameList from '../containers/name-list.js'
  import Input from '../containers/input.js'
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;Input /&gt;
      &lt;hr /&gt;
      &lt;NameList /&gt;
    &lt;/div&gt;
  );
  
  export default App;
  </code></pre>
  
  <p><strong>index.js</strong> (action)</p>
  
  <pre class="lang-js prettyprint-override"><code>export const addName = (name) =&gt; {
      return {
          type: 'NAME_ADDED',
          payload: name
      }
  };
  </code></pre>
  
  <p><strong>reducer-add-name.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default function (state = null, action) {
      switch (action.type) {
          case 'NAME_ADDED':
              return action.payload;
              break;
      }
      return state;
  }
  </code></pre>
  
  <p><strong>index.js</strong> (reducer combiner)</p>
  
  <pre class="lang-js prettyprint-override"><code>import {combineReducers} from 'redux';
  import AddNameReducer from './reducer-add-name';
  
  
  const allReducers = combineReducers({
      nameList: AddNameReducer
  });
  
  export default allReducers
  </code></pre>
  
  <p><strong>input.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import {addName} from '../actions/index'
  
  class Input extends Component {
    render() {
      return(
        &lt;div&gt;
          &lt;input id='name-input' /&gt;
          &lt;button id='add-name-button' onClick={() =&gt; addName(document.getElementById('name-input').value)}&gt;Add name&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      nameList: state.nameList
    };
  }
  
  function matchDispatchToProps(dispatch) {
    return bindActionCreators({addName: addName}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(Input);
  </code></pre>
  
  <p><strong>name-list.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  
  class NameList extends Component {
  
    getNameList() {
      //This is where I'll loop through this.props.nameList and build the list of elements
      return this.props.nameList;
    }
  
    render() {
      return(
        &lt;div&gt;Current list : {this.getNameList()}&lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      nameList: state.nameList
    };
  }
  
  export default connect(mapStateToProps)(NameList);
  </code></pre>
  
  <p>Thanks for any help!</p>