在Redux中mapToDispatchToProps()的参数时,'dispatch'不是函数

Question

我是一个javascript/redux/react初学者用redux,react-redux和react做一个小应用程序.出于某种原因,当使用mapDispatchToProps函数与connect(react-redux binding)串联时,我收到一个TypeError,指示当我尝试执行生成的prop时,dispatch不是函数.当我将调度调用为prop时(参见提供的代码中的setAddr函数)它可以工作.

我很好奇为什么会这样,在redux文档中的示例TODO应用程序中,mapDispatchToProps方法的设置方式相同.当我在函数内部调试console.log(dispatch)时,它表示dispatch是type对象.我可以继续以这种方式使用调度,但在我继续使用redux之前,我会更好地了解为什么会发生这种情况.我正在使用带有babel-loaders的webpack进行编译.

我的代码:

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

干杯.

Answer 1

如果你想在mapDispatchToProps不mapStateToProps使用null第一个参数的情况下使用它.

export default connect(null, mapDispatchToProps)(Start)

Answer 2

你只是缺少第一个参数connect,这是mapStateToProps方法.摘自Redux todo应用程序:

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)

Answer 3

使用

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

代替

const StartContainer = connect(mapDispatchToProps)(Start)

Answer 4

我通过交换参数解决了它

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)

这是错误的。在mapStateToProps有可能成为第一个参数：

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)

现在听起来很明显，但可能会对某人有所帮助。