title: React native w/ redux: dispatch is not a function
body: <p>I am trying to implement the following example in my project:
  <a href="https://github.com/reactjs/redux/tree/master/examples/async" rel="nofollow noreferrer">https://github.com/reactjs/redux/tree/master/examples/async</a></p>
  
  <p>But I keep running into the error: dispatch is not function
  when executing the dispatch function from my actions class.</p>
  
  <p>It seems as if Dispatcher is not getting passed down to my actions but I followed the flow in the example:</p>
  
  <p>actions/index.js file:</p>
  
  <pre><code>    export const REQUEST_LOCAL_POSTS = 'REQUEST_LOCAL_POSTS';
  export const RECEIVE_LOCAL_POSTS = 'RECEIVE_LOCAL_POSTS';
  export const REQUEST_CURRENT_LOCATION = 'REQUEST_CURRENT_LOCATION';
  export const RECEIVE_CURRENT_LOCATION = 'RECEIVE_CURRENT_LOCATION';
  
  
  export const requestCurrentLocation = () =&gt; ({
      type: REQUEST_CURRENT_LOCATION
  })
  
  export const receiveCurrentLocation = currentLocation =&gt; ({
      type: RECEIVE_CURRENT_LOCATION,
      currentLocation,
      receivedCurrentLocationAt: Date.now()
  })
  
  export const requestLocalPosts = () =&gt; ({
      type: REQUEST_LOCAL_POSTS
  })
  
  export const receiveLocalPosts = json =&gt; ({
      type: RECEIVE_LOCAL_POSTS,
      posts: json,
      receivedAt: Date.now() 
  })
  
  export const fetchLocalPosts = dispatch =&gt; {
      dispatch(requestCurrentLocation())
      navigator.geolocation.getCurrentPosition(
        (position) =&gt; {
           dispatch(requestLocalPosts()) // getting dispatch is not a function here
          return fetch(`http://192.168.1.3:9000/posts?lng=${position.coords.longitude}&amp;lat=${position.coords.latitude}&amp;radius=1000`)
      .then(response =&gt; response.json())
      .then(json =&gt; dispatch(receiveLocalPosts(json)))
  
        },
        (error) =&gt; this.setState({ error: error.message }),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
      )
  </code></pre>
  
  <p>home.js (component):</p>
  
  <pre><code>import React, { Component } from 'react';
  import {Text, View, ActivityIndicator, FlatList, Image, TouchableHighlight} from 'react-native';
  import styles from './styles';
  import MapView from 'react-native-maps';
  import images from '../../config/images';
  import PropTypes from 'prop-types'
  import { connect } from 'react-redux'
  import { fetchLocalPosts } from '../../actions'
  
  
   class Home extends Component {
  
      static navigationOptions = ({ navigation }) =&gt; {
  //const {dispatch , state, setParams} = navigation;
  
    return {
      title:&lt;Text style={styles.title}&gt;Localized&lt;/Text&gt;,
      headerStyle: {backgroundColor: '#2c6da4'},
      headerRight: (
        &lt;TouchableHighlight onPress={() =&gt; navigation.dispatch({ type: 'MAP_EXPLORE' })}&gt;
    &lt;Image
          source={images.icons.map}
        /&gt;
      &lt;/TouchableHighlight&gt;
  
      ),
    };
  };
  
  static propTypes = {
      posts: PropTypes.array.isRequired,
      isFetching: PropTypes.bool.isRequired,
      lastUpdated: PropTypes.number,
      dispatch: PropTypes.func.isRequired
    }
  
  
  
  
      componentDidMount() {
          console.log(this.props)
          const { dispatch } = this.props
          dispatch(fetchLocalPosts()) // calling action from here
      }
  
  
  
      render() {
  
  
          return (
  
              &lt;View style={styles.container}&gt;
  
                   // i know posts isnt accessed here yet, still trying 
                   to get past error
                  &lt;FlatList
                      data={this.state.data}
                      refreshing={this.state.refreshing}
                      showsVerticalScrollIndicator={false}
                      ListHeaderComponent={this.renderHeader}
                      onRefresh={this._onRefresh.bind(this)}
  
                      renderItem={({item}) =&gt; &lt;View&gt;&lt;FlatList
                          data={item.posts}
                          horizontal={true}
                          snapToAlignment='center'
                          showsHorizontalScrollIndicator={false}
                          renderItem={({item}) =&gt; &lt;Text style={styles.item}&gt;{item.title}{"\n"}{item.snippet}&lt;/Text&gt;}/&gt;
                          &lt;Text style={styles.subItem}&gt;{item.Name}{"\n"}{item.Address}&lt;/Text&gt;
                      &lt;/View&gt;}
  
                  /&gt;
  
              &lt;/View&gt;
  
          );
      }
  
  
  }
  
  const mapStateToProps = state =&gt; {
    const { postsByBusiness } = state
    const {
      isFetching,
      lastUpdated,
      items: posts
    } = postsByBusiness || {
      isFetching: true,
      items: []
    }
  
    return {
      posts,
      isFetching,
      lastUpdated
    }
  }
  
  export default connect(mapStateToProps)(Home)
  </code></pre>
  
  <p>reducer/index.js:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { NavigationActions } from 'react-navigation';
  
  import { AppNavigator } from '../navigators/AppNavigator';
  
  import { RECEIVE_LOCAL_POSTS, REQUEST_LOCAL_POSTS } from '../actions';
  
  
  const initialNavState=AppNavigator.router.getStateForAction(NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: 'Home',
        }),
      ],
  }));
  
  
  
  const MAP_EXPLORE = 'MAP_EXPLORE';
  const LIST_EXPLORE = 'LIST_EXPLORE';
  
  
  function nav(state = initialNavState, action) {
      let nextState;
      switch(action.type) {
          case MAP_EXPLORE:
          nextState = AppNavigator.router.getStateForAction(
              NavigationActions.navigate({ routeName: 'Map'}),
              state
              );
          break;
          case LIST_EXPLORE:
          nextState = AppNavigator.router.getStateForAction(
              NavigationActions.navigate({ routeName: 'List'}),
              state
              );
          break;
          default:
              nextState = AppNavigator.router.getStateForAction(action, state);
              break;
      }
      return nextState || state;
  
  }
  
  
  function postsByBusiness(state = { }, action) {
      switch(action.type) {
          case RECEIVE_LOCAL_POSTS:
          return {
              ...state,
              isFetching: false,
          didInvalidate: false,
          items: action.posts,
          lastUpdated: action.receivedAts
          }
          default:
          return state
      }
  }
  
  
  
  
  const AppReducer = combineReducers({
    nav,
    postsByBusiness
  
  });
  
  export default AppReducer;
  </code></pre>