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.