“dispatch” n’est pas une fonction quand argument à mapToDispatchToProps () dans Redux

Je suis un débutant javascript / redux / react en construisant une petite application avec redux, react-redux, et réagis. Pour une raison quelconque, lorsque j’utilise la fonction mapDispatchToProps en tandem avec connect (binding rea-redux), je reçois une erreur de type indiquant que la dissortingbution n’est pas une fonction lorsque j’essaie d’exécuter le prop résultant. Lorsque 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 les documents redux, la méthode mapDispatchToProps est configurée de la même manière. Lorsque je console.log (dispatch) à l’intérieur de la fonction, il est dit que dispatch est type object. Je pourrais continuer à utiliser le dispatching de cette manière mais je me sentirais mieux en sachant pourquoi cela se produit avant de continuer avec le redux. J’utilise webpack avec babel-loaders pour comstackr.

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 ( 
); } }) const mapDispatchToProps = (dispatch) => { return { onSubmit: (data) => { dispatch(setAddresses(data)) } } } const StartContainer = connect(mapDispatchToProps)(Start) export default StartContainer

À votre santé.

Vous mapStateToProps simplement le premier argument à connect , qui est la méthode mapStateToProps . Extrait de l’application Redux todo:

 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) 

Si vous voulez utiliser mapDispatchToProps sans mapStateToProps utilisez simplement null pour le premier argument.

export default connect(null, mapDispatchToProps)(Start)

Utilisation

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

au lieu de

 const StartContainer = connect(mapDispatchToProps)(Start) 

J’avais besoin d’un exemple en utilisant React.Component pour le poster:

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

Je l’ai résolu en échangeant les arguments, j’utilisais

 export default connect(mapDispatchToProps, mapStateToProps)(Checkbox) 

ce qui est faux. Le mapStateToProps doit être le premier argument:

 export default connect(mapStateToProps, mapDispatchToProps)(Checkbox) 

Cela semble évident maintenant, mais pourrait aider quelqu’un.

Lorsque vous ne fournissez pas mapDispatchToProps comme deuxième argument, comme ceci:

 export default connect(mapStateToProps)(Checkbox) 

alors vous envoyez automatiquement l’envoi aux accessoires du composant, vous pouvez donc simplement:

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

sans aucune mapDispatchToProps