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

Posted 2023-02-22

【中文标题】This.props.dispatch 不是函数 - React-Redux

【英文标题】：This.props.dispatch not a function - React-Redux

【发布时间】：2016-08-19 11:00:47

【问题描述】：

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

【参考方案1】：

根据here 上的 Redux 常见问题解答问题，如果您不提供自己的 @987654324，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 返回bindActionCreators

【参考方案2】：

正如您在问题中提到的，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 ;

【讨论】：

感谢您的快速响应，我也尝试了您的解决方案，但调度仍然没有显示为 prop。

您是否特别想通用地使用dispatch？或者您是否希望您的其他操作受到约束。如果是前者，我可以更新答案。

我想调度一个动作，以便它通过减速器运行。

所以通常你会使用绑定操作而不是手动调用this.props.dispatch。您要手动生成操作吗？

是的，我想在组件渲染上生成一个动作