Cannot read property 'dispatch' of undefined'. React

Question

Following is the code that I am using. I am getting an error like Uncaught TypeError: Cannot read property 'dispatch' of undefined. I also want to dispatch an action.

import { connect } from 'react-redux'
let SearchBar = ({ dispatch }) => {
    let input
    return (
       <div>
           <form>
              <input type="text" placeholder="Search"  />
              <p>
                 <input type="checkbox" />
                 {' '}
                 Free
              </p>                
           </form>
       </div>
   )
}

SearchBar = connect()(SearchBar)
export default SearchBar()

Drum · Accepted Answer · 2017-02-21 13:33:50Z

2

A couple of things I notice immediately with your code example:

First of all the connect function requires some parameters in the first parenthesis, even if that parameter is a null, also I don't think you need the parentheses on the export line. Try replacing those last two lines with something like this:

export default connect(null)(SearchBar);

see if that makes any difference.

answered Feb 21, 2017 at 13:33

Drum

5071 gold badge5 silver badges22 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2017-02-21 14:08:17Z

1

You are right in passing and retreiving the dispatch from connect. As connect without any parameters will return only the dispatch

However the problem is in the way you are exporting the component

export default SearchBar();

You don't need () after SearchBar and one more thing. For clarity you can use a different name like

var search = connect()(SearchBar)
export default search;

or you can do it in a single step like

export default connect()(SearcBar);

The later is a shorthand for the same thing as the former.

answered Feb 21, 2017 at 14:08

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Shubham Khatri Over a year ago

Glad to have helped :)

EDISON J · Accepted Answer · 2018-04-06 09:03:51Z

0

We can add mapStateToProps inside the connect also.

const mapStateToProps = state => ({
  uData: state
});

export default connect(mapStateToProps)(App);

We do not need to give null inside the connect().

I believe it may help some of you.

answered Apr 6, 2018 at 9:03

EDISON J

3444 silver badges14 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'dispatch' of undefined'. React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related