Javascript This.props.dispatch 不是函数 - React-Redux

This.props.dispatch not a function - React-Redux

提问by richTheCreator

I am trying to dispatch an action from within my smart component. I've tried to use the mapDispatchToPropsand this.props.dispatch(actions.getApplications(1))but neither is binding the actions to props.

我正在尝试从我的智能组件中调度一个动作。我尝试使用mapDispatchToProps并且this.props.dispatch(actions.getApplications(1))都没有将操作绑定到props。

Im not sure if it is because my mapStateToPropsis not included? I tried to include it but it did not work either.

我不确定mapStateToProps是不是因为我的不包括在内？我试图包含它，但它也不起作用。

Any help is appreciated, I apologize for the length of the code block below.

任何帮助表示赞赏，我为下面的代码块的长度道歉。

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>
    )}
}

回答by markerikson

Per the Redux FAQ question at here, this.props.dispatchis available by defaultif you do notsupply your own mapDispatchToPropsfunction. If you dosupply a mapDispatchToPropsfunction, you are responsible for returning a prop named dispatchyourself:

根据此处的 Redux FAQ 问题，如果您不提供自己的函数，this.props.dispatch则默认情况下可用。如果你确实提供了一个函数，你有责任返回一个名为你自己的 prop ：mapDispatchToPropsmapDispatchToPropsdispatch

const mapDispatchToProps = dispatch => ({
   ...other methods,
   dispatch                // ← Add this
})

export default connect(null, mapDispatchToProps)(Component)

Or, you can make sure your action creators are pre-bound using Redux's bindActionCreatorsutility, and skip having to worry about using this.props.dispatchin your component.

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

回答by Interrobang

As you mentioned in your question, mapDispatchToPropsshould be the secondargument to connect.

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

If you don't have any state mapping to be done, you can pass nullas the first argument:

如果您没有要完成的任何状态映射，则可以将其null作为第一个参数传递：

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

After you do this, then this.props.getApplicationswill be bound.

在你这样做之后，然后this.props.getApplications将被绑定。

---

---

As per your comment, if you want to have access to this.props.dispatchINSTEAD of binding actions, simply call connect()without passing any mappers, and the default behavior will inject dispatch.

根据您的评论，如果您想访问this.props.dispatch绑定操作的 INSTEAD，只需调用connect()而不传递任何映射器，默认行为将注入dispatch.

If you want to have BOTH bound action creators and this.props.dispatch, you need to add a dispatchto the object that you pass to mapDispatchToPropsas well. Something like dispatch: action => action. Or, since you're not putting everything under a root key (like actions), you could do:

如果您想要同时绑定动作创建者和this.props.dispatch，您还需要将 a 添加dispatch到您传递给的对象mapDispatchToProps。类似的东西dispatch: action => action。或者，由于您没有将所有内容都放在根键下（例如actions），您可以执行以下操作：

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