javascript - para - react redux mapstate to props

This.props.dispatch no es una función-React-Redux

Question

Estoy intentando enviar una acción desde mi componente inteligente. He intentado usar mapDispatchToProps y this.props.dispatch(actions.getApplications(1)) pero ninguno de ellos vincula las acciones a las props .

¿No estoy seguro de si es porque no se incluye mi mapStateToProps ? Intenté incluirlo pero tampoco funcionó.

Cualquier ayuda es apreciada, me disculpo por la longitud del bloque de código a continuación.

import classNames from ''classnames'';
import SidebarMixin from ''global/jsx/sidebar_component'';
import Header from ''common/header'';
import Sidebar from ''common/sidebar'';
import Footer from ''common/footer'';
import AppCard from ''routes/components/appCard'';
import { getApplications } from ''redux/actions/appActions'';
import { connect } from ''react-redux''
import { bindActionCreators } from ''redux''
import actions from ''redux/actions'';
import { VisibilityFilters } from ''redux/actions/actionTypes'';
class ApplicationContainer extends React.Component {
constructor(props){
super(props)
this.state = {
applicants: []
}
this.onDbLoad = this.onDbLoad.bind(this)
}
onDbLoad(){
console.log(this.props.dispatch)
// this.props.getApplications(1)
}
render() {
return (
<Col sm={12} md={4} lg={4}>
<PanelContainer style={panelStyle}>
<Panel>
<PanelBody >
<Grid>
<Row>
{ this.onDbLoad() }
</Row>
</Grid>
</PanelBody>
</Panel>
</PanelContainer>
</Col>
)}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({ getApplications: getApplications },dispatch)
}
export default connect(null, mapDispatchToProps)(ApplicationContainer);
@SidebarMixin
export default class extends React.Component {
render() {
const app = [''Some text'', ''More Text'', ''Even More Text''];
var classes = classNames({
''container-open'': this.props.open
})
return (
<Container id=''container'' className={classes}>
<Sidebar />
<Header />
<Container id=''body''>
<Grid>
<Row>
<ApplicationContainer />
</Row>
</Grid>
</Container>
<Footer />
</Container>
)}
}

Answer 1

Como mencionó en su pregunta, mapDispatchToProps debería ser el segundo argumento para connect .

Si no tiene que realizar ningún mapeo de estado, puede pasar null como primer argumento:

export default connect(null, mapDispatchToProps)(ApplicationContainer);

Después de hacer esto, entonces this.props.getApplications se this.props.getApplications .

Según su comentario, si desea tener acceso a this.props.dispatch de acciones de enlace, simplemente llame a connect() sin pasar ningún mapeador, y el comportamiento predeterminado inyectará el dispatch .

Si desea tener AMBOS creadores de acciones vinculadas y this.props.dispatch , también debe agregar un dispatch al objeto que pase a mapDispatchToProps . Algo así como dispatch: action => action . O, como no está poniendo todo bajo una clave raíz (como actions ), podría hacer:

function mapDispatchToProps(dispatch) {
let actions = bindActionCreators({ getApplications });
return { ...actions, dispatch };
}

Answer 2

Según la pregunta de Redux FAQ en http://redux.js.org/docs/FAQ.html#react-props-dispatch , this.props.dispatch está disponible de forma predeterminada si no proporciona su propia función mapDispatchToProps . Si proporciona una función mapDispatchToProps , usted es responsable de devolver usted mismo un prop denominado dispatch .

O bien, puede asegurarse de que sus creadores de acciones estén previamente enlazados con la utilidad bindActionCreators de Redux y no tener que preocuparse por usar this.props.dispatch en su componente.