This.props.dispatchは関数ではありません - React-Redux

Question

スマートコンポーネント内からアクションをディスパッチしようとしています。 mapDispatchToPropsとthis.props.dispatch(actions.getApplications(1))を使用しようとしましたが、いずれもアクションをpropsにバインドしていません。

mapStateToPropsが含まれていないため、わからないのですか？私はそれを含めることを試みたが、どちらもうまくいかなかった。

何か助けていただければ幸いです。以下のコードブロックの長さについてお詫び申し上げます。

import classNames from 'classnames'; 
import SidebarMixin from 'global/jsx/sidebar_component'; 

import Header from 'common/header'; 
import Sidebar from 'common/sidebar'; 
import Footer from 'common/footer'; 
import AppCard from 'routes/components/appCard'; 
import { getApplications } from 'redux/actions/appActions'; 

import { connect } from 'react-redux' 
import { bindActionCreators } from 'redux' 

import actions from 'redux/actions'; 
import { VisibilityFilters } from 'redux/actions/actionTypes'; 


class ApplicationContainer extends React.Component { 
    constructor(props){ 
    super(props) 

    this.state = { 
     applicants: [] 
    } 

    this.onDbLoad = this.onDbLoad.bind(this) 

    } 
    onDbLoad(){ 
    console.log(this.props.dispatch) 
    // this.props.getApplications(1) 
    } 

    render() { 
    return (
     <Col sm={12} md={4} lg={4}> 
      <PanelContainer style={panelStyle}> 
       <Panel> 
        <PanelBody > 
         <Grid> 
          <Row> 
           { this.onDbLoad() } 
          </Row> 
         </Grid> 
        </PanelBody> 
       </Panel> 
      </PanelContainer> 
     </Col> 
    )} 
} 


function mapDispatchToProps(dispatch){ 

    return bindActionCreators({ getApplications: getApplications },dispatch) 
} 

export default connect(null, mapDispatchToProps)(ApplicationContainer); 

@SidebarMixin 
export default class extends React.Component { 

    render() { 
    const app = ['Some text', 'More Text', 'Even More Text']; 

     var classes = classNames({ 
      'container-open': this.props.open 
     }) 
     return (
      <Container id='container' className={classes}> 
       <Sidebar /> 
       <Header /> 
     <Container id='body'> 
      <Grid> 
      <Row> 
       <ApplicationContainer /> 
      </Row> 
      </Grid> 
     </Container> 
       <Footer /> 
      </Container> 
    )} 
} 

Answer 1

あなたはあなたの質問で述べたように、mapDispatchToPropsはconnectから二の引数でなければなりません。

あなたがどのような状態のマッピングが行われるようにしていない場合は、あなたが最初の引数としてnullを渡すことができますが：

export default connect(null, mapDispatchToProps)(ApplicationContainer); 

あなたがこれを実行した後、その後、this.props.getApplicationsがバインドされます。あなたのコメントを1として

---

あなたの代わりに結合アクションのthis.props.dispatchへのアクセス権を持っているしたい場合は、単に任意のマッパーを渡さずconnect()を呼び出して、デフォルトの動作はdispatchを注入します。

あなたがバインドされたアクションのクリエイターとthis.props.dispatchの両方を持っているしたい場合は、あなたにもmapDispatchToPropsに渡すオブジェクトにdispatchを追加する必要があります。 dispatch: action => actionのようなものです。あなたは（のようなactions）ルートキーの下にあるすべてのものを入れていないため、あるいは、あなたができる：

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

Answer 2

をReduxのよくある質問質問ごとhttp://redux.js.org/docs/FAQ.html#react-props-dispatchで、this.props.dispatchはデフォルトで利用可能であるかの供給あなたがないます独自のmapDispatchToProps機能です。 をに、mapDispatchToPropsの機能を提供する場合は、自分でdispatchという小道具を返却する責任があります。

または、ReduxのbindActionCreatorsユーティリティを使用してアクションクリエータが事前バインドされていることを確認し、コンポーネント内でthis.props.dispatchを使用することを心配する必要はありません。