調度沒有定義在我的函數使用react和redux

我試圖使用react-redux-loading-bar來顯示從API服務器獲取數據期間的加載欄，我沒有使用承諾中間件，所以我決定不使用它，該示例說做到這一點調度沒有定義在我的函數使用react和redux

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

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

它給了我這個。

Uncaught ReferenceError: dispatch is not defined

我曾與其他圖書館類似的問題而放棄了那個時候，這個時候我想真正瞭解如何工作的，所以任何信息是極大的讚賞。下面是導致錯誤，speicifc函數和類名剝離的代碼。

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)

來源

2017-09-01 Saifis

當您使用bindActionCreators時，每個動作創建者都會被包裝到一個調度調用中，以便可以使用道具直接調用它們。因此，派遣，在你的情況下，使用像this.props.xxxxxActions.yourActionToDispatch（） – Dev

看到這個問題https://stackoverflow.com/questions/41670146/why-is-there-no-need-for-a- mapdispatchtoprops-function-here/41671030＃41671030 –

您需要調度功能傳遞給你的道具：

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

然後，在你的組件使用它：

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

來源

2017-09-01 07:17:08

感謝這似乎工作，但遇到一些無法預料的錯誤，由於修復，我認爲它不是因爲在這個答案的錯誤，但在我的代碼無關的東西，將標記爲答案爲一旦我到達它的底部。 – Saifis

順便說一句是什麼時候發生的事情是，當我打電話給showLoading時，它吹出了與xxxxActions – Saifis

綁定的商店中的所有內容我想我明白髮生了什麼，它們被派發爲xxxxActions事件，因此觸擊了我的reducer for xxxxActions，它應該擊中reducer react-redux-loading-bar – Saifis

一旦你connect您的組件，dispatch成爲prop。這同樣適用於xxxxxActions ...

在這種情況下，手柄是：

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

來源

2017-09-01 07:17:55 mersocarlin

你不需要的組件使用「調度」。用mapDispatchToProps中的dispatch綁定你的函數。

瞭解更多關於mapDispatchToProps的信息。

來源

2017-09-01 08:03:30

是的，我覺得我誤解了派遣的工作原理，感謝提示 – Saifis

調度沒有定義在我的函數使用react和redux

回答

相關問題