redux action "is not a function" when dispatched from component

Restart Your Application

I had the same problem simply because I forgot to restart my application. All the Redux actions are set up at first state, so the Redux Store had no idea that I had implemented a new function.

Hope this helps someone.

Because you defined an argument called fileUpload in your render method. Remove all of the arguments you defined in your render method. The class has closure scope over all of those imported modules, so you can reference them anywhere in the class.

One reason for this problem that is easy to miss is the following:

If we define the component class with a default export & a named export like this:

// named export
export class MyComponent extends React.Component{      
.......
function mapDispatchToProps(dispatch){
    return bindActionCreators({reduxAction},dispatch)
}
// default export
export default connect(null,mapDispatchToProps)(MyComponent); 

Then we should import the default export not the named export:

This imports the default export & shall work correctly with redux

import MyComponent from "./thePath"

This imports the named export & won't work with redux

import {MyComponent} from "./thePath"

The reason

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 auto import, it will import the named export (which doesn't have the redux connect) & therefore will give that error

Bottom line

Make sure to import the default export (without braces) when calling the component to use redux connect() correctly

In case it helps anyone, I received TypeError: this.props.setCategories is not a function until I noticed that the value for setCategories should have been a callback:

const mapDispatchToProps = dispatch => {
    return {
        setCategories: dispatch(actionCreator.setCategories()),  // cause of error
        onAgeUp: () => dispatch(actionCreator.ageUp(1)),
        onAgeDown: () => dispatch(actionCreator.ageDown(1))
    };
};