Reakcja React-Redux z komponentu

Question

Próbuję wysłać akcję z kliknięcia przycisku.

Stworzyłem mój komponent. Łączę go ze sklepem przekazywanym do dostawcy przez dostawcę. Ale pojawia się błąd:

Uncaught TypeError: this.doSearchClick is not a function

Mam Import:

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import action_doSearch from '../../actions/searchActions' 

Moja komponent:

class SearchForm extends React.Component { 
    constructor(props, doSearchClick) { 
    super(props); 
    this.search = this.search.bind(this); 
    this.doSearchClick = doSearchClick; 
    } 

    search() { 
    this.doSearchClick('bla bla from search'); 
    } 

    render() { 
    return(
     <div> 
     <button onClick={this.search}>Search</button> 
     </div> 
    ); 
    } 
} 

Nie wiem, czy jest to konieczne:

SearchForm.propTypes = { 
    doSearchClick: PropTypes.func.isRequired 
}; 

Wreszcie rzeczy connect:

const mapStateToProps = (state) => { 
    return { 
    state 
    } 
}; 

const mapDispatchToEvents = (dispatch) => { 
    return { 
    doSearchClick: (searchCriteria) => { 
     dispatch(action_doSearch(searchCriteria)); 
    } 
    }; 
}; 
const SearchFormConnected = connect(
    mapStateToProps, 
    mapDispatchToEvents 
)(SearchForm); 

Na najwyższym poziomie mijam sklep w dół poprzez Provider:

import { Provider } from 'react-redux' 

const finalCreateStore = compose(
    applyMiddleware(
     middleware, 
     thunk 
    ), 
    DevTools.instrument() 
)(createStore); 

const store = finalCreateStore(reducer); 

ReactDOM.render(
    <Provider store={store}> 
    .... 

Mam również próbuje to osiągnąć przez dostępu do magazynu za pomocą kontekstu (nie działa i może być nieaktualne) oraz również przy użyciu atrybutu @connect (dał mi podobny błąd).

Answer 1

doSearchClick zostaną przekazane w obiekcie rekwizytów. Musisz więc wpisać props.doSearchClick, aby uzyskać do niego dostęp.

Answer 2

to:

SearchForm.propTypes = { 
    doSearchClick: PropTypes.func.isRequired 
}; 

oznacza, że ​​komponent SearchForm spodziewa się uzyskać funkcję o nazwie doSearchClick jako rekwizyty z jej ojcem.

Jeśli ojciec przeszedł ten podpiera dziecko powinno uzyskać do niego dostęp za pośrednictwem

props.doSearchClick