диспетчеризация не определена в моих функциях с использованием реакции и сокращения

Я пытаюсь использовать react-redux-loading-bar, чтобы показать загрузку bar во время получения данных с серверов API, я не использую промежуточное программное обеспечение обещания, поэтому я решил использовать его без него, в примере говорится, сделайте это

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

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

И это дает мне это.

Uncaught ReferenceError: dispatch is not defined

У меня были аналогичные проблемы с другими библиотеками, и я отказался от этого времени, на этот раз я хочу действительно понять, как это работает, поэтому любая информация очень ценится. Вот код, вызывающий ошибку, специальные функции и имена классов.

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)

reactjs redux redux-thunk redux-middleware
person Saifis    schedule 01.09.2017    source источник
comment
Когда вы используете bindActionCreators, каждый создатель действия оборачивается в диспетчерский вызов, поэтому их можно вызывать напрямую с помощью реквизитов. Итак, для отправки в вашем случае используйте что-то вроде this.props.xxxxxActions.yourActionToDispatch()   -  person Dev    schedule 01.09.2017
comment
См. этот вопрос здесь нет необходимости в функции mapdispatchtoprops"> stackoverflow.com/questions/41670146/   -  person Shubham Khatri    schedule 01.09.2017

Ответы (3)


arrow_upward
1
arrow_downward

Вам нужно передать функцию отправки вашим реквизитам:

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

Затем используйте его в своем компоненте:

this.props.showLoading();
...
this.props.hideLoading();
person Daniel Tran    schedule 01.09.2017
comment
Спасибо, похоже, это работает, однако, столкнувшись с некоторыми непредвиденными ошибками из-за исправления, я думаю, что это не из-за ошибок в этом ответе, а из-за чего-то, не связанного с моим кодом, это будет отмечено как ответ, как только я доберусь до сути. - person Saifis; 01.09.2017
comment
кстати, что происходит, когда я вызываю showLoading, он взрывает все в магазине, связанном с xxxxActions - person Saifis; 01.09.2017
comment
Я думаю, что понимаю, что происходит, они отправляются как события xxxxActions, таким образом, поражая мой редуктор для xxxxActions, где он должен поражать редуктор для панели реакции-редукции-загрузки. - person Saifis; 01.09.2017

arrow_upward
2
arrow_downward

Как только вы connect свой компонент, dispatch становится prop. То же самое относится и к xxxxxActions...

В этом случае дескриптор будет:

handleclick(){
  this.props.dispatch(...)
}
person mersocarlin    schedule 01.09.2017

arrow_upward
0
arrow_downward

Вам не нужно использовать «отправку» в компонентах. Свяжите свои функции с отправкой в ​​mapDispatchToProps.

Узнайте больше о mapDispatchToProps.

person Gothic Prince    schedule 01.09.2017
comment
Да, я чувствую, что неправильно понимаю, как работает диспетчеризация, спасибо за подсказку. - person Saifis; 01.09.2017