Sou iniciante em javascript / redux / react, criando um pequeno aplicativo com redux, react-redux e react. Por algum motivo, ao usar a função mapDispatchToProps em conjunto com connect (ligação react-redux), recebo um TypeError indicando que o despacho não é uma função quando tento executar o prop resultante. No entanto, quando eu chamo o dispatch como suporte (consulte a função setAddr no código fornecido), ele funciona.
Estou curioso para saber por que isso ocorre, no exemplo de aplicativo TODO nos documentos redux, o método mapDispatchToProps está configurado da mesma maneira. Quando eu console.log (despacho) dentro da função, ele diz que despacho é do tipo objeto. Eu poderia continuar usando o despacho dessa maneira, mas me sentiria melhor sabendo por que isso está acontecendo antes de continuar com o redux. Estou usando o webpack com babel-loaders para compilar.
Meu código:
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
Felicidades.
fonte
Respostas:
Se você deseja usar
mapDispatchToProps
semmapStateToProps
usar apenasnull
o primeiro argumento.export default connect(null, mapDispatchToProps)(Start)
fonte
mapDispatchToProps
, apenas não acrescentar que argumento paraconnect
:connect(mapStateToProps)(MyComponent)
Você está apenas perdendo o primeiro argumento para
connect
, que é omapStateToProps
método. Trecho do aplicativo Redux todo:fonte
Usar
ao invés de
fonte
Eu resolvi trocando os argumentos, eu estava usando
o que está errado. O
mapStateToProps
tem que ser o primeiro argumento:Parece óbvio agora, mas pode ajudar alguém.
fonte
Eu precisava de um exemplo usando,
React.Component
então eu estou postando:fonte
Questão
Aqui estão algumas coisas a serem observadas para entender o comportamento do componente conectado no seu código:
A Aridade das
connect
Matérias:connect(mapStateToProps, mapDispatchToProps)
React-Redux chama
connect
com o primeiro argumentomapStateToProps
e o segundo argumentomapDispatchToProps
.Portanto, embora você tenha passado na sua
mapDispatchToProps
, o React-Redux trata isso comomapState
se fosse o primeiro argumento. Você ainda recebe aonSubmit
função injetada em seu componente porque o retorno demapState
é mesclado nos acessórios do seu componente. Mas não é assim quemapDispatch
deve ser injetado.Você pode usar
mapDispatch
sem definirmapState
. Passe nonull
lugar demapState
e seu componente não estará sujeito a alterações na loja.O componente conectado recebe
dispatch
por padrão, quando nenhummapDispatch
é fornecidoAlém disso, seu componente recebe
dispatch
porque recebeunull
sua segunda posição paramapDispatch
. Se você passar corretamentemapDispatch
, seu componente não receberádispatch
.Prática comum
As respostas acima respondem por que o componente se comportou dessa maneira. Embora seja uma prática comum, você simplesmente transmite seu criador de ações usando
mapStateToProps
a abreviação de objetos. E chame isso dentro do componenteonSubmit
Isso é:fonte
Quando você não fornece
mapDispatchToProps
como segundo argumento, assim:então você está recebendo o envio automaticamente para os adereços do componente, para que você possa:
sem nenhum mapDispatchToProps
fonte
Eu estou usando assim .. é fácil entender o primeiro argumento é mapStateToProps e o segundo argumento é mapDispatchToProps no final, conectar-se à função / classe.
fonte
Às vezes, esse erro também ocorre quando você altera a ordem da função do componente ao passar para a conexão.
Pedido incorreto:
Ordem correta:
fonte
Uma armadilha que alguns podem abordar é abordada por esta pergunta, mas não é abordada nas respostas, pois é um pouco diferente na estrutura do código, mas retorna exatamente o mesmo erro.
Este erro ocorre ao usar
bindActionCreators
e não passar adispatch
funçãoErro de código
Código Fixo
A função
dispatch
estava ausente no código de errofonte
A função React-redux 'connect' aceita dois argumentos, primeiro é mapStateToProps e o segundo é mapDispatchToProps, verifique abaixo ex.
export default connect(mapStateToProps, mapDispatchToProps)(Index);
`Se não queremos recuperar o estado do redux, definimos nulo em vez de mapStateToProps.
export default connect(null, mapDispatchToProps)(Index);
fonte