dispatch is not defined on my functions using react and redux

Question

I am trying to use react-redux-loading-bar to show a loading bar during fetching data from API servers, I don't use promise middleware so I decided to use it without, the example says do this

import { showLoading, hideLoading } from 'react-redux-loading-bar'

dispatch(showLoading())
// do long running stuff
dispatch(hideLoading())

And it gives me this.

Uncaught ReferenceError: dispatch is not defined

I had similar issues with other libraries and gave up that time, this time I want to actually understand how this works, so any info is greatly appreciated. Heres the code that causing the error, speicifc function and class names stripped.

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { showLoading, hideLoading } from 'react-redux-loading-bar'


import * as xxxxxActions from '../../actions/xxxxx'


class xxxxxx extends React.Component {

    constructor(props) {
        super(props)

        this.handleclick = this.handleclick.bind(this)
    }

    handleclick(){
        dispatch(showLoading())
        asynchronousGetFunction( target_url, function (data) {
            dispatch(hideLoading())
        })
    }

    render() {

        return  <li onClick={this.handleclick}>yyyyyyy</li>
    }
}

function mapStateToProps( state ){
    return {
    }
}

function mapDispatchToProps(dispatch, state) {

    return {
        xxxxxActions: bindActionCreators( xxxxxActions, dispatch )
    };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(xxxxxx)

When you use bindActionCreators, every action creator is wrapped into a dispatch call so they may be invoked directly using props. So to dispatch, in your case , use something like this.props.xxxxxActions.yourActionToDispatch() — Dev
– Dev, Commented Sep 1, 2017 at 7:16

Hemerson Carlin · Accepted Answer · 2017-09-01 07:17:55Z

2

Once you connect your component, dispatch becomes a prop. The same applies for xxxxxActions...

In that case, the handle would be:

handleclick(){
  this.props.dispatch(...)
}

answered Sep 1, 2017 at 7:17

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

Comments

Khiem Tran · Accepted Answer · 2017-09-01 07:17:08Z

1

You need to pass dispatch function to your props:

function mapDispatchToProps(dispatch, state) {
    return { 
        xxxxxActions: ....,
        showLoading: function () {
            dispatch(showLoading());
        },
        hideLoading: function () {
            dispatch(hideLoading());
        },
    };
}

Then, use it in your component:

this.props.showLoading();
...
this.props.hideLoading();

answered Sep 1, 2017 at 7:17

Khiem Tran

6,16916 silver badges25 bronze badges

3 Comments

Saifis Over a year ago

Thanks this seems to work, however encountering some unforeseen errors due to the fix, I think its not because of errors in this answer but something unrelated in my code, will mark it as the answer as soon as I get to the bottom of it.

Saifis Over a year ago

btw whats happening is when I call showLoading it blows everything in the store tied to the xxxxActions

Saifis Over a year ago

I think I understand whats happening, they are getting dispatched as xxxxActions events, thus hitting my reducer for xxxxActions, where it should be hitting the reducer for react-redux-loading-bar

Gothic Prince · Accepted Answer · 2017-09-01 08:03:30Z

0

You don't need use "dispatch" in components. Bind your functions with dispatch in mapDispatchToProps.

1 Comment

Saifis Over a year ago

Yeah I feel I'm misunderstanding how dispatch works, thanks for the tip

Collectives™ on Stack Overflow

dispatch is not defined on my functions using react and redux

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related