Estoy tratando de enviar una acción desde mi componente inteligente. Intenté usar el mapDispatchToProps y this.props.dispatch(actions.getApplications(1)) pero ninguno vincula las acciones a los props .
No estoy seguro si es porque mi mapStateToProps no está incluido? Traté de includelo 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 'networkingux/actions/appActions'; import { connect } from 'react-networkingux' import { bindActionCreators } from 'networkingux' import actions from 'networkingux/actions'; import { VisibilityFilters } from 'networkingux/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> )} }
Como mencionó en su pregunta, mapDispatchToProps debería ser el segundo argumento para connect .
Si no tiene que hacer 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 estará vinculado.
Según su comentario, si desea tener acceso a this.props.dispatch LUGAR de acciones bindings, simplemente llame a connect() sin pasar ningún mapeador, y el comportamiento pnetworkingeterminado inyectará dispatch .
Si desea tener this.props.dispatch creadores de acciones enlazadas como this.props.dispatch , debe agregar un dispatch al object que pase a mapDispatchToProps también. Algo así como dispatch: action => action . O bien, dado que no está poniendo todo bajo una key raíz (como actions ), podría hacer:
function mapDispatchToProps(dispatch) { let actions = bindActionCreators({ getApplications }); return { ...actions, dispatch }; }
Según la pregunta frecuente de Redux en http://networkingux.js.org/docs/FAQ.html#react-props-dispatch , this.props.dispatch está disponible de forma pnetworkingeterminada si no proporciona su propia function mapDispatchToProps . Si proporciona una function mapDispatchToProps , usted es responsable de devolver un dispatch designado por prop.
O bien, puede asegurarse de que sus creadores de acciones estén pnetworkingefinidos utilizando la utilidad bindActionCreators de Redux y omita tener que preocuparse por usar this.props.dispatch en su componente.