2016-04-25 213 views
19

我想從我的智能組件中調度一個動作。我試過使用mapDispatchToPropsthis.props.dispatch(actions.getApplications(1)),但都沒有將這些操作綁定到propsThis.props.dispatch不是函數 - React-Redux

林不知道是否因爲我的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> 
    )} 
} 

回答

33

正如你在你的問題中提到,mapDispatchToProps應該是參數connect

如果您沒有任何狀態映射做,你可以通過null作爲第一個參數:

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

完成這一步之後,再this.props.getApplications將被綁定。


根據你的評論,如果你想有機會獲得this.props.dispatch的INSTEAD約束力的行動,只需撥打connect()不傳遞任何映射器,並且默認行爲將注入dispatch

如果要同時擁有綁定動作創建者和this.props.dispatch,則還需要將dispatch添加到傳遞給mapDispatchToProps的對象。像dispatch: action => action。或者,因爲你不是根鍵下把一切(如actions),你可以這樣做:

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

感謝您的快速響應,我已經嘗試過您的解決方案,但派送仍然不會顯示爲「道具」。 – richTheCreator

+0

你是否特別想使用'dispatch'?或者你想讓你的其他行動受到約束。如果前者,我可以更新答案。 – Interrobang

+0

我想分發一個動作,以便它可以通過減速器。 – richTheCreator

23

%的終極版FAQ問題在http://redux.js.org/docs/FAQ.html#react-props-dispatchthis.props.dispatch默認提供,如果你供應您自己的mapDispatchToProps功能。如果你提供mapDispatchToProps函數,你自己負責返回一個名爲dispatch的道具。

或者,您可以確保您的動作創作者使用Redux的bindActionCreators實用程序預先綁定,並且不必擔心在組件中使用this.props.dispatch

+1

感謝您的回覆。我的'mapDispatchToProps'返回'bindActionCreators' – richTheCreator