dispatch is not a function when argument to mapToDispatchToProps in Redux

Question

I am a javascript redux react beginner building an small application with redux  react-redux   amp  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                lt div gt                   lt div className  row  gt                       lt div className  col-xs-6  gt                           lt GeoCode ref  pickup    gt                       lt  div gt                       lt div className  col-xs-6  gt                           lt GeoCode ref  dropoff    gt                       lt  div gt                   lt  div gt                   lt div className  row  gt                       lt div className  col-xs-6  gt                           lt FlatButton                              label  Does Not Work                              onClick  this props onSubmit                                   pickup  this refs pickup state address                                  dropoff  this refs dropoff state address                                                                gt                       lt  div gt                       lt div className  col-xs-6  gt                           lt FlatButton                              label  Works                              onClick  this setAddr                                 gt                       lt  div gt                   lt  div gt               lt  div gt                       const mapDispatchToProps    dispatch    gt        return           onSubmit   data    gt                dispatch setAddresses data                      const StartContainer   connect mapDispatchToProps  Start   export default StartContainer   Cheers

User · Answer

Use   const StartContainer   connect null  mapDispatchToProps  Start     instead of   const StartContainer   connect mapDispatchToProps  Start

User · Answer

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

User · Answer

You are just missing the first argument to connect  which is the mapStateToProps method   Excerpt from the Redux todo app   const mapStateToProps    state    gt      return       todos  getVisibleTodos state todos  state visibilityFilter         const mapDispatchToProps    dispatch    gt      return       onTodoClick   id    gt          dispatch toggleTodo id                const VisibleTodoList   connect    mapStateToProps    mapDispatchToProps   TodoList

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    gt      return       todos  getVisibleTodos state todos  state visibilityFilter         const mapDispatchToProps    dispatch    gt      return       onTodoClick   id    gt          dispatch toggleTodo id                export default connect mapStateToProps mapDispatchToProps  TodoList

User · Answer

If you want to use mapDispatchToProps without a mapStateToProps just use null for the first argument    export default connect null  mapDispatchToProps  Start

User · Answer

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    gt        const   someState     state someState      return           someState           const mapDispatchToProps    dispatch    gt        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    gt        const   someState     state someState      return           someState           const mapDispatchToProps    dispatch    gt        return bindActionCreators           someAction        dispatch       export default connect mapStatToProps  mapDispatchToProps  someComponent    The function dispatch was missing in the Error code

User · Answer

I got this issue when i wrote   export default connect  mapDispatchToProps mapStateToProps  SearchInsectsComponent   instead of export default connect  mapStateToProps mapDispatchToProps  SearchInsectsComponent

User · Answer

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    gt             omitted   return  lt div gt           omitted          lt FlatButton         label  Does Not Work         onClick  this props setAddresses            pickup  this refs pickup state address           dropoff  this refs dropoff state address                   gt     lt  div gt      const mapStateToProps     setAddresses    export default connect null  mapDispatchToProps  Start

User · Answer

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

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

Examples related to javascript

Examples related to reactjs

Examples related to redux

Examples related to react-redux