Sono un principiante di javascript / redux / react che costruisce una piccola applicazione con redux, react-redux e react. Per qualche motivo, quando utilizzo la funzione mapDispatchToProps in tandem con connect (binding react-redux) ricevo un TypeError che indica che l'invio non è una funzione quando provo a eseguire il prop risultante. Tuttavia, quando chiamo dispatch come prop (vedi la funzione setAddr nel codice fornito) funziona.
Sono curioso di sapere perché questo è, nell'esempio app TODO nei documenti redux il metodo mapDispatchToProps è impostato allo stesso modo. Quando console.log (invio) all'interno della funzione si dice che l'invio è di tipo oggetto. Potrei continuare a usare il dispatch in questo modo, ma mi sentirei meglio sapendo perché questo sta accadendo prima di continuare ulteriormente con il redux. Sto usando webpack con babel-loader per compilare.
Il mio codice:
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
Saluti.