Redux Dispatch Response from Component

Question

I am trying to submit an action with the click of a button.

I created my component. I connect it to the repository, which is passed to the component provider. But I get an error message:

Uncaught TypeError: this.doSearchClick is not a function

I have an import:

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

My component:

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

Not sure if this is necessary:

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

Finally, the connect stuff:

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

At the top level, I pass the store through the Provider:

 import { Provider } from 'react-redux' const finalCreateStore = compose( applyMiddleware( middleware, thunk ), DevTools.instrument() )(createStore); const store = finalCreateStore(reducer); ReactDOM.render( <Provider store={store}> .... 

I also tried to achieve this by accessing the repository through the context (it did not work and could be deprecated), and also using the @connect attribute (gave me a similar error).

Answer 1

doSearchClick will be passed in the props. Therefore you need to type props.doSearchClick to access it.

Answer 2

It:

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

Means that your SearchForm component expects to receive a function named doSearchClick as a props from its father.

If the father has passed this props, the child must access it through

 props.doSearchClick