mapDispatchToProps not working. Props empty (error: redux action is not a function)
Figured it out.
So I was exporting component up top and export default below.
Noticed webpack was giving an error 'import and export may only appear at top level'. Went ahead and removed top export and now works as expected.
Faced the same issue and I just removed the curly braces from import
:
From
import {AppTest} from "./AppTest";
To
import AppTest from "./AppTest";
And that seemed to fixed the issue. Note that I had "export default" in my class already.
So I had this same issue & the problem was the same as shown in the other useful answers but I will try to explain why this happens in more details
If we define the class with a default export & a named export as shown here (based on the question):
// named export
export class BooksForm extends React.Component{
.......
function mapDispatchToProps(dispatch){
return bindActionCreators({postBooks},dispatch)
}
// default export
export default connect(null,mapDispatchToProps)(BooksForm);
Then we have to be careful when importing the class to import the default export not the named export:
This imports the default export & shall work correctly with redux
import BooksForm from "./thePath"
This imports the named export & won't work with redux
import { BooksForm } from "./thePath"
If we define the two imports in the same class (which is usually done to make unit testing easier) :
Then we have to import the default export when rendering the component in order to use the redux connect() higher order function that we have exported.
Sometimes if you just depend on the editor autoimport, it will import the named export (which doesn't have the redux connect) & therefore will give that error
Bottom line
You don't have to remove any of the 2 exports, just import the default export (without braces) to use redux connect() correctly