Redux中mapToDispatchToProps()的参数时,“dispatch”不是函数

我是一个javascript / redux /反应初学者构build一个小应用程序与redux,react-redux,和反应。 出于某种原因,当使用mapDispatchToProps函数与connect(react-redux绑定)结合使用时,我收到一个TypeError,指示当我尝试执行生成的prop时dispatch不是函数。 当我调用dispatch作为道具时(参见提供的代码中的setAddr函数)。

我很好奇这是为什么,在Reduce文档的示例TODO应用程序中,mapDispatchToProps方法是以相同的方式设置的。 当我在console.log(调度)函数里面说调度是types对象。 我可以继续使用dispatch这种方式,但我会更好地知道为什么会发生这种情况,然后再继续使用redux。 我正在使用webpack与babel-loaders进行编译。

我的代码:

import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, dropoff: this.refs.dropoff.state.address }) ) }, render: function() { return ( <div> <div className="row"> <div className="col-xs-6"> <GeoCode ref='pickup' /> </div> <div className="col-xs-6"> <GeoCode ref='dropoff' /> </div> </div> <div className="row"> <div className="col-xs-6"> <FlatButton label='Does Not Work' onClick={this.props.onSubmit({ pickup: this.refs.pickup.state.address, dropoff: this.refs.dropoff.state.address })} /> </div> <div className="col-xs-6"> <FlatButton label='Works' onClick={this.setAddr} /> </div> </div> </div> ); } }) const mapDispatchToProps = (dispatch) => { return { onSubmit: (data) => { dispatch(setAddresses(data)) } } } const StartContainer = connect(mapDispatchToProps)(Start) export default StartContainer 

干杯。

你只是缺lessconnect的第一个参数,这是mapStateToProps方法。 摘录从Redux的待办事项应用程序:

 const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) 

如果要使用mapDispatchToProps而不使用mapDispatchToPropsmapStateToProps只需使用null作为第一个参数。

export default connect(null, mapDispatchToProps)(Start)

使用

 const StartContainer = connect(null, mapDispatchToProps)(Start) 

代替

 const StartContainer = connect(mapDispatchToProps)(Start) 

我需要一个使用React.Component的例子,所以我张贴它:

 import React from 'react'; import * as Redux from 'react-redux'; class NavigationHeader extends React.Component { } const mapStateToProps = function (store) { console.log(`mapStateToProps ${store}`); return { navigation: store.navigation }; }; export default Redux.connect(mapStateToProps)(NavigationHeader); 

我通过互换参数来解决问题,我正在使用

 export default connect(mapDispatchToProps, mapStateToProps)(Checkbox) 

这是错误的。 mapStateToProps必须是第一个参数:

 export default connect(mapStateToProps, mapDispatchToProps)(Checkbox) 

这听起来很明显,但可能有助于某人。