'dispatch' is not a function when argument to mapToDispatchToProps() in Redux

Question

I am building an small application with redux, react-redux, & react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError indicating that dispatch is not a function when I try to execute the resulting prop. When I call dispatch as a prop however (see the setAddr function in the provided code) it works.

I'm curious as to why this is, in the example TODO app in the redux docs the mapDispatchToProps method is setup the same way. When I console.log(dispatch) inside the function it says dispatch is type object. I could continue to use dispatch this way but I would feel better knowing why this is happening before I continue any further with redux. I am using webpack with babel-loaders to compile.

My Code:

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { setAddresses } from '../actions.js';
import GeoCode from './geoCode.js';
import FlatButton from 'material-ui/lib/flat-button';

const Start = React.createClass({
    propTypes: {
        onSubmit: PropTypes.func.isRequired
    },

    setAddr: function(){
        this.props.dispatch(
            setAddresses({
                pickup: this.refs.pickup.state.address,
                dropoff: this.refs.dropoff.state.address
            })
        )   

    },

    render: function() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-6">
                        <GeoCode ref='pickup' />
                    </div>
                    <div className="col-xs-6">
                        <GeoCode ref='dropoff' />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-6">
                        <FlatButton 
                            label='Does Not Work'
                            onClick={this.props.onSubmit({
                                pickup: this.refs.pickup.state.address,
                                dropoff: this.refs.dropoff.state.address
                            })} 
                            />
                    </div>
                    <div className="col-xs-6">
                        <FlatButton 
                            label='Works'
                            onClick={this.setAddr} 
                            />
                    </div>
                </div>
            </div>
        );
    }
})

const mapDispatchToProps = (dispatch) => {
    return {
        onSubmit: (data) => {
            dispatch(setAddresses(data))
        }
    }
}

const StartContainer = connect(mapDispatchToProps)(Start)

export default StartContainer

I was having this issue and [this](https://stackoverflow.com/a/47565406/1399491) helped me solve it — Alex W, Jul 08 '20 at 18:42

score 347 · Accepted Answer · answered Aug 01 '16 at 21:43

347

If you want to use mapDispatchToProps without a mapStateToProps just use null for the first argument.

export default connect(null, mapDispatchToProps)(Start)

answered Aug 01 '16 at 21:43

inostia

7,777
3
30
33

6

This is what I have been looking for. Now I know if I just want to dispatch some actions. – Emperor Krauser Mar 09 '17 at 18:55
This is exactly something I was looking for. Thanks for the perfect solution. What if we don't have to use mapDispatchToProps in any of our component ? Is it the same way we have to handle that scenario ? – Arun Ramachandran Mar 26 '18 at 13:33
1

If you don't need `mapDispatchToProps`, just don't add that argument to `connect`: `connect(mapStateToProps)(MyComponent)` – inostia Mar 26 '18 at 17:08

score 116 · Answer 2 · answered Feb 16 '16 at 21:26

116

You are just missing the first argument to connect, which is the mapStateToProps method. Excerpt from the Redux todo app:

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

answered Feb 16 '16 at 21:26

Brandon

38,310
8
82
87

3

is it mandatory to use this method? This method just catches state what if we dont need this method? – Muneem Habib Nov 28 '16 at 15:07
6

@MuneemHabib see inostia's answer for how to not supply this method if you don't need it – Brandon Nov 28 '16 at 15:28

score 24 · Answer 3 · edited Dec 18 '16 at 01:18

24

Use

const StartContainer = connect(null, mapDispatchToProps)(Start)

instead of

const StartContainer = connect(mapDispatchToProps)(Start)

edited Dec 18 '16 at 01:18

ρяσѕρєя K

132,198
53
198
213

answered Dec 18 '16 at 01:08

Ann

249
2
2

score 7 · Answer 4 · edited Oct 26 '17 at 04:05

7

I solved it by interchanging the arguments, I was using

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)

which is wrong. The mapStateToProps has to be the first argument:

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)

It sounds obvious now, but might help someone.

edited Oct 26 '17 at 04:05

Derek Brown

4,232
4
27
44

answered Oct 26 '17 at 03:45

Amit Mittal

85
2
6

score 4 · Answer 5 · answered Jul 18 '16 at 08:29

I needed an example using React.Component so I am posting it:

import React from 'react';
import * as Redux from 'react-redux';

class NavigationHeader extends React.Component {

}

const mapStateToProps = function (store) {
    console.log(`mapStateToProps ${store}`);
    return {
        navigation: store.navigation
    };
};

export default Redux.connect(mapStateToProps)(NavigationHeader);

