dispatch 直接从props中拿不到的原因是connect做了操作已经和dispatch绑定了所以不会再返回dispatch了

> mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的

```javascript
function mapDispatchToProps(dispatch) {
   return {
      todoActions: bindActionCreators(todoActionCreators, dispatch),
      counterActions: bindActionCreators(counterActionCreators, dispatch)
   };
}
```

mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。

**mergeProps(stateProps, dispatchProps, ownProps)：**
> 将mapStateToProps() 与 mapDispatchToProps()返回的对象和组件自身的props合并成新的props并传入组件。默认返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

如果想用常规的props中返回dispatch的话：

我正尝试从我的智能组件内发出一个动作。我试图使用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>
    )}
}

写回答关注邀请回答

提问于 2018-04-09

this.props.dispatch不是函数 - React-Redux问题如何解决？

写回答关注

2 个回答

热门排序

用户回答回答于 2018-04-09

根据http://redux.js.org/docs/FAQ.html#react-props-dispatch上的Redux常见问题解答问题，this.props.dispatch如果不提供自己的mapDispatchToProps功能，则默认为可用。如果你这样做提供一个mapDispatchToProps功能，你负责返回一个名为道具dispatch自己。

或者，可以使用Redux的bindActionCreators实用程序确保动作创建者已预先绑定，并且不必担心this.props.dispatch在组件中使用。

赞0 收藏0 评论0 分享

用户回答回答于 2018-04-09

正如你在你的问题中提到的，mapDispatchToProps应该是第二个参数connect。

如果你没有任何状态映射，你可以null作为第一个参数传递：

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

你做完这些之后，this.props.getApplications就会受到约束。

如果想访问this.props.dispatchINSTEAD绑定操作，只需调用connect()而不传递任何映射器，并且默认行为将被注入dispatch。

如果你想拥有两个绑定的动作创建者this.props.dispatch，那么你需要添加一个dispatch到你传递给mapDispatchToProps它的对象。类似的东西dispatch: action => action。或者，由于没有将所有内容放在根键（如actions）下，因此可以这样做：

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

https://cloud.tencent.com/developer/ask/86689