I'm trying to dispatch an action from a button click.
I've created my component. I connect it to the store that is passed down to the component by a Provider. But I get an error:
Uncaught TypeError: this.doSearchClick is not a function
I have my imports:
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 required:
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 down 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}>
....
I have also tried to achieve this by accessing the store via context (didn't work and might be deprecated) and also using the @connect attribute (gave me a similar error).
context, notdoSearchClick. If you've mapped correctly that should be available atthis.props.doSearchClick, although this is a strange name for an action.