使用 react 和 redux 在我的函数上没有定义 dispatch

Question

我正在尝试使用 react-redux-loading-bar 在从 API 服务器获取数据期间显示加载条，我不使用 promise 中间件所以我决定不使用它，示例说做这个

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

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

它给了我这个。

Uncaught ReferenceError: dispatch is not defined

我在其他库中也遇到过类似的问题并放弃了那个时间，这次我想真正了解它是如何工作的，所以非常感谢任何信息。这是导致错误的代码，特定函数和 class 名称被删除。

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)

Answer 1

您需要将调度函数传递给您的道具：

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

然后，在你的组件中使用它：

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

Answer 2

一旦你 connect 你的组件，dispatch 就变成了 prop。这同样适用于 xxxxxActions...

在那种情况下，句柄将是：

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

Answer 3

您不需要在组件中使用 "dispatch"。在 mapDispatchToProps 中使用 dispatch 绑定你的函数。

阅读有关 mapDispatchToProps 的更多信息。

使用 react 和 redux 在我的函数上没有定义 dispatch

dispatch is not defined on my functions using react and redux

reactjs

redux

redux-thunk

redux-middleware