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, Sep 01 '17 at 07:16
See this question https://stackoverflow.com/questions/41670146/why-is-there-no-need-for-a-mapdispatchtoprops-function-here/41671030#41671030 — Shubham Khatri, Sep 01 '17 at 07:20

score 2 · Answer 1 · answered Sep 01 '17 at 07:17

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 01 '17 at 07:17

Hemerson Carlin

7,354
1
27
38

score 1 · Accepted Answer · answered Sep 01 '17 at 07:17

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 01 '17 at 07:17

Daniel Tran

6,083
12
25

1

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 Sep 01 '17 at 07:30
btw whats happening is when I call showLoading it blows everything in the store tied to the xxxxActions – Saifis Sep 01 '17 at 07:45
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 – Saifis Sep 01 '17 at 07:50

score 0 · Answer 3 · answered Sep 01 '17 at 08:03

0

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

dispatch is not defined on my functions using react and redux

3 Answers3