[解決済み] ReduxのmapToDispatchToProps()の引数で「dispatch」が関数でない件

質問

私はjavascript/redux/reactの初心者で、redux, react-redux, & reactを使って小さなアプリケーションを作成しています。コネクト（react-reduxバインディング）と一緒にmapDispatchToProps関数を使用すると、結果のプロップを実行しようとすると、なぜかディスパッチが関数でないことを示すTypeErrorが表示されます。しかし、dispatchをpropとして呼び出すと（提供されたコードのsetAddr関数を参照）、それは動作します。

reduxのドキュメントにあるTODOアプリの例では、mapDispatchToPropsメソッドは同じようにセットアップされています。関数内で console.log(dispatch) を実行すると、dispatch はオブジェクト型であると表示されます。この方法で 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

乾杯

解決方法は？

を使用する場合 mapDispatchToProps を使わずに mapStateToProps を使うだけです。 null を第一引数に指定します。

export default connect(null, mapDispatchToProps)(Start)