dispatch is not a function 错误

Question

所以我确保我 connect 我的 mapDispatchToProps 正确并正确绑定了函数（我认为）并且确保没有错字。

但出于某种原因，以下代码给我的 dispatch is not a function 错误：

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);

我在我的 Home 组件上尝试了类似的设置并且它起作用了。这几乎是 Home 注销示意图中的复制粘贴，因为我的抽屉上需要一个注销按钮而不是 Home。

谁能帮我指出我错过了什么？

提前致谢！ :)

Answer 1

尝试： export default connect(null, mapDispatchToProps) (DrawNav);

mapDispatchToProps 应该是 connect 方法的第二个参数。

connect中第一个函数参数提供的参数将是state，第二个参数函数将被赋予dispatch

在您的示例中，因为您的 mapDispatchToProps 是 connect 中的第一个参数，它接收 state 作为参数。然后你的 bindActionCreators 将尝试将它作为一个函数调用它，这就是引发错误的原因。

dispatch is not a function 错误

dispatch is not a function error

dispatch

reactjs

react-native

redux

react-redux