CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxdispatch
Ray Jonathan
Ray Jonathan

Reputation: 1355

dispatch is not a function error

So I've made sure that I connect my mapDispatchToProps properly and have bound the functions (I think) properly and also made sure there's no typo.

But for some reason the following code giving me dispatch is not a function error:

import React from 'react';
import {View, Button} from 'react-native';
import { DrawerNavigator, DrawerItems } from 'react-navigation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import aboutScreen from './About';
import settingScreen from './Setting';
import Home from './Home';
import Login from '../../auth/scenes/Login';
import * as authAction from '../../auth/actions';
import * as homeAction from '../actions';

export const mapDispatchToProps = (dispatch) => ({
  actionsHome: bindActionCreators(homeAction, dispatch),
  actionsAuth: bindActionCreators(authAction, dispatch)
});

const CustomDrawerContentComponent = (props) => (
  <View>
     <DrawerItems {...props}/>
     <Button title="Logout" onPress={()=>props.screenProps()}/>
  </View>
);

const Drawer = DrawerNavigator({
    Home: {
      screen: Home
    },
    About: {
      screen: aboutScreen
    },
    Setting:{
      screen: settingScreen
    },
  },
  {
    initialRouteName: 'Home',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);

class DrawNav extends React.Component{  
  constructor(){
    super();
    this.onSignOut = this.onSignOut.bind(this);
  }

  onSuccess() {
    this.props.actionsHome.successSignOut();
    Actions.reset("Auth");
  }

  onError(error) {
    Alert.alert('Oops!', error.message);
  }

  onSignOut() {
    this.props.actionsAuth.signOut(this.onSuccess.bind(this),this.onError.bind(this))
  }

  render(){
      return <Drawer screenProps = {this.onSignOut}/>;  
  }
}

export default connect(mapDispatchToProps) (DrawNav);

I tried similar setup on my Home component and it worked. This is just pretty much a copy n paste from the Home logout schematics because I need a logout button on my drawer instead of Home.

Can anyone help me point out what did I miss here?

Thanks in advance! :)

Upvotes: 1

Views: 181

Answers (1)

themollusk
themollusk

Reputation: 440

Try: export default connect(null, mapDispatchToProps) (DrawNav);

mapDispatchToProps should be the second argument to your connect method.

The parameter provided to the first function argument in connect will be state, and the second argument function will be given dispatch

In your example, because your mapDispatchToProps is the first argument in connect, it is receiving state as it's argument. Then your bindActionCreators will try and invoke it as a function which is what's throwing your error.

Upvotes: 1

Related Questions