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

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

本文关键字：function React-Redux not props dispatch This      更新时间：2023-09-26

我正在尝试从智能组件中调度操作。我尝试使用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>
    )}
}

根据此处的 Redux 常见问题解答问题，如果您不提供自己的 mapDispatchToProps 函数，默认情况下可以使用 this.props.dispatch。 如果您确实提供了mapDispatchToProps函数，则您负责自己返回一个名为dispatch的道具：

const mapDispatchToProps = dispatch => ({
   ...other methods,
   dispatch                // ← Add this
})
export default connect(null, mapDispatchToProps)(Component)

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

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

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

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

执行此操作后，this.props.getApplications将被绑定。

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

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

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ getApplications });
  return { ...actions, dispatch };
}
相关文章：