title: TypeError: Object(...) is not a function in react redux
body: <p>I have a form article where I dispatch actions</p>
  
  <p>components/form.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import uuidvl from 'uuid';
  import { addArticle } from '../actions/index';
  const mapDispatchtoProps = dispatch =&gt; {
      return {
          addArticle: article =&gt; dispatch(addArticle(article))
      };
  };
  class ConnectedForm extends Component {
      constructor() {
          super();
          this.state = {
              title: ''
          }
      }
      handleChange(eVal, nm) {
          this.setState({ "title": eVal })
      }
      handleSubmit(ev) {
          ev.preventDefault();
          const { title } = this.state;
          const id = uuidvl();
          this.props.addArticle({ title, id });
          this.setState({ title: '' });
      }
      render() {
          const { title } = this.state;
          return (
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
                      &lt;input type='text' value={title} id="title" onChange={(e) =&gt; this.handleChange(e.target.value, 'article')} /&gt;
                      &lt;button type="submit"&gt;Add&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  const Form = connect(null, mapDispatchtoProps)(ConnectedForm);
  export default Form;
  </code></pre>
  
  <p>js/actions/index.js</p>
  
  <pre><code>import { ADD_ARTICLE } from "../constants/action-types";
  export const addArticle = article =&gt; ({ type: ADD_ARTICLE, payload: article });
  </code></pre>
  
  <p>When I click on add I get the following error</p>
  
  <pre><code>TypeError: Object(...) is not a function
  </code></pre>
  
  <p>these lines are highlighted</p>
  
  <pre><code>addArticle:article =&gt;dispatch(addArticle(article))
  this.props.addArticle({ title , id });
  </code></pre>
  
  <p>stacktrace</p>
  
  <pre><code>                 TypeError: Object(...) is not a function
                  addArticle
                  E:/reacr-redux/src/components/Form.js:7
                  4 | import { addArticle } from '../actions/index';
                  5 | const mapDispatchtoProps= dispatch=&gt;{
                  6 |     return{
                  &gt;  7 |         addArticle:article =&gt;dispatch(addArticle(article))
                      | ^   8 |     };
                  9 | };
                  10 | class ConnectedForm extends Component{
                  View compiled
                  ConnectedForm.handleSubmit
                  E:/reacr-redux/src/components/Form.js:24
                  21 |     ev.preventDefault();
                  22 |     const { title }=this.state;
                  23 |     const id = uuidvl();
                  &gt; 24 |     this.props.addArticle({ title , id });
                      | ^  25 |     this.setState({title:''});
                  26 | }                
                  27 | render(){
                  View compiled
                  ▶ 18 stack frames were collapsed.
                  This screen is visible only in development. It will not appear if the app crashes in production.
                  Open your browser’s developer console to further inspect this error.
  </code></pre>
  
  <p>reducers/index.js</p>
  
  <pre><code>                import { ADD_ARTICLE } from "../constants/action-types";
              const initialState={
                  articles:[]
              };
              const rootReducer= ( state = initialState ,  action ) =&gt; {
                  switch(action.type){
                      case ADD_ARTICLE:        
                      return {...state,articles:[...state.articles,action.payload]};
                      default :
                      return state;
                  }
              };
              export default rootReducer;
  </code></pre>
  
  <p>store/index.js</p>
  
  <pre><code>                import { createStore } from "redux";
              import rootReducer from "../reducers/index";
              const store=createStore(rootReducer);
              export default store;
  </code></pre>
  
  <p>components/list.js</p>
  
  <pre><code>                import React from 'react';
              import { connect } from 'react-redux';
  
              const mapStateToProps=  state =&gt;{
                  return { articles :state.articles};
              }
              const connectedList = ({ articles }) =&gt;(
                  articles.map(e=&gt;(
                      &lt;li key={e.id}&gt;{e.title}&lt;/li&gt;
                  ))
              );
              const List= connect(mapStateToProps)(connectedList);
              export default List;
  </code></pre>
  
  <p><strong>Action is not a function but const</strong> is that the issue that <strong>actions must always be functions</strong> to work?</p>
  
  <p>Can anyone lemme know where I'm going wrong?</p>