score 4 · Answer 6 · answered Oct 09 '18 at 17:04

Issue

Here are a couple of things to notice in order to understand the connected component's behavior in your code:

The Arity of connect Matters: connect(mapStateToProps, mapDispatchToProps)

React-Redux calls connect with the first argument mapStateToProps, and second argument mapDispatchToProps.

Therefore, although you've passed in your mapDispatchToProps, React-Redux in fact treats that as mapState because it is the first argument. You still get the injected onSubmit function in your component because the return of mapState is merged into your component's props. But that is not how mapDispatch is supposed to be injected.

You may use mapDispatch without defining mapState. Pass in null in place of mapState and your component will not subject to store changes.

Connected Component Receives dispatch by Default, When No mapDispatch Is Provided

Also, your component receives dispatch because it received null for its second position for mapDispatch. If you properly pass in mapDispatch, your component will not receive dispatch.

Common Practice

The above answers why the component behaved that way. Although, it is common practice that you simply pass in your action creator using mapStateToProps's object shorthand. And call that within your component's onSubmit That is:

import { setAddresses } from '../actions.js'

const Start = (props) => {
  // ... omitted
  return <div>
    {/** omitted */}
    <FlatButton 
       label='Does Not Work'
       onClick={this.props.setAddresses({
         pickup: this.refs.pickup.state.address,
         dropoff: this.refs.dropoff.state.address
       })} 
    />
  </div>
};

const mapStateToProps = { setAddresses };
export default connect(null, mapDispatchToProps)(Start)

score 2 · Answer 7 · answered Jun 20 '19 at 08:46

A pitfall some might step into that is covered by this question but isn't addressed in the answers as it is slightly different in the code structure but returns the exact same error.

This error occurs when using bindActionCreators and not passing the dispatch function

Error Code

import someComponent from './someComponent'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { someAction } from '../../../actions/someAction'

const mapStatToProps = (state) => {
    const { someState } = state.someState

    return {
        someState
    }
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        someAction
    });
};

export default connect(mapStatToProps, mapDispatchToProps)(someComponent)

Fixed Code

import someComponent from './someComponent'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { someAction } from '../../../actions/someAction'

const mapStatToProps = (state) => {
    const { someState } = state.someState

    return {
        someState
    }
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        someAction
    }, dispatch);
};

export default connect(mapStatToProps, mapDispatchToProps)(someComponent)

The function dispatch was missing in the Error code

score 2 · Answer 8 · answered Jul 06 '19 at 10:06

React-redux 'connect' function accepts two arguments first is mapStateToProps and second is mapDispatchToProps check below ex.

export default connect(mapStateToProps, mapDispatchToProps)(Index); `

If we don't want retrieve state from redux then we set null instead of mapStateToProps.

export default connect(null, mapDispatchToProps)(Index);

score 1 · Answer 9 · edited Mar 15 '22 at 09:51

1

You're missing in the last statement. As we don't have mapStateToProps, so the statement will be like below

const StartContainer = connect(null, mapDispatchToProps)(Start)

edited Mar 15 '22 at 09:51

Elikill58

4,050
24
23
45

answered Mar 15 '22 at 05:24

abdul wahhab

11
1

score 0 · Answer 10 · answered Feb 16 '18 at 13:21

When you do not provide mapDispatchToProps as a second argument, like this:

export default connect(mapStateToProps)(Checkbox)

then you are automatically getting the dispatch to component's props, so you can just:

class SomeComp extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    this.props.dispatch(ACTION GOES HERE);
  }
....

without any mapDispatchToProps

score 0 · Answer 11 · answered Sep 11 '18 at 13:08

i am using like this.. its easy to understand first argument is mapStateToProps and second argument is mapDispatchToProps in the end connect with function/class.

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

if you dont have first argument then just pass null / undefined and then second argument.. — Abdul Moiz, Sep 11 '18 at 13:10

score 0 · Answer 12 · answered Mar 27 '19 at 11:44

Sometime this error also occur when you change the order of Component Function while passing to connect.

Incorrect Order:

export default connect(mapDispatchToProps, mapStateToProps)(TodoList);

Correct Order:

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

score 0 · Answer 13 · answered Jan 11 '21 at 14:46

0

I got this issue when i wrote :
export default connect (mapDispatchToProps,mapStateToProps)(SearchInsectsComponent); instead of export default connect (mapStateToProps,mapDispatchToProps)(SearchInsectsComponent);

answered Jan 11 '21 at 14:46

harika

21
3

'dispatch' is not a function when argument to mapToDispatchToProps() in Redux

13 Answers13

Issue

Common Practice