Je suis un débutant javascript / redux / react qui crée une petite application avec redux, react-redux et react. Pour une raison quelconque, lors de l'utilisation de la fonction mapDispatchToProps en tandem avec connect (liaison react-redux), je reçois un TypeError indiquant que la répartition n'est pas une fonction lorsque j'essaie d'exécuter le prop résultant. Cependant, quand j'appelle dispatch comme accessoire (voir la fonction setAddr dans le code fourni), cela fonctionne.
Je suis curieux de savoir pourquoi, dans l'exemple d'application TODO dans la documentation redux, la méthode mapDispatchToProps est configurée de la même manière. Quand je console.log (dispatch) à l'intérieur de la fonction, il dit que la répartition est un objet de type. Je pourrais continuer à utiliser la répartition de cette façon, mais je me sentirais mieux de savoir pourquoi cela se produit avant de continuer avec redux. J'utilise webpack avec des chargeurs babel pour compiler.
Mon 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
À votre santé.