This.props.dispatch keine Funktion - React-Redux

Question

Ich versuche, eine Aktion aus meiner Smart-Komponente zu versenden. Ich habe versucht, die mapDispatchToProps und this.props.dispatch(actions.getApplications(1)) zu verwenden, aber keiner bindet die Aktionen an props.

Ich bin nicht sicher, ob es ist, weil meine mapStateToProps nicht enthalten ist? Ich habe versucht, es aufzunehmen, aber es hat auch nicht funktioniert.

Jede Hilfe ist willkommen, ich entschuldige mich für die Länge des Codeblocks unten.

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

Wie Sie in Ihrer Frage erwähnt, sollte mapDispatchToProps sein das Sekunden Argument connect.

Wenn Sie Sie kann getan werden keine Statuszuordnung müssen null als erstes Argument übergeben,:

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

Nachdem Sie dies tun, dann this.props.getApplications gebunden werden.

---

Wie pro Ihren Kommentar, wenn Sie den Zugriff auf this.props.dispatch anstelle von verbindlichen Maßnahmen haben wollen, einfach connect() aufrufen, ohne Mapper vorbei, und das Standardverhalten dispatch injizieren.

Wenn Sie BOTH Creator und this.props.dispatch haben möchten, müssen Sie ein dispatch zu dem Objekt hinzufügen, das Sie auch an mapDispatchToProps übergeben. So etwas wie dispatch: action => action. Oder, da man nicht alles unter einem Wurzelschlüssel (wie actions) setzt, könnten Sie tun:

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

Answer 2

Pro die Redux FAQ Frage an http://redux.js.org/docs/FAQ.html#react-props-dispatch ist this.props.dispatch standardmäßig zur Verfügung, wenn Sie nicht Versorgung Ihres eigene mapDispatchToProps Funktion. Wenn Sie tun eine mapDispatchToProps Funktion liefern, sind Sie verantwortlich für die Rückgabe einer Requisite mit dem Namen dispatch selbst.

Oder Sie können sicherstellen, dass Ihre Aktion Schöpfer Pre-gebunden sind mit Redux bindActionCreators Dienstprogramm, und überspringen müssen sich Sorgen über die Verwendung von this.props.dispatch in Ihrer Komponente.