6

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

2
  • The second param of the constructor is context, not doSearchClick. If you've mapped correctly that should be available at this.props.doSearchClick, although this is a strange name for an action. Commented Feb 24, 2016 at 12:30
  • It is a misleading name. Mostly a result of me copying from so many different sources and not understanding what is going on. It should probably be named dispatchSearchAction... Commented Feb 24, 2016 at 12:39

2 Answers 2

2

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

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, I missed that. So 'connect' merges together properties?
Yes, connect merges the objects you return from mapStateToProps and mapDispatchToEvents
1

This:

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

Means that your SearchForm component is expecting to get a function named doSearchClick as props from its father.

If the father passed this props the child should access it via

props.doSearchClick

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.