Azione di invio React-Redux dal componente

Question

Sto tentando di inviare un'azione da un clic del pulsante.

Ho creato il mio componente. Lo collego al negozio che viene trasmesso al componente da un Provider. Ma ottengo un errore:

Uncaught TypeError: this.doSearchClick is not a function

ho i miei importazioni:

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

La mia componente:

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> 
    ); 
    } 
} 

Non sono sicuro se questo è richiesto:

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

Infine il materiale connect:

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

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

Al livello superiore passo il negozio lungo via Provider:

import { Provider } from 'react-redux' 

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

const store = finalCreateStore(reducer); 

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

Ho anche provato a raggiungere questo accedendo al negozio di via contesto (non ha funzionato e potrebbe essere deprecato) e anche usando l'attributo @connect (mi ha dato un errore simile).

Answer 1

doSearchClick verranno passati nell'oggetto oggetti di scena. Quindi è necessario digitare props.doSearchClick per accedervi.

Answer 2

questo:

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

significa che il componente SearchForm si aspetta di ottenere una funzione denominata doSearchClick come oggetti di scena dal suo padre.

Se il padre è morto questa puntelli il bambino deve accedervi tramite

props.doSearchClick