【问题标题】:Pass dispatch function to child component将调度函数传递给子组件
【发布时间】:2017-12-29 14:44:57
【问题描述】:

我正在使用 redux 开发一个通用的 react 应用程序。在我的动作创建者中,我将我的数据发送到存储。

在 ComponentDidMount 函数中调度函数是好的,但是当我想将它传递给渲染函数中的组件时,它给了我错误 无法读取未定义的属性“调度” 如何将调度函数传递给组件?

容器代码:

class DealContainer extends React.Component {
static readyOnActions(dispatch, params) {
                return Promise.all([
                    dispatch(DealsActions.fetchDealData(params.id)),
                    dispatch(SubmitActions.fetchSubmitInitialData()),

                ]);
            }

            componentDidMount() {
                DealContainer.readyOnActions(this.props.dispatch,this.props.params);

            }
    render() {
    return(
    <MyComponent 
    changeStoreFunction = {this.props.dispatch(SubmitActions.changeUserId)}
    />)

    }
    const mapStateToProps = (state, ownProps) => {
        return {
            dealData: state.dealData,
            routing: ownProps.location.query,
            submitInitialData: state.submitInitialData,
            id: ownProps.params.id,
            mapInfo: state.mapInfo,
            areaList: state.areaList,
        }
    };

    DealContainer.propTypes = {
        params: PropTypes.shape({
            id: PropTypes.string.isRequired,
        }).isRequired,
        dispatch: PropTypes.func.isRequired,
    };
        }
    export default connect(mapStateToProps)(DealContainer);

【问题讨论】:

  • 你的mapDispatchToProps在哪里?
  • @AkashShinde 我使用 propTypes
  • 即使你需要定义 mapDispatchToProps 函数来从反应根上下文访问调度

标签: javascript reactjs redux react-router


【解决方案1】:

确实,你需要使用 mapDispatchToProps 来访问 dispatch 函数。

您可以在此处定义将在组件渲染方法中调用的函数:

const mapDispatchToProps = (dispatch) => {
  return {
    yourFunctionToCallFromComponent: () => {
      dispatch(yourAction())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DealContainer);

【讨论】:

  • @SepEhr 如果这个答案对您有帮助,请勾选它作为解决您的问题/问题的答案:) 谢谢
猜你喜欢
  • 2018-07-02
  • 1970-01-01
  • 2021-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-18
相关资源
最近更新 更多