title: mapDispatchToProps function is undefined
body: <p>I am trying to get redux working in my react-native app. Basically, I have a signIn action defined in my authActions.js file:</p>
  
  <pre><code>const signInAction = () =&gt; {
      return {
          type: 'signIn',
      };
  };
  
  export { signInAction };
  </code></pre>
  
  <p>Then I have an authReducer defined as this in authReducer.js:</p>
  
  <pre><code>const initialState = {
      isAuthenticated: false,
  
  }
  
  const authReducer = (state = initialState, action) =&gt; {
  
      switch(action.type) {
  
          case "signIn": 
              return Object.assign({}, state, {
                  isAuthenticated: true,
  
              })
  
  
          default: return state;
      }
  
  };
  
  export default authReducer;
  </code></pre>
  
  <p>I combine that reducer in my rootReducer.js file</p>
  
  <pre><code>import { combineReducers } from 'redux';
  
  import auth from 'app/src/redux/reducers/authReducer.js';
  
  const rootReducer = combineReducers({
      auth,
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>and then created a store in reduxIndex.js:</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import thunkMiddleware from 'redux-thunk';
  import rootReducer from 'app/src/redux/reducers/rootReducer.js';
  
  let store = createStore(rootReducer, applyMiddleware(thunkMiddleware));
  export default store;
  </code></pre>
  
  <p>I wrapped my app in a <code>&lt;Provider&gt;</code> component, and that seems to be working fine (I can read from the state and see the value of isAuthenticated. However, when I try to dispatch an action using mapDispatchToProps in one of my views the function is undefined:</p>
  
  <pre><code>// More imports 
  // ... 
  
  import { connect } from 'react-redux';
  import { signInAction } from 'app/src/redux/actions/authActions.js';
  
  const mapStateToProps = (state) =&gt; {
    return {};
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      onSignIn: () =&gt; { dispatch(signInAction) },
    };
  }
  class SignIn extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        email: "",
        password: "",
      }
    }
  
    onSignInPress() {
      // ******* this is where the error occurrs ****
      this.props.onSignIn();
    }
  
    render() {
  
      const {navigation} = this.props;
  
      return (
  
              &lt;View style={SignInStyles.container}&gt;
                &lt;ScrollView&gt;
                  &lt;View&gt;
  
  
                    &lt;Button 
                      large 
                      title="SIGN IN"
                      backgroundColor={colors.primary}
                      onPress={this.onSignInPress}
                    /&gt;
                  &lt;/View&gt;
  
                &lt;/ScrollView&gt;
              &lt;/View&gt;
  
  
      );
  
    }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SignIn);
  </code></pre>
  
  <p>I cant really see where I am going wrong, but im sure its a simple mistake somewhere. The specific error I get is :</p>
  
  <p>"undefined is not an object. Evaluating this.props.onSignIn"</p>