title: How to debug action.type issue with react-redux, single action type single reducer but it's not recognizing the type
body: <p>I am setting up an extremely simple react-redux app, I only have one action type at the moment, and one reducer, so it's not an issue with using switch or combine reducers because there is only one option. In my reducer I have a boolean statement saying</p>
  
  <p><code>if(action.type === ADD_ITEM)</code> then return (reducer code) </p>
  
  <p>that reducer function is then called in my store. When I was testing my app the state was not updating, and through adding some console.logs to see where the problem is I realized that the reducer code is not being called because <code>action.type === ADD_ITEM</code> is returning as false. </p>
  
  <p>I tried console logging the action.type but I just got the default <code>{type: @@redux/INITp.m.x.p.a.c}</code> which doesn't tell me much about why it's not reading the action.type as ADD_ITEM. </p>
  
  <p>Btw: The action type is passed in <code>import { ADD_ITEM } from "../constants/action-types";</code> and action-types contains this <code>export const ADD_ITEM = "ADD_ITEM";</code> because I prefer using constants to strings for this. </p>
  
  <p>I know action.type is not being called as "ADD_ITEM" but I don't know why and I'm running out of places to check. I've looked through the other questions similar to this on stack overflow but they all involved using switch for multiple action types, or using combine reducers, or having action.type as undefined. I only have one action and one reducer, and action.type is not coming back as undefined it's just not coming back as the action type that I set up to call the reducer function. Also, This is my first time using redux so please be kind.</p>
  
  <p>action:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { ADD_ITEM } from "../constants/action-types";
  
  export function addArticle(payload){
      return { type: ADD_ITEM, payload };
  };
  </code></pre>
  
  <p>action-types.js : <code>export const ADD_ITEM = "ADD_ITEM";</code></p>
  
  <p>reducer: </p>
  
  <pre class="lang-js prettyprint-override"><code>import { ADD_ITEM } from "../constants/action-types";
  
  const initialState = {
      articles: []
  };
  
  function rootReducer(state = initialState, action){
      if(action.type === ADD_ITEM){
          console.log("yes");
          return Object.assign({}, state, {
              articles: state.articles.concat(action.payload)
          });
      }
      console.log("no");
      return state;
  };
  
  export default rootReducer; 
  </code></pre>
  
  <p>store: </p>
  
  <pre class="lang-js prettyprint-override"><code>
  import { createStore } from "redux";
  import rootReducer from '../reducers/index';
  
  const store = createStore(rootReducer);
  
  export default store;
  
  </code></pre>
  
  <p>form component that should be updating and calling dispatch with the article titles from the form input:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import uuidv1 from "uuid";
  import { addArticle } from "../actions/index";
  
  function mapDispatchToProps(dispatch){
      return {
          addArticle: article =&gt; dispatch(addArticle(article))
      };
  }
  
  class ConnectedForm extends Component {
      constructor() {
          super();
  
          this.state = {
              title: ""
          };
  
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleChange.bind(this);
      }
  
      handleChange(event) {
          this.setState({ [event.target.id]: event.target.value });
      }
  
      handleSubmit(event) {
          event.preventDefault();
          const { title } = this.state;
          const id = uuidv1();
          this.props.addArticle({ title, id });
          this.setState({ title: "" });
      }
  
      render() {
          const { title } = this.state;
  
          return (
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;div className="form-group"&gt;
                  &lt;label htmlFor="title"&gt;Title&lt;/label&gt;
                  &lt;input
                      type="text"
                      className="form-control"
                      id="title"
                      value={title}
                      onChange={this.handleChange}
                  /&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" className="btn btn-success"&gt;
                  SAVE
                  &lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  const Form = connect(null, mapDispatchToProps)(ConnectedForm);
  
  export default Form;
  </code></pre>
  
  <p>the list where added articles should render:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { connect } from "react-redux";
  
  const mapStateToProps = state =&gt; {
      return { articles: state.articles };
  };
  
  const ConnectedList = ({ articles }) =&gt; (
      &lt;ul className="list-group list-group-flush"&gt;
      {articles.map(el =&gt; (
          &lt;li className="list-group-item" key={el.id}&gt;
          {el.title}
          &lt;/li&gt;
      ))}
      &lt;/ul&gt;
  );
  
  const List = connect(mapStateToProps)(ConnectedList);
  
  export default List;
  
  </code></pre>
  
  <p>index.js where I set the provider:</p>
  
  <pre class="lang-js prettyprint-override"><code>
  import React from 'react';
  import { render } from 'react-dom';
  import { Provider } from 'react-redux';
  import store from "./store/index";
  import App from './components/App.jsx';
  
  render(
  &lt;Provider store={store}&gt;
  &lt;App /&gt;
  &lt;/Provider&gt;
  , document.getElementById('root')
  );
  
  </code></pre>
  
  <p>the app where it comes together:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import List from "./List";
  import Form from "./Form";
  
  class App extends Component {
    render() {
      return (
        &lt;div className="row mt-5"&gt;
          &lt;div className="col-md-4 offset-md-1"&gt;
          &lt;h2&gt;Article List&lt;/h2&gt;
          &lt;List /&gt;
          &lt;/div&gt; 
          &lt;div className="col-md-4 offset-md-1"&gt;
          &lt;h2&gt;Add a new article&lt;/h2&gt;
          &lt;Form /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  
  <p>I am expecting that when I input a title and submit the form it should call dispatch with that new 'article' add it to the state and then print it as part of the list component. </p>
  
  <p>But, the part of the reducer that actually adds the new input onto the initial state is not running because <code>action.type === ADD_ITEM</code> is returning as false. </p>
  
  <p>Note: When I run this just in the console from a testing.js file with this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import store from "../js/store/index";
  import { addArticle } from "../js/actions/index";
  window.store = store;
  window.addArticle = addArticle;
  </code></pre>
  
  <p>I can run store.getState() in the console and it will return the empty array, then I can run something like </p>
  
  <p><code>store.dispatch( addArticle({ title: 'What is happening?', id: 1 }) )</code></p>
  
  <p>and it will add that to the array.</p>
  
  <p>So that logic is working, but I think because when I'm running it with the form component and not directly calling store.dispatch it's relying on that <code>action.type === ADD_ITEM</code> statement so none of the other logic is actually being called.</p>
  
  <p>I just have no idea why the action.type is not being read as ADD_ITEM since in my action.js file I define the addArticle function with the type <code>ADD_ITEM</code></p>
  
  <p>any help would be appreciated</p>
  
  <p>EDIT: </p>
  
  <p>I forgot to mention, in the reducer if I <code>console.log(addArticle())</code> it returns this </p>
  
  <pre><code>{type: "ADD_ARTICLE", payload: undefined}
  payload: undefined
  type: "ADD_ARTICLE"
  __proto__: Object
  </code></pre>
  
  <p>so addArticle() does have the type "ADD_ARTICLE" but the action I'm passing to rootReducer does not.. </p>