javascript - 在 Redux 中作為 mapToDispatchToProps() 參數時，'dispatch' 不是一個函數

我正在使用 redux、react-redux 和 react 建立一個小型應用程式。出於某種原因，當我將 mapDispatchToProps 函數與 connect（react-redux 的綁定）一起使用時，當我試圖執行所得到的 prop 時，會收到一個 TypeError，提示 dispatch 不是一個函數。然而，當我以 prop 的形式呼叫 dispatch（參見提供的程式碼中的 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

答案＃1

如果你想在沒有 mapStateToProps 的情況下使用 mapDispatchToProps，只需對第一個參數使用 null。

export default connect(null, mapDispatchToProps)(Start)

答案＃2

你只是缺少了 connect 的第一個參數，那就是 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)

答案＃3

使用

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

而不是

const StartContainer = connect(mapDispatchToProps)(Start)