title: TypeError: undefined is not a function (evaluating dispatch)
body: <p>I am trying to combine React Redux with React Native, and I encountered this strange error while debugging the program:</p>
  
  <pre><code>TypeError: undefined is not a function (evaluating 'dispatch((0, _LoginActions.loginAction)(inputFormProp))')
  </code></pre>
  
  <p>The error is triggered in a login function from a component immediately after I run the program, and I don't know why I have it.</p>
  
  <p>Here is my component code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, View, TextInput, ActivityIndicator, TouchableHighlight } from 'react-native';
  import { getLogger, issueToText } from '../core/utils';
  import styles from '../core/styles';
  import { Card, Button, FormLabel, FormInput } from "react-native-elements";
  import { connect } from 'react-redux'
  import { loginAction } from '../actions/LoginActions'
  
  export class LoginComponent extends Component {
  constructor(props) {
      super(props);
      this.login = this.login.bind(this)
  }
  
  render() {
      const { error, isLoading } = this.props;
  
      const inputFormProp = {
          username: '',
          password: ''
      };
  
      return (
          &lt;View style={{ paddingVertical: 20 }}&gt;
              &lt;Card&gt;
                  &lt;FormLabel&gt;Email&lt;/FormLabel&gt;
                  &lt;FormInput value={inputFormProp.username} onChangeText={(text) =&gt; inputFormProp.username = text} /&gt;
                  &lt;FormLabel&gt;Password&lt;/FormLabel&gt;
                  &lt;FormInput value={inputFormProp.password} onChangeText={(text) =&gt; inputFormProp.password = text} /&gt;
  
                  &lt;Button
                      buttonStyle={{ marginTop: 20 }}
                      backgroundColor="#03A9F4"
                      title="SIGN IN"
                      onPress={this.login(inputFormProp)}
                  /&gt;
              &lt;/Card&gt;
              &lt;ActivityIndicator animating={this.props.isLoading} style={styles.activityIndicator} size="large" /&gt;
          &lt;/View&gt;
      );
  }
  
  
  login(inputFormProp) {
      const { store } = this.props.screenProps.store;
  
      const { dispatch } = this.props
  
      dispatch(loginAction(inputFormProp))
          .then(() =&gt; {
              if (this.props.error === null &amp;&amp; this.props.isLoading === false) {
                  if (store.getState().auth.token) {
                      this.props.navigation.navigate('ProductList', { token: store.getState().auth.token });
                  }
              }
          })
          .catch(error =&gt; {
          });
  }
  
  
  }
  
  function mapStateToProps(state) {
  const { error, isLoading } = state.auth
  
  return {
      error,
      isLoading,
  }
  }
  
  export default connect(mapStateToProps)(LoginComponent)
  </code></pre>
  
  <p>and here is my app.js code:</p>
  
  <pre><code>const initialState = {
    auth: { isLoading: false, error: null },
  };
  
  
  const rootReducer = combineReducers({ product: productReducer, auth: authReducer 
  });
  
  const store = createStore(rootReducer, initialState, applyMiddleware(thunk, 
  createLogger()));
  
  export const MyNavigator = StackNavigator({
    Login: { screen: LoginComponent },
    ProductList: { screen: ProductList },
  });
  
  
  
  export default class App extends Component {
    render() {
      return (
        &lt;MyNavigator screenProps={{ store: { store } }} /&gt;
      );
    }
  };
  </code></pre>
  
  <p>From what I've already searched about the error, it seems that the cause is the connect() function in my component, but I don't know what is wrong with it.</p>
  
  <p>Here is my directory structure:</p>
  
  <p><a href="https://i.stack.imgur.com/OIYzN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OIYzN.png" alt="enter image description here"></a></p>
  
  <p>Here is the LoginActions file:</p>
  
  <pre><code>import { loginService } from '../services/LoginService'
  
  export function loginAction(data) {
      return dispatch =&gt; {
          loginService(data);
      }
  }
  </code></pre>
  
  <p>Here is the LoginService file:</p>
  
  <pre><code>import { httpApiUrl } from '../core/api';
  import { getLogger } from "../core/utils";
  import { Alert } from 'react-native';
  const log = getLogger('auth/service');
  
  
  export const loginService = (user) =&gt; (dispatch) =&gt; {
  dispatch({ type: 'LOGIN_STARTED' });
  return fetch(`${httpApiUrl}/api/userdata/verify`, {
      method: 'POST',
      headers: {
          'Accept': '*/*',
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(user)
  })
      .then((response) =&gt; {
          if (!response.ok) {
              Alert.alert('ERROR', 'User or password is incorrect');
              dispatch({ type: 'LOGIN_FAILED', data: 'User or password is incorrect' });
          }
          else return response;
      }).then((response) =&gt; response.json).then((response) =&gt; {
          dispatch({ type: 'LOGIN_SUCCEEDED', data: response.json });
  
      })
      .catch(error =&gt; {
          dispatch({ type: 'LOGIN_FAILED', data: error.message });
      });
  };
  </code></pre>
  
  <p>Here is the output of this.props</p>
  
  <pre><code>21:10:48: Object {
  21:10:48:   "navigation": Object {
  21:10:48:     "dispatch": [Function anonymous],
  21:10:48:     "goBack": [Function goBack],
  21:10:48:     "navigate": [Function navigate],
  21:10:48:     "setParams": [Function setParams],
  21:10:48:     "state": Object {
  21:10:48:       "key": "Init-id-1515093047465-0",
  21:10:48:       "routeName": "Login",
  21:10:48:     },
  21:10:48:   },
  21:10:48:   "screenProps": Object {
  21:10:48:     "store": Object {
  21:10:48:       "store": Object {
  21:10:48:         "@@observable": [Function observable],
  21:10:48:         "dispatch": [Function anonymous],
  21:10:48:         "getState": [Function getState],
  21:10:48:         "replaceReducer": [Function replaceReducer],
  21:10:48:         "subscribe": [Function subscribe],
  21:10:48:       },
  21:10:48:     },
  21:10:48:   },
  21:10:48: }
  </code></pre>