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

IT技术 javascript reactjs ecmascript-6 redux react-redux
2021-03-27 00:43:19

我正在尝试从我的智能组件中调度一个动作。我尝试使用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>
    )}
}
2个回答

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

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

export default connect(null, mapDispatchToProps)(Component)

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

感谢您的回复。我的mapDispatchToProps退货bindActionCreators
2021-05-23 00:43:19

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

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

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

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

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

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

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ getApplications });
  return { ...actions, dispatch };
}
您是否特别想dispatch通用？或者你希望你的其他动作被绑定。如果是前者，我可以更新答案。
2021-05-30 00:43:19
感谢您的快速回复，我也尝试了您的解决方案，但 dispatch 仍然没有显示为prop.
2021-06-03 00:43:19
我想调度一个动作，以便它通过减速器运行。
2021-06-09 00:43:19
是的，我想在组件渲染上生成一个动作
2021-06-13 00:43:19
所以通常你会使用绑定操作而不是手动调用this.props.dispatch. 你想手动生成一个动作吗？
2021-06-14 00:43:19
其它你可能感兴趣的问题
上一篇与 Typescript react——使用 React.forwardRef 时的泛型 下一篇在 goBack() react-router v4 之前检查历史以前的位置