'dispatch' non è una funzione quando argomento per mapToDispatchToProps() in Redux

Question

Sono un javascript/redux/react beginner che costruisce una piccola applicazione con redux, react-redux, & reagisce. Per qualche ragione quando si usa la funzione mapDispatchToProps in tandem con connect (react-redux binding), ricevo un TypeError che indica che il dispatch non è una funzione quando cerco di eseguire il prop risultante. Tuttavia, quando chiamo dispatch come puntello (vedi la funzione setAddr nel codice fornito) funziona.

Sono curioso di sapere perché questo è, nell'app TODO di esempio nei documenti di redux il metodo mapDispatchToProps è configurato allo stesso modo. Quando console.log (invio) all'interno della funzione dice che la spedizione è di tipo oggetto. Potrei continuare a utilizzare la spedizione in questo modo, ma mi sentirei meglio sapendo perché questo sta accadendo prima di continuare ulteriormente con redux. Sto usando webpack con babel-loader per compilare.

My Code:

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 

Cin cin.

Answer 1

Manca solo il primo argomento a connect, che è il metodo mapStateToProps. Estratto dal todo app 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) 

Answer 2

avevo bisogno di un esempio utilizzando React.Component così mi distacco che:

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); 

Answer 3

Se si desidera utilizzare mapDispatchToProps senza mapStateToProps basta usare null per il primo argomento.

export default connect(null, mapDispatchToProps)(Start)

Answer 4

Usa

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

invece di

const StartContainer = connect(mapDispatchToProps)(Start) 

Answer 5

ho risolto scambiando gli argomenti, stavo usando

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox) 

che è sbagliato. Il mapStateToProps deve essere il primo argomento:

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox) 

Sembra ovvio ora, ma potrebbe aiutare qualcuno.

Answer 6

Se non si forniscono mapDispatchToProps come secondo argomento, in questo modo:

export default connect(mapStateToProps)(Checkbox) 

quindi si stanno ottenendo automaticamente l'invio di oggetti di scena del componente, così puoi semplicemente:

class SomeComp extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    } 
    componentDidMount() { 
    this.props.dispatch(ACTION GOES HERE); 
    } 
.... 

senza alcuna mapDispatchToProps