接続コンポーネントでディスパッチを使用できません

Question

reduxに接続している反応コンポーネントからディスパッチを呼び出そうとしています。何らかの理由で私はthis.props.dispatchをこのコンポーネントから呼び出すことができません。しかし、コンポーネントではshowPopupアクションが正常に機能していますか？

Reading the docsconnect()がある場合はいつでもthis.props.dispatchに電話する必要があります。私はここで行方不明の何か？

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

// Actions 
import { showPopup } from '../../../actions'; 

class Channels extends Component { 
    render() { 
     console.log(this.props.dispatch); // <- undefined (?) 
     return <div>some stuff</div>; 
    } 
} 

export default connect(null, { showPopup })(Channels); 

アップデート1

以下は、これを短縮する方法はありません、それは動作しますか？

function mapDispatchToProps(dispatch) { 
    let actions = bindActionCreators({ showPopup }); 
    return { ...actions, dispatch }; 
} 

アップデート2

export default connect(null, (dispatch) => bindActionCreators({ showPopup, dispatch }, dispatch))(Channels); 

Answer 1

あなたの最初のコードは自分this.props.dispatchthis.props.showPopupに変更を動作するはずです。

あなたはconnectメソッドに2つ目の引数を渡すと、それは小道具としてそれらのアクションをマッピングします。あなたはあなたができる最初の例ではそれをやったように、あなただけのconnect()(Channels);が、その後、あなたがそれを行う場合this.props.dispatch(showPopup(...))またはthis.props.dispatch(otherAction())またはthis.props.dispatch(someAction())