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而不使用mapDispatchToProps ， mapStateToProps只需使用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)
这听起来很明显，但可能有助于某人。
