David David - 2 months ago 19
React JSX Question

React-Redux Dispatch Action from Component

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).

Answer

